Creating the UI for each page

Creating the UI for each page

Now it's time to create the ui for each page, I'll not try make the app look fancy, the goal is to focus main functionality which is creating a flutter app with sqlite implementation that's why I will not complicate things and stack with the basic stuffs.

Styling the home page.

here is the code our home page. until now we are jus

t generating a 20 dummy products without fetching any database.

import 'package:flutter/material.dart';
import './update_product_page.dart';
import './view_product_page.dart';
import './add_product_page.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Home Page"),
      ),
      body: ListView.builder(
        itemCount: 20,
        itemBuilder: (BuildContext context, int index) {
          return ListTile(
            contentPadding: const EdgeInsets.all(16),
            title: Text("Product name $index - \$88.00"),
            subtitle: Text('Esse consectetur ea minim aliqua duis quis dolor.'),
            trailing: Column(
              children: [
                Expanded(
                  child: IconButton(
                      icon: Icon(
                        Icons.delete,
                        color: Colors.red,
                      ),
                      onPressed: () {}),
                ),
                SizedBox(height: 20),
                Expanded(
                  child: IconButton(
                    icon: Icon(
                      Icons.edit,
                      color: Colors.blue,
                    ),
                    onPressed: () {
                      Navigator.of(context).push(
                        MaterialPageRoute(
                          builder: (context) => UpdateProductPage(),
                        ),
                      );
                    },
                  ),
                ),
              ],
            ),
            onTap: () {
              Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (context) => ProductDetailsPage(),
                ),
              );
            },
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add, color: Colors.white),
        onPressed: () {
          Navigator.of(context).push(
            MaterialPageRoute(
              builder: (context) => AddProductPage(),
            ),
          );
        },
      ),
    );
  }
}

Styling the product details page

import 'package:flutter/material.dart';
import '../models/product.dart';

class ProductDetailsPage extends StatelessWidget {
  final Product product;
  const ProductDetailsPage({this.product});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Product name"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Product name',
              style: TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(height: 20),
            Text('Product description',
                style: Theme.of(context).textTheme.bodyText1),
            SizedBox(height: 20),
            Text(
              '\$${88.toString()}',
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
          ],
        ),
      ),
    );
  }
}

Styling the add product page.

In this page we will have some fields for adding our products like prdouct name, price and description. here is the basic code for the add_product_page.dart.

import 'package:flutter/material.dart';

class AddProductPage extends StatefulWidget {
  @override
  _AddProductPageState createState() => _AddProductPageState();
}

class _AddProductPageState extends State<AddProductPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Add new product"),
      ),
      body: ListView(
        padding: const EdgeInsets.all(16),
        children: [
          TextFormField(
            decoration: InputDecoration(
              hintText: 'Enter product name',
              labelText: 'Product name',
            ),
            onChanged: (value) {},
          ),
          SizedBox(height: 16),
          TextFormField(
            decoration: InputDecoration(
              hintText: 'Enter product description',
              labelText: 'Product description',
            ),
            onChanged: (value) {},
          ),
          SizedBox(height: 16),
          TextFormField(
            keyboardType: TextInputType.number,
            decoration: InputDecoration(
              hintText: 'Enter product price',
              labelText: 'Product price',
            ),
            onChanged: (value) {},
          ),
          SizedBox(height: 16),
          RaisedButton(
            child: Text('Save'),
            onPressed: () {},
          ),
        ],
      ),
    );
  }
}

Styling the update product page.

So this page will be the same as the add_product_page.dart but the functionality will not be the same so here is the code for the update_product_page.dart for now.

import 'package:flutter/material.dart';

class UpdateProductPage extends StatefulWidget {
  @override
  _UpdateProductPageState createState() => _UpdateProductPageState();
}

class _UpdateProductPageState extends State<UpdateProductPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Update product"),
      ),
      body: ListView(
        padding: const EdgeInsets.all(16),
        children: [
          TextFormField(
            decoration: InputDecoration(
              hintText: 'Enter new product name',
              labelText: 'Product name',
            ),
            onChanged: (value) {},
          ),
          SizedBox(height: 16),
          TextFormField(
            decoration: InputDecoration(
              hintText: 'Enter new product description',
              labelText: 'Product description',
            ),
            onChanged: (value) {},
          ),
          SizedBox(height: 16),
          TextFormField(
            keyboardType: TextInputType.number,
            decoration: InputDecoration(
              hintText: 'Enter new product price',
              labelText: 'Product price',
            ),
            onChanged: (value) {},
          ),
          SizedBox(height: 16),
          RaisedButton(
            child: Text('Save'),
            onPressed: () {},
          ),
        ],
      ),
    );
  }
}

Main Page

Finally in the main.dart file we need to load home page first.

import 'package:flutter/material.dart';
import './pages/home_page.dart';

main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

So finally the 4 page will look like that if you have followed everything. flutter sqflite ui