Designing the Home Page for the Flutter Ecommerce App
28 July
In this section, we will dive into designing the home page for our Flutter ecommerce app. The home page serves as the central hub where users can explore various products, promotions, and featured categories. Our goal is to create an engaging and visually appealing home page that provides a seamless user experience. We will focus on designing a layout that showcases a curated selection of products, highlights special offers, and enables intuitive navigation. By leveraging Flutter’s widget system and following best design practices, we will create a home page that captivates users and entices them to explore further. Join us as we embark on designing the home page to set the stage for a captivating ecommerce app experience.
Creating an attractive Flutter ecommerce home page is essential for capturing the attention of potential customers and providing a seamless shopping experience.
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
title: const Text('ClickMart'),
actions: const [
IconButton(onPressed: null, icon: Icon(Icons.shopping_cart))
],
),
body: SafeArea(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: GridView.count(
crossAxisCount: 2,
childAspectRatio: 0.5,
children: List.generate(
data.length,
(index) => Padding(
padding: const EdgeInsets.all(5.0),
child: GestureDetector(
child: Card(
child: Column(
children: [
Image.network(data[index]),
Padding(
padding: const EdgeInsets.all(10.0),
child: Text('Product ${index + 1}'),
),
Text('\$${100 * (index + 1)}'),
Align(
alignment: Alignment.bottomCenter,
child: ElevatedButton(
child: const Text('Add to Cart'),
onPressed: () {
// Handle the button press here.
},
),
),
],
),
),
),
),
),
),
),
),
);
}
}
// Sample Data
const data = [
"https://5.imimg.com/data5/SELLER/Default/2022/9/VK/FQ/EG/17769549/ap0015.jpeg",
"https://5.imimg.com/data5/SELLER/Default/2022/9/RL/ZT/GR/17769549/bkt001-5347-1000x1000.jpeg",
"https://5.imimg.com/data5/SELLER/Default/2022/9/TE/IH/KW/17769549/bkt00125-1000x1000.jpeg",
"https://5.imimg.com/data5/SELLER/Default/2022/9/OZ/MM/UW/17769549/bkt0041--1000x1000.jpg"
];
