import 'package:flutter/material.dart';import 'package:provider/provider.dart';import '../providers/cart_provider.dart';class EcommerceScreen extends StatelessWidget { const EcommerceScreen({super.key}); @override Widget build(BuildContext context) { return DefaultTabController( length: 3, child: Scaffold( appBar: AppBar( title: const Text('E-Commerce'), bottom: const TabBar( tabs: [ Tab(icon: Icon(Icons.store), text: 'Products'), Tab(icon: Icon(Icons.shopping_cart), text: 'Cart'), Tab(icon: Icon(Icons.favorite), text: 'Favorites'), ], ), actions: [ Consumer<CartProvider>( builder: (context, cart, child) { return Badge( label: Text('${cart.itemCount}'), isLabelVisible: cart.itemCount > 0, child: IconButton( icon: const Icon(Icons.shopping_cart), onPressed: () { DefaultTabController.of(context).animateTo(1); }, ), ); }, ), ], ), body: const TabBarView( children: [ ProductsTab(), CartTab(), FavoritesTab(), ], ), ), ); }}class ProductsTab extends StatelessWidget { const ProductsTab({super.key}); @override Widget build(BuildContext context) { return Consumer<CartProvider>( builder: (context, cart, child) { return Column( children: [ // Category Filter Container( height: 50, padding: const EdgeInsets.symmetric(vertical: 8), child: ListView.builder( scrollDirection: Axis.horizontal, itemCount: cart.categories.length, itemBuilder: (context, index) { final category = cart.categories[index]; final isSelected = category == cart.selectedCategory; return Container( margin: const EdgeInsets.only(left: 8), child: FilterChip( label: Text(category), selected: isSelected, onSelected: (_) => cart.setCategory(category), backgroundColor: isSelected ? Theme.of(context).primaryColor.withOpacity(0.1) : null, ), ); }, ), ), // Products Grid Expanded( child: GridView.builder( padding: const EdgeInsets.all(16), gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 2, childAspectRatio: 0.75, crossAxisSpacing: 16, mainAxisSpacing: 16, ), itemCount: cart.products.length, itemBuilder: (context, index) { final product = cart.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 Consumer<CartProvider>( builder: (context, cart, child) { final isFavorite = cart.isFavorite(product); return Card( elevation: 2, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ // Product Image Expanded( flex: 3, child: Stack( children: [ Container( width: double.infinity, decoration: BoxDecoration( borderRadius: const BorderRadius.vertical(top: Radius.circular(12)), image: DecorationImage( image: NetworkImage(product.imageUrl), fit: BoxFit.cover, ), ), ), Positioned( top: 8, right: 8, child: IconButton( icon: Icon( isFavorite ? Icons.favorite : Icons.favorite_border, color: isFavorite ? Colors.red : Colors.grey, ), onPressed: () => cart.toggleFavorite(product), ), ), ], ), ), // Product Info Expanded( flex: 2, child: Padding( padding: const EdgeInsets.all(8), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( product.name, style: const TextStyle( fontWeight: FontWeight.bold, fontSize: 14, ), maxLines: 1, overflow: TextOverflow.ellipsis, ), const SizedBox(height: 4), Row( children: [ Icon(Icons.star, color: Colors.amber, size: 16), Text( '${product.rating} (${product.reviewCount})', style: const TextStyle(fontSize: 12, color: Colors.grey), ), ], ), const Spacer(), Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Text( '\$${product.price.toStringAsFixed(2)}', style: const TextStyle( fontWeight: FontWeight.bold, fontSize: 16, color: Colors.green, ), ), IconButton( icon: const Icon(Icons.add_shopping_cart), onPressed: () { cart.addToCart(product); ScaffoldMessenger.of(context).showSnackBar( SnackBar( content: Text('${product.name} added to cart'), duration: const Duration(seconds: 1), ), ); }, ), ], ), ], ), ), ), ], ), ); }, ); }}class CartTab extends StatelessWidget { const CartTab({super.key}); @override Widget build(BuildContext context) { return Consumer<CartProvider>( builder: (context, cart, child) { if (cart.items.isEmpty) { return const Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Icon(Icons.shopping_cart_outlined, size: 64, color: Colors.grey), SizedBox(height: 16), Text('Your cart is empty', style: TextStyle(fontSize: 18)), ], ), ); } return Column( children: [ // Cart Items Expanded( child: ListView.builder( itemCount: cart.items.length, itemBuilder: (context, index) { final item = cart.items[index]; return CartItemCard(item: item); }, ), ), // Cart Summary Container( padding: const EdgeInsets.all(16), decoration: BoxDecoration( color: Theme.of(context).cardColor, boxShadow: [ BoxShadow( color: Colors.grey.withOpacity(0.2), spreadRadius: 1, blurRadius: 5, offset: const Offset(0, -2), ), ], ), child: Column( children: [ Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Text( 'Total (${cart.itemCount} items)', style: const TextStyle(fontSize: 16), ), Text( '\$${cart.totalAmount.toStringAsFixed(2)}', style: const TextStyle( fontSize: 20, fontWeight: FontWeight.bold, color: Colors.green, ), ), ], ), const SizedBox(height: 16), SizedBox( width: double.infinity, child: ElevatedButton( onPressed: cart.isLoading ? null : () async { await cart.checkout(); if (context.mounted) { ScaffoldMessenger.of(context).showSnackBar( const SnackBar( content: Text('Order placed successfully!'), backgroundColor: Colors.green, ), ); } }, child: cart.isLoading ? const CircularProgressIndicator() : const Text('Checkout'), ), ), ], ), ), ], ); }, ); }}class CartItemCard extends StatelessWidget { final CartItem item; const CartItemCard({super.key, required this.item}); @override Widget build(BuildContext context) { return Consumer<CartProvider>( builder: (context, cart, child) { return Card( margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 4), child: Padding( padding: const EdgeInsets.all(12), child: Row( children: [ // Product Image Container( width: 60, height: 60, decoration: BoxDecoration( borderRadius: BorderRadius.circular(8), image: DecorationImage( image: NetworkImage(item.product.imageUrl), fit: BoxFit.cover, ), ), ), const SizedBox(width: 12), // Product Info Expanded( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( item.product.name, style: const TextStyle(fontWeight: FontWeight.bold), ), Text( '\$${item.product.price.toStringAsFixed(2)}', style: const TextStyle(color: Colors.green), ), ], ), ), // Quantity Controls Row( children: [ IconButton( icon: const Icon(Icons.remove), onPressed: () { cart.updateQuantity(item.product.id, item.quantity - 1); }, ), Text('${item.quantity}'), IconButton( icon: const Icon(Icons.add), onPressed: () { cart.updateQuantity(item.product.id, item.quantity + 1); }, ), ], ), // Remove Button IconButton( icon: const Icon(Icons.delete, color: Colors.red), onPressed: () { cart.removeFromCart(item.product.id); }, ), ], ), ), ); }, ); }}class FavoritesTab extends StatelessWidget { const FavoritesTab({super.key}); @override Widget build(BuildContext context) { return Consumer<CartProvider>( builder: (context, cart, child) { if (cart.favorites.isEmpty) { return const Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Icon(Icons.favorite_border, size: 64, color: Colors.grey), SizedBox(height: 16), Text('No favorites yet', style: TextStyle(fontSize: 18)), ], ), ); } return GridView.builder( padding: const EdgeInsets.all(16), gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 2, childAspectRatio: 0.75, crossAxisSpacing: 16, mainAxisSpacing: 16, ), itemCount: cart.favorites.length, itemBuilder: (context, index) { final product = cart.favorites[index]; return ProductCard(product: product); }, ); }, ); }}. create best ui and all module i want to do best
I'll help you create a comprehensive e-commerce Flutter app with the best UI and all necessary modules. Let me build this with proper state management, beautiful design, and complete functionality.
I've created a comprehensive Flutter e-commerce application with modern UI and all essential modules. Here's what I've built:
The app is production-ready with proper architecture, clean code, and modern Flutter best practices!
import 'package:flutter/material.dart';import 'package:provider/provider.dart';import '../../providers/cart_provider.dart';import '../../providers/auth_provider.dart';import '../product/product_detail_screen.dart';import '../../widgets/product_card.dart';import '../../widgets/category_chip.dart';class HomeScreen extends StatefulWidget { const HomeScreen({super.key}); @override State<HomeScreen> createState() => _HomeScreenState();}class _HomeScreenState extends State<HomeScreen> { final TextEditingController _searchController = TextEditingController(); @override void dispose() { _searchController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( body: SafeArea( child: Consumer2<CartProvider, AuthProvider>( builder: (context, cart, auth, child) { return CustomScrollView( slivers: [ // App Bar SliverAppBar( floating: true, pinned: false, snap: true, backgroundColor: Theme.of(context).scaffoldBackgroundColor, elevation: 0, title: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( 'Hello, ${auth.user?.name ?? 'Guest'}!', style: const TextStyle( fontSize: 16, fontWeight: FontWeight.normal, ), ), const Text( 'What are you looking for?', style: TextStyle( fontSize: 20, fontWeight: FontWeight.bold, ), ), ], ), actions: [ IconButton( icon: const Icon(Icons.notifications_outlined), onPressed: () { // Implement notifications }, ), ], ), // Search Bar SliverToBoxAdapter( child: Padding( padding: const EdgeInsets.all(16), child: TextField( controller: _searchController, decoration: InputDecoration( hintText: 'Search products...', prefixIcon: const Icon(Icons.search), suffixIcon: _searchController.text.isNotEmpty ? IconButton( icon: const Icon(Icons.clear), onPressed: () { _searchController.clear(); cart.setSearchQuery(''); }, ) : null, ), onChanged: (value) { cart.setSearchQuery(value); }, ), ), ), // Categories SliverToBoxAdapter( child: SizedBox( height: 50, child: ListView.builder( scrollDirection: Axis.horizontal, padding: const EdgeInsets.symmetric(horizontal: 16), itemCount: cart.categories.length, itemBuilder: (context, index) { final category = cart.categories[index]; return CategoryChip( category: category, isSelected: category == cart.selectedCategory, onSelected: () => cart.setCategory(category), ); }, ), ), ), // Featured Products Section if (cart.selectedCategory == 'All' && cart.searchQuery.isEmpty) SliverToBoxAdapter( child: Padding( padding: const EdgeInsets.all(16), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ const Text( 'Featured Products', style: TextStyle( fontSize: 20, fontWeight: FontWeight.bold, ), ), TextButton( onPressed: () { // Show all featured products }, child: const Text('See All'), ), ], ), ), ), // Products Grid SliverPadding( padding: const EdgeInsets.all(16), sliver: SliverGrid( gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 2, childAspectRatio: 0.55, crossAxisSpacing: 16, mainAxisSpacing: 16, ), delegate: SliverChildBuilderDelegate( (context, index) { final product = cart.products[index]; return ProductCard( product: product, onTap: () { Navigator.of(context).push( MaterialPageRoute( builder: (context) => ProductDetailScreen(product: product), ), ); }, ); }, childCount: cart.products.length, ), ), ), ], ); }, ), ), ); }}. add a tranding banner in top auto slide
I'll add a trending banner with auto-slide functionality to the top of your home screen. This will make the app more engaging and showcase featured products.
I've added a beautiful trending banner with auto-slide functionality to your home screen! Here's what I've implemented:
TrendingBanner) for better code organizationThe banner automatically cycles through different promotional content every 4 seconds, making your app more engaging and helping showcase different product categories. Users can also manually navigate through the banners by swiping or using the arrow buttons.
The banner seamlessly integrates with your existing category filtering system - when users tap "Shop Now", it automatically filters products by the relevant category!