Flutter: Create an E-Commerce Home Page UI

In this blog, We will design a simple E-Commerce home page ui.

Start by creating a new Flutter project in either of VS Code or Android Studio. Replace the Flutter default counter application in main.dart with your own stateful widget.

You should have something like this:

import 'package:ecommerceui/pages/home.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Home(),
    );
  }
}

Before Create Widgets stateless widget create homeappbar.dart, categorieswidgets.dart, itemwidgets.dart file in widgets folder, then inside of it with the following code:

homeappbar.dart widget code:

import 'package:badges/badges.dart';
import 'package:flutter/material.dart';

class HomeAppBar extends StatelessWidget {
  const HomeAppBar({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      padding: EdgeInsets.all(25),
      child: Row(
        children: [
            Icon(
              Icons.sort,
              size: 30,
              color: Colors.blueAccent,
            ),
            Padding(padding: EdgeInsets.only(left: 20), 
            child:Text("DevHub Shop", style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold, color: Colors.blueAccent)) ,),
            Spacer(),
            Badge(
              badgeColor: Colors.red,
              padding: EdgeInsets.all(10),
              child: InkWell(
                onTap: (){},
                child: Icon(Icons.shopping_bag_outlined, size: 35, color: Colors.blueAccent),
              ),
            )
        ],
      ),
    );
  }
}

categorieswidget.dart widget code:

import 'package:flutter/material.dart';

class CategoriesWidget extends StatelessWidget {
  const CategoriesWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: Row(children: [
        for(int i =1; i < 8; i++)
          Container(
            margin: EdgeInsets.symmetric(horizontal: 10),
            padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(20)
            ),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Image.asset("assets/images/shoe.jpg", width: 59, height: 50),
                Padding(
                  padding: EdgeInsets.only(left: 5),
                  child: Text("Shoes", style: TextStyle(fontSize: 18, fontWeight: FontWeight.w600, color: Colors.blueAccent),
                )
                )
              ],
            ),
          )

      ]),
    );
  }
}

itemwidget.dart widget code:

import 'package:flutter/material.dart';

class ItemsWidget extends StatelessWidget {
  const ItemsWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      childAspectRatio: 0.68,
      physics: NeverScrollableScrollPhysics(),
      crossAxisCount: 2,
      shrinkWrap: true,
      children: [
        for( int i=1; i < 11; i++)
        Container(
          padding: EdgeInsets.only(left: 15, right: 15, top: 10),
          margin: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(20)
          ),
          child: Column(
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Container(
                    padding:EdgeInsets.all(5),
                    decoration: BoxDecoration(
                      color: Colors.blueAccent,
                      borderRadius: BorderRadius.circular(20)
                    ),
                    child: Text("-40%", style: TextStyle(fontSize: 14, color: Colors.white, fontWeight: FontWeight.bold),),
                  ),
                  Icon(
                    Icons.favorite_border,
                    color: Colors.red, 
                  )
                ],
              ),

              InkWell(
                onTap: (){},
                child: Container(
                  margin: EdgeInsets.all(10),
                  child: Image.asset("assets/images/shoe.jpg", height: 130, width: 130),
                ),
              ),
              Container(
                padding: EdgeInsets.only(bottom: 8),
                alignment: Alignment.centerLeft,
                child: Text("Product Title", style: TextStyle(fontSize: 18, color: Colors.blueAccent, fontWeight: FontWeight.bold),),
              ),

              Container(
                alignment: Alignment.centerLeft,
                child: Text("show here discription of the product", style: TextStyle(fontSize: 15, color: Colors.grey[400]),),
              ),

              Padding(
                padding: EdgeInsets.symmetric(vertical: 10),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text("\$50", style: TextStyle(fontSize: 16, color: Colors.blueAccent, fontWeight: FontWeight.w600)),
                    Icon(Icons.shopping_cart_checkout, color: Colors.blueAccent)
                  ],
                ),
              )
            ],
          ),
        )
      ],
    );
  }
}

After Create Home stateful widget create home.dart file in home folder, then inside of it with the following code:

import 'package:ecommerceui/widget/categorieswidget.dart';
import 'package:ecommerceui/widget/homeappbar.dart';
import 'package:ecommerceui/widget/itemwidget.dart';
import 'package:flutter/material.dart';

class Home extends StatefulWidget {
  const Home({super.key});

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
          child:ListView(
            children: [
              HomeAppBar(),
              Container(
                // height: 500,
                padding: EdgeInsets.only(top: 15),
                decoration: BoxDecoration(
                  color: Colors.grey[200],
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(30),
                    topRight: Radius.circular(30)
                  )
                ),
                child: Column(
                  children: [
                    Container(
                      margin: EdgeInsets.symmetric(horizontal: 15),
                      padding: EdgeInsets.symmetric(horizontal: 15),
                      decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(30)
                      ),
                      child: Row(
                        children: [
                          Container(
                            margin: EdgeInsets.only(left: 5),
                            height: 50,
                            width: 300,
                            child: TextFormField(
                              decoration: InputDecoration(
                                border: InputBorder.none,
                                hintText: "Search..."
                              ),
                            ),
                          ),
                          Spacer(),
                          Icon(Icons.camera_alt, size: 25, color: Colors.blueAccent)
                        ],
                      ),
                    ),
                    Container(
                      alignment: Alignment.centerLeft,
                      margin: EdgeInsets.symmetric(vertical: 20, horizontal: 10),
                      child: Text("Categories", style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold, color: Colors.blueAccent)),
                    ),

                    CategoriesWidget(),


                    Container(
                      alignment: Alignment.centerLeft,
                      margin: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
                      child: Text("Best Selling", style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold, color: Colors.blueAccent)),
                    ),

                    ItemsWidget()

                  ],
                ),
              )
            ],
        ),
      )
    );
  }
}

Output: