A Flutter E-Commerce App is a practical project that demonstrates how to build a complete shopping application using Flutter and Dart. The app can include product listings, categories, product details, search, cart management, wishlist functionality, user authentication, checkout, orders, and backend/API integration.
This project helps learners understand how multiple Flutter concepts work together to create a real-world application. Flutter provides widgets for building the interface, navigation for moving between screens, state management for handling cart and user data, and networking for communicating with backend services.
| Technology | Purpose |
|---|---|
| Flutter | Build the cross-platform user interface. |
| Dart | Programming language used by Flutter. |
| Material Design | Provides common UI components. |
| HTTP/API | Communicate with a backend server. |
| JSON | Exchange structured data with APIs. |
| Provider | Example approach for managing application state. |
| Firebase | Can provide authentication, database, storage, and other backend services. |
| SharedPreferences | Store small local preferences such as selected settings. |
lib/
├── main.dart
├── models/
│ ├── product.dart
│ ├── category.dart
│ ├── cart_item.dart
│ └── order.dart
├── screens/
│ ├── home_screen.dart
│ ├── product_details_screen.dart
│ ├── category_screen.dart
│ ├── cart_screen.dart
│ ├── wishlist_screen.dart
│ ├── checkout_screen.dart
│ ├── login_screen.dart
│ ├── register_screen.dart
│ ├── orders_screen.dart
│ └── profile_screen.dart
├── services/
│ ├── product_service.dart
│ ├── auth_service.dart
│ └── order_service.dart
├── providers/
│ ├── cart_provider.dart
│ ├── product_provider.dart
│ └── auth_provider.dart
├── widgets/
│ ├── product_card.dart
│ ├── category_card.dart
│ └── cart_item_widget.dart
└── utils/
└── constants.dartSeparating models, screens, services, state-management classes, and reusable widgets makes the project easier to maintain as it grows.
Open a terminal and create a new Flutter project:
flutter create ecommerce_app
cd ecommerce_app
flutter runThe flutter create command creates the basic Flutter application structure.
Packages can be added according to the features required by the application.
flutter pub add http
flutter pub add provider
flutter pub add shared_preferences
flutter pub add cached_network_image
flutter pub add url_launcherFor a production application, choose packages based on the actual requirements and keep dependencies updated and compatible with the project.
import 'package:flutter/material.dart';
void main() {
runApp(const EcommerceApp());
}
class EcommerceApp extends StatelessWidget {
const EcommerceApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Shop',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(
seedColor: Colors.blue,
),
useMaterial3: true,
),
home: const HomeScreen(),
);
}
}
The home screen is the main entry point of the shopping application. It can contain a search bar, promotional banner, category list, and product sections.
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter Shop'),
actions: [
IconButton(
onPressed: () {},
icon: const Icon(Icons.shopping_cart),
),
],
),
body: ListView(
padding: const EdgeInsets.all(16),
children: [
TextField(
decoration: InputDecoration(
hintText: 'Search products',
prefixIcon: const Icon(Icons.search),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
),
),
),
const SizedBox(height: 20),
const Text(
'Categories',
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.bold,
),
),
],
),
);
}
}
A model represents the data used by the application. A product can contain an ID, name, description, price, image URL, category, and rating.
class Product {
final int id;
final String title;
final String description;
final double price;
final String image;
final String category;
final double rating;
Product({
required this.id,
required this.title,
required this.description,
required this.price,
required this.image,
required this.category,
required this.rating,
});
factory Product.fromJson(Map json) {
return Product(
id: json['id'],
title: json['title'],
description: json['description'],
price: (json['price'] as num).toDouble(),
image: json['image'],
category: json['category'],
rating: (json['rating']?['rate'] as num?)?.toDouble() ?? 0,
);
}
}
An API may return product information in JSON format.
{
"id": 1,
"title": "Wireless Headphones",
"price": 59.99,
"description": "Wireless headphones with comfortable design.",
"category": "electronics",
"image": "https://example.com/headphones.jpg",
"rating": {
"rate": 4.5
}
}The Product.fromJson() factory converts JSON data into a Dart object.
Flutter applications can communicate with web APIs using packages such as http. A typical product service sends a GET request and converts the returned JSON into product objects.
import 'dart:convert';
import 'package:http/http.dart' as http;
class ProductService {
Future> fetchProducts() async {
final response = await http.get(
Uri.parse('https://example.com/api/products'),
);
if (response.statusCode == 200) {
final List data = jsonDecode(response.body);
return data
.map((item) => Product.fromJson(item))
.toList();
}
throw Exception('Failed to load products');
}
}
Network requests are asynchronous, so Future, async, and await are commonly used when loading remote product data.
If an Android Flutter application communicates with an internet API, the Android application needs internet permission.
The permission is normally added to the Android manifest used by the application.
E-commerce applications commonly use a grid because it allows multiple products to be displayed efficiently.
GridView.builder(
padding: const EdgeInsets.all(12),
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 12,
mainAxisSpacing: 12,
childAspectRatio: 0.70,
),
itemCount: products.length,
itemBuilder: (context, index) {
final product = products[index];
return ProductCard(
product: product,
);
},
)
class ProductCard extends StatelessWidget {
final Product product;
const ProductCard({
super.key,
required this.product,
});
@override
Widget build(BuildContext context) {
return Card(
clipBehavior: Clip.antiAlias,
child: InkWell(
onTap: () {},
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Image.network(
product.image,
width: double.infinity,
fit: BoxFit.cover,
),
),
Padding(
padding: const EdgeInsets.all(10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
product.title,
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
const SizedBox(height: 6),
Text(
'\$${product.price.toStringAsFixed(2)}',
style: const TextStyle(
fontWeight: FontWeight.bold,
),
),
],
),
),
],
),
),
);
}
}
When a user selects a product, the application can navigate to a product details screen.
class ProductDetailsScreen extends StatelessWidget {
final Product product;
const ProductDetailsScreen({
super.key,
required this.product,
});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Product Details'),
),
body: SingleChildScrollView(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Image.network(
product.image,
height: 300,
width: double.infinity,
fit: BoxFit.contain,
),
const SizedBox(height: 20),
Text(
product.title,
style: const TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 10),
Text(
'\$${product.price.toStringAsFixed(2)}',
style: const TextStyle(
fontSize: 22,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 20),
Text(product.description),
const SizedBox(height: 24),
SizedBox(
width: double.infinity,
child: ElevatedButton(
onPressed: () {},
child: const Text('Add to Cart'),
),
),
],
),
),
);
}
}
Flutter's Navigator can be used to push a new screen onto the navigation stack.
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return ProductDetailsScreen(
product: product,
);
},
),
);When the user wants to return, Navigator.pop(context) can remove the current route.
The shopping cart stores products selected by the user. A cart item generally contains a product and its quantity.
class CartItem {
final Product product;
int quantity;
CartItem({
required this.product,
this.quantity = 1,
});
double get totalPrice {
return product.price * quantity;
}
}
Cart state needs to be shared between multiple screens such as product details, home, and cart. A state-management solution can help keep this information consistent throughout the application.
class CartProvider extends ChangeNotifier {
final List _items = [];
List get items => List.unmodifiable(_items);
void addToCart(Product product) {
final index = _items.indexWhere(
(item) => item.product.id == product.id,
);
if (index >= 0) {
_items[index].quantity++;
} else {
_items.add(
CartItem(product: product),
);
}
notifyListeners();
}
void removeFromCart(Product product) {
_items.removeWhere(
(item) => item.product.id == product.id,
);
notifyListeners();
}
void increaseQuantity(Product product) {
final item = _items.firstWhere(
(item) => item.product.id == product.id,
);
item.quantity++;
notifyListeners();
}
void decreaseQuantity(Product product) {
final item = _items.firstWhere(
(item) => item.product.id == product.id,
);
if (item.quantity > 1) {
item.quantity--;
} else {
_items.remove(item);
}
notifyListeners();
}
double get total {
return _items.fold(
0,
(sum, item) => sum + item.totalPrice,
);
}
}
The provider package is one possible approach for sharing application state. Flutter's documentation demonstrates Provider with ChangeNotifier for simple shared application state.
void main() {
runApp(
ChangeNotifierProvider(
create: (_) => CartProvider(),
child: const EcommerceApp(),
),
);
}The cart provider can then be accessed by widgets that need to display or modify cart information.
ElevatedButton(
onPressed: () {
context.read().addToCart(product);
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Product added to cart'),
),
);
},
child: const Text('Add to Cart'),
)
class CartScreen extends StatelessWidget {
const CartScreen({super.key});
@override
Widget build(BuildContext context) {
final cart = context.watch();
return Scaffold(
appBar: AppBar(
title: const Text('Shopping Cart'),
),
body: cart.items.isEmpty
? const Center(
child: Text('Your cart is empty'),
)
: ListView.builder(
itemCount: cart.items.length,
itemBuilder: (context, index) {
final item = cart.items[index];
return ListTile(
leading: Image.network(
item.product.image,
width: 50,
height: 50,
fit: BoxFit.cover,
),
title: Text(item.product.title),
subtitle: Text(
'\$${item.totalPrice.toStringAsFixed(2)}',
),
trailing: Text(
'Qty: ${item.quantity}',
),
);
},
),
bottomNavigationBar: Padding(
padding: const EdgeInsets.all(16),
child: Text(
'Total: \$${cart.total.toStringAsFixed(2)}',
),
),
);
}
}
Users should be able to increase or decrease the quantity of products in the cart.
Row(
children: [
IconButton(
onPressed: () {
cart.decreaseQuantity(product);
},
icon: const Icon(Icons.remove),
),
Text('$quantity'),
IconButton(
onPressed: () {
cart.increaseQuantity(product);
},
icon: const Icon(Icons.add),
),
],
)A wishlist allows users to save products that they may want to purchase later.
class WishlistProvider extends ChangeNotifier {
final Set _productIds = {};
bool isFavorite(int productId) {
return _productIds.contains(productId);
}
void toggleFavorite(int productId) {
if (_productIds.contains(productId)) {
_productIds.remove(productId);
} else {
_productIds.add(productId);
}
notifyListeners();
}
}
Search functionality allows users to find products by their names or other searchable fields.
List searchProducts(
List products,
String query,
) {
if (query.trim().isEmpty) {
return products;
}
return products.where((product) {
return product.title
.toLowerCase()
.contains(query.toLowerCase());
}).toList();
}
Categories can be used to display products belonging to a specific category.
List filterByCategory(
List products,
String category,
) {
return products
.where((product) => product.category == category)
.toList();
} An e-commerce application can provide sorting options such as price low-to-high, price high-to-low, and alphabetical order.
products.sort(
(a, b) => a.price.compareTo(b.price),
);For descending price order:
products.sort(
(a, b) => b.price.compareTo(a.price),
);The login screen collects user credentials and sends them to an authentication service.
final emailController = TextEditingController();
final passwordController = TextEditingController();
TextField(
controller: emailController,
keyboardType: TextInputType.emailAddress,
decoration: const InputDecoration(
labelText: 'Email',
),
)
TextField(
controller: passwordController,
obscureText: true,
decoration: const InputDecoration(
labelText: 'Password',
),
)
Forms should validate user input before sending data to a server.
final formKey = GlobalKey();
Form(
key: formKey,
child: TextFormField(
validator: (value) {
if (value == null || value.trim().isEmpty) {
return 'Email is required';
}
if (!value.contains('@')) {
return 'Enter a valid email';
}
return null;
},
),
)
The checkout screen can display customer information, delivery address, selected products, subtotal, shipping charges, discount, and final total.
| Checkout Information | Example |
|---|---|
| Subtotal | $100.00 |
| Shipping | $10.00 |
| Discount | -$5.00 |
| Final Total | $105.00 |
double calculateTotal({
required double subtotal,
required double shipping,
required double discount,
}) {
return subtotal + shipping - discount;
}class Order {
final String id;
final List items;
final double total;
final String status;
final DateTime createdAt;
Order({
required this.id,
required this.items,
required this.total,
required this.status,
required this.createdAt,
});
}
After successful checkout, the application can display an order confirmation page.
Scaffold(
appBar: AppBar(
title: const Text('Order Confirmed'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(
Icons.check_circle,
size: 80,
),
const SizedBox(height: 20),
const Text(
'Order placed successfully!',
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 10),
Text('Order ID: $orderId'),
],
),
),
)A larger e-commerce application should separate UI code from networking and business logic.
UI
↓
ViewModel / Provider
↓
Service
↓
HTTP Client
↓
REST API
↓
DatabaseThis structure makes the code easier to test, maintain, and extend.
| Operation | HTTP Method | Purpose |
|---|---|---|
| Get Products | GET | Retrieve products. |
| Get Product | GET | Retrieve product details. |
| Create Account | POST | Register a customer. |
| Login | POST | Authenticate a customer. |
| Create Order | POST | Submit an order. |
| Update Profile | PUT/PATCH | Update customer information. |
| Delete Cart Item | DELETE | Remove cart data from a backend. |
Remote data may take time to load. A loading indicator gives the user feedback while the request is running.
if (isLoading) {
return const Center(
child: CircularProgressIndicator(),
);
}Network requests can fail because of an unavailable server, invalid response, authentication failure, timeout, or network connectivity problems.
try {
final products = await productService.fetchProducts();
} catch (error) {
print('Error: $error');
}A production application should show a user-friendly error message instead of exposing technical details.
Users can refresh product data by pulling the product list downward.
RefreshIndicator(
onRefresh: () async {
await loadProducts();
},
child: ListView(
children: const [
Text('Products'),
],
),
)Network images can fail to load. A fallback widget can provide a better user experience.
Image.network(
product.image,
fit: BoxFit.cover,
errorBuilder: (context, error, stackTrace) {
return const Icon(
Icons.image_not_supported,
size: 50,
);
},
)The number of product columns can change according to the available screen width.
LayoutBuilder(
builder: (context, constraints) {
int columns = 2;
if (constraints.maxWidth > 900) {
columns = 4;
} else if (constraints.maxWidth > 600) {
columns = 3;
}
return GridView.builder(
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: columns,
crossAxisSpacing: 12,
mainAxisSpacing: 12,
),
itemCount: products.length,
itemBuilder: (context, index) {
return ProductCard(
product: products[index],
);
},
);
},
)
A shopping application can use bottom navigation for frequently accessed sections.
BottomNavigationBar(
currentIndex: selectedIndex,
onTap: (index) {
setState(() {
selectedIndex = index;
});
},
items: const [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.favorite),
label: 'Wishlist',
),
BottomNavigationBarItem(
icon: Icon(Icons.shopping_cart),
label: 'Cart',
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Profile',
),
],
)Home
↓
Category / Search
↓
Product Listing
↓
Product Details
↓
Add to Cart
↓
Cart
↓
Checkout
↓
Order Confirmation
↓
Order HistoryFlutter's navigation system uses routes to move between screens. For simple applications, Navigator with routes such as MaterialPageRoute is sufficient. More advanced applications may use a routing package such as go_router.
If the application needs to remember selected information between sessions, local persistence can be used. Small preferences can be stored using packages such as shared_preferences. More complex offline cart or product data may require a database or dedicated persistence solution.
import 'package:shared_preferences/shared_preferences.dart';
Future saveCartCount(int count) async {
final prefs = await SharedPreferences.getInstance();
await prefs.setInt(
'cart_count',
count,
);
}
Future getCartCount() async {
final prefs = await SharedPreferences.getInstance();
return prefs.getInt('cart_count') ?? 0;
}
Firebase can be used as a backend option for features such as authentication, cloud database storage, file storage, analytics, and notifications.
A possible Firebase-based architecture is:
Flutter App
↓
Firebase Authentication
↓
Cloud Firestore
↓
Firebase StorageApplication Start
↓
Check Authentication
↓
Not Logged In → Login/Register
↓
Logged In
↓
Home Screen
↓
Products → Cart → Checkout → OrdersA real production e-commerce application may integrate a payment gateway. The Flutter application should normally communicate with a trusted backend for sensitive payment operations rather than exposing secret payment credentials in the client application.
Typical payment flow:
A good shopping application should provide a useful empty-state interface instead of displaying a blank screen.
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(
Icons.shopping_cart_outlined,
size: 80,
),
const SizedBox(height: 16),
const Text(
'Your cart is empty',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 12),
ElevatedButton(
onPressed: () {},
child: const Text('Start Shopping'),
),
],
)A professional product listing can combine a search field with filter and sorting controls.
Row(
children: [
Expanded(
child: TextField(
decoration: const InputDecoration(
hintText: 'Search products',
prefixIcon: Icon(Icons.search),
),
),
),
IconButton(
onPressed: () {},
icon: const Icon(Icons.filter_list),
),
],
)ListView.builder and GridView.builder for large lists.If a store contains thousands of products, loading every product at once may be inefficient. Pagination loads products in smaller groups.
Future> fetchProducts({
int page = 1,
int limit = 20,
}) async {
final uri = Uri.parse(
'https://example.com/api/products?page=$page&limit=$limit',
);
final response = await http.get(uri);
if (response.statusCode != 200) {
throw Exception('Unable to load products');
}
final data = jsonDecode(response.body) as List;
return data
.map((item) => Product.fromJson(item))
.toList();
}
Presentation Layer
├── Screens
├── Widgets
└── ViewModels
Domain / Business Logic
├── Cart Logic
├── Order Logic
└── Authentication Logic
Data Layer
├── API Services
├── Local Storage
└── Models
Backend
├── Authentication
├── Product Database
├── Order Database
└── Payment Services
Flutter documentation describes multiple approaches to state management and architecture. The appropriate choice depends on the size and requirements of the application.
Testing should cover individual business logic, widgets, and important user flows.
| Test Type | Example |
|---|---|
| Unit Test | Test cart total calculation. |
| Widget Test | Test whether an Add to Cart button appears. |
| Integration Test | Test product-to-checkout workflow. |
| API Test | Test product loading and error responses. |
| Problem | Possible Solution |
|---|---|
| Products are not loading | Check API URL, network access, response status, and JSON format. |
| Images are broken | Check image URL and provide an error placeholder. |
| Cart resets unexpectedly | Move cart state to an appropriate shared state-management layer or persistence mechanism. |
| App becomes slow | Optimize lists, images, rebuilding, and data processing. |
| Checkout total is incorrect | Keep price and quantity calculations in centralized business logic and validate important totals on the backend. |
| Login fails | Check credentials, authentication response, API status, and token handling. |
| API request fails on Android | Check Android internet permission and network configuration. |
E-COMMERCE APP
|
+--------------+--------------+
| | |
Home Categories Profile
|
Search / Filter
|
Product Listing
|
Product Details
|
+----+----+
| |
Wishlist Add to Cart
|
Cart
|
Checkout
|
Payment / Order
|
Order Confirmation
|
Order HistoryAfter completing this project, learners should understand how to combine Flutter UI development, Dart programming, models, API communication, state management, navigation, forms, local persistence, authentication concepts, cart management, and responsive design into a practical e-commerce application.
Future, async, and await used for network requests?ChangeNotifier?Building an E-Commerce App with Flutter is an excellent practical project for learning real-world application development. The project brings together product models, API integration, responsive layouts, navigation, authentication, state management, cart and wishlist functionality, checkout, order management, persistence, testing, and performance optimization.
A small learning project can begin with local product data and setState. As the application grows, shared state management, services, backend APIs, persistence, authentication, and a more structured architecture can be introduced.
JustAcademy Flutter Training Course
Register for Flutter Course Demo
