name: zepto_clone description: A Flutter clone of the Zepto quick commerce app. publish_to: 'none' # Remove this line if you wish to publish to pub.dev version: 1.0.0+1 environment: sdk: '>=3.0.0 <4.0.0' dependencies: flutter: sdk: flutter cupertino_icons: ^1.0.6 # Use the latest version flutter_svg: ^2.0.9 # For SVG icons if needed later dev_dependencies: flutter_test: sdk: flutter flutter_lints: ^3.0.1 # Use the latest version flutter: uses-material-design: true # To add assets to your application, add an assets section, like this: # assets: # - images/a_dot_burr.jpeg # - images/a_dot_ham.jpeg # An image asset can refer to one or more resolution-specific "variants", see # https://flutter.dev/assets-and-images/#resolution-aware # For details regarding adding assets from package dependencies, see # https://flutter.dev/assets-and-images/#from-packages # To add custom fonts to your application, add a fonts section here, # in this "flutter" section. Each entry in this list should have a # "family" key with the font family name, and a "fonts" key with a # list giving the asset and other descriptors for the font. For # example: # fonts: # - family: Schyler # fonts: # - asset: fonts/Schyler-Regular.ttf # - asset: fonts/Schyler-Italic.ttf # style: italic # - family: Trajan Pro # fonts: # - asset: fonts/TrajanPro.ttf # - asset: fonts/TrajanPro_Bold.ttf # weight: 700 # # For details regarding fonts from package dependencies, # see https://flutter.dev/custom-fonts/#from-packages import 'package:flutter/material.dart'; import 'package:zepto_clone/core/app_theme.dart'; import 'package:zepto_clone/screens/home/home_screen.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: 'Zepto Clone', theme: AppTheme.lightTheme, debugShowCheckedModeBanner: false, home: const HomeScreen(), ); } } import 'package:flutter/material.dart'; class AppTheme { static final ThemeData lightTheme = ThemeData( primaryColor: const Color(0xFF6A0DAD), // Zepto Purple colorScheme: ColorScheme.fromSeed( seedColor: const Color(0xFF6A0DAD), primary: const Color(0xFF6A0DAD), secondary: const Color(0xFF00BFA5), // Teal accent background: Colors.white, surface: Colors.white, onPrimary: Colors.white, onSecondary: Colors.black, onBackground: Colors.black, onSurface: Colors.black, error: Colors.redAccent, onError: Colors.white, ), scaffoldBackgroundColor: Colors.grey[100], appBarTheme: const AppBarTheme( backgroundColor: Color(0xFF6A0DAD), foregroundColor: Colors.white, elevation: 0, iconTheme: IconThemeData(color: Colors.white), titleTextStyle: TextStyle( color: Colors.white, fontSize: 18, fontWeight: FontWeight.w600, ), ), textTheme: const TextTheme( bodyLarge: TextStyle(color: Colors.black87), bodyMedium: TextStyle(color: Colors.black54), titleLarge: TextStyle(fontWeight: FontWeight.bold, color: Colors.black), titleMedium: TextStyle(fontWeight: FontWeight.w600, color: Colors.black87), ), inputDecorationTheme: InputDecorationTheme( filled: true, fillColor: Colors.grey[200], contentPadding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 12.0), border: OutlineInputBorder( borderRadius: BorderRadius.circular(8.0), borderSide: BorderSide.none, ), enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(8.0), borderSide: BorderSide.none, ), focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(8.0), borderSide: const BorderSide(color: Color(0xFF6A0DAD)), ), hintStyle: TextStyle(color: Colors.grey[500]), ), elevatedButtonTheme: ElevatedButtonThemeData( style: ElevatedButton.styleFrom( backgroundColor: const Color(0xFF6A0DAD), foregroundColor: Colors.white, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(8.0), ), padding: const EdgeInsets.symmetric(vertical: 12.0, horizontal: 16.0), ), ), cardTheme: CardTheme( elevation: 1, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(8.0), ), margin: const EdgeInsets.symmetric(vertical: 4.0, horizontal: 8.0), ), useMaterial3: true, ); } import 'package:flutter/material.dart'; class Category { final String id; final String name; final String imageUrl; // Can be local asset path or network URL final Color? backgroundColor; // Optional background color for the card Category({ required this.id, required this.name, required this.imageUrl, this.backgroundColor, }); } class Product { final String id; final String name; final String description; final double price; final String imageUrl; // Can be local asset path or network URL final String unit; // e.g., 'kg', 'litre', 'pack of 6', '500g' final double? oldPrice; // For showing discounts final String? discountTag; // e.g., '10% OFF' Product({ required this.id, required this.name, required this.description, required this.price, required this.imageUrl, required this.unit, this.oldPrice, this.discountTag, }); } import 'package:flutter/material.dart'; import 'package:zepto_clone/models/category.dart'; import 'package:zepto_clone/models/product.dart'; // Dummy Categories final List dummyCategories = [ Category(id: 'c1', name: 'Fruits & Vegetables', imageUrl: 'assets/images/cat_fruits_veg.png', backgroundColor: Colors.green[50]), Category(id: 'c2', name: 'Dairy & Bread', imageUrl: 'assets/images/cat_dairy_bread.png', backgroundColor: Colors.blue[50]), Category(id: 'c3', name: 'Snacks', imageUrl: 'assets/images/cat_snacks.png', backgroundColor: Colors.orange[50]), Category(id: 'c4', name: 'Beverages', imageUrl: 'assets/images/cat_beverages.png', backgroundColor: Colors.red[50]), Category(id: 'c5', name: 'Meat & Fish', imageUrl: 'assets/images/cat_meat.png', backgroundColor: Colors.brown[50]), Category(id: 'c6', name: 'Cleaning', imageUrl: 'assets/images/cat_cleaning.png', backgroundColor: Colors.purple[50]), Category(id: 'c7', name: 'Personal Care', imageUrl: 'assets/images/cat_personal_care.png', backgroundColor: Colors.pink[50]), Category(id: 'c8', name: 'Baby Care', imageUrl: 'assets/images/cat_baby_care.png', backgroundColor: Colors.teal[50]), ]; // Dummy Products (replace image URLs with actual ones or local assets) final List dummyProducts = [ Product( id: 'p1', name: 'Fresh Banana', description: 'Naturally ripened bananas', price: 40.0, imageUrl: 'assets/images/prod_banana.png', unit: '6 pcs', oldPrice: 50.0, discountTag: '20% OFF', ), Product( id: 'p2', name: 'Amul Gold Milk', description: 'Full Cream Milk', price: 30.0, imageUrl: 'assets/images/prod_milk.png', unit: '500 ml', ), Product( id: 'p3', name: 'Lay\'s Classic Chips', description: 'Salted Potato Chips', price: 20.0, imageUrl: 'assets/images/prod_lays.png', unit: '52 g', ), Product( id: 'p4', name: 'Coca-Cola Can', description: 'Carbonated Soft Drink', price: 35.0, imageUrl: 'assets/images/prod_coke.png', unit: '300 ml', ), Product( id: 'p5', name: 'Onion', description: 'Fresh Farm Onion', price: 25.0, imageUrl: 'assets/images/prod_onion.png', unit: '1 kg', ), Product( id: 'p6', name: 'Surf Excel Matic', description: 'Top Load Detergent Powder', price: 250.0, imageUrl: 'assets/images/prod_surf.png', unit: '1 kg', oldPrice: 270.0, discountTag: '7% OFF', ), ]; // Placeholder image paths - Create these assets in your project // assets/images/cat_fruits_veg.png // assets/images/cat_dairy_bread.png // assets/images/cat_snacks.png // assets/images/cat_beverages.png // assets/images/cat_meat.png // assets/images/cat_cleaning.png // assets/images/cat_personal_care.png // assets/images/cat_baby_care.png // assets/images/prod_banana.png // assets/images/prod_milk.png // assets/images/prod_lays.png // assets/images/prod_coke.png // assets/images/prod_onion.png // assets/images/prod_surf.png // IMPORTANT: You need to create an 'assets/images' folder in your project root // and add placeholder images with these exact names for the app to run without errors. // You can use any images initially. import 'package:flutter/material.dart'; import 'package:zepto_clone/models/category.dart'; class CategoryCard extends StatelessWidget { final Category category; const CategoryCard({super.key, required this.category}); @override Widget build(BuildContext context) { // Use a placeholder if the image path is invalid or file doesn't exist Widget imageWidget = Image.asset( category.imageUrl, height: 60, width: 60, fit: BoxFit.contain, errorBuilder: (context, error, stackTrace) { // Show a placeholder icon or color if image fails to load return Container( height: 60, width: 60, color: Colors.grey[200], child: Icon(Icons.category, color: Colors.grey[400]), ); }, ); return Card( color: category.backgroundColor ?? Colors.white, elevation: 0, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(8.0), side: BorderSide(color: Colors.grey[200]!, width: 1), ), child: InkWell( onTap: () { // TODO: Navigate to category specific screen print('Tapped on ${category.name}'); }, borderRadius: BorderRadius.circular(8.0), child: Padding( padding: const EdgeInsets.all(12.0), child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ imageWidget, const SizedBox(height: 8), Text( category.name, textAlign: TextAlign.center, style: Theme.of(context).textTheme.bodySmall?.copyWith( fontWeight: FontWeight.w500, fontSize: 11, ), maxLines: 2, overflow: TextOverflow.ellipsis, ), ], ), ), ), ); } } import 'package:flutter/material.dart'; import 'package:zepto_clone/models/product.dart'; class ProductCard extends StatelessWidget { final Product product; const ProductCard({super.key, required this.product}); @override Widget build(BuildContext context) { final theme = Theme.of(context); final colorScheme = theme.colorScheme; // Use a placeholder if the image path is invalid or file doesn't exist Widget imageWidget = Image.asset( product.imageUrl, height: 100, width: double.infinity, fit: BoxFit.contain, // Use contain to avoid distortion errorBuilder: (context, error, stackTrace) { return Container( height: 100, color: Colors.grey[200], child: Icon(Icons.shopping_bag_outlined, color: Colors.grey[400], size: 40), ); }, ); return Card( elevation: 1, shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)), child: InkWell( onTap: () { // TODO: Navigate to product detail screen print('Tapped on ${product.name}'); }, borderRadius: BorderRadius.circular(8), child: Padding( padding: const EdgeInsets.all(8.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ // Optional Discount Tag if (product.discountTag != null) Container( padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2), decoration: BoxDecoration( color: colorScheme.secondary, borderRadius: BorderRadius.circular(4), ), child: Text( product.discountTag!, style: theme.textTheme.labelSmall?.copyWith( color: colorScheme.onSecondary, fontWeight: FontWeight.bold, ), ), ), if (product.discountTag != null) const SizedBox(height: 4), // Product Image Center(child: imageWidget), const SizedBox(height: 8), // Product Name Text( product.name, style: theme.textTheme.titleSmall?.copyWith(fontWeight: FontWeight.w600), maxLines: 1, overflow: TextOverflow.ellipsis, ), const SizedBox(height: 4), // Product Unit/Quantity Text( product.unit, style: theme.textTheme.bodySmall?.copyWith(color: Colors.grey[600]), maxLines: 1, overflow: TextOverflow.ellipsis, ), const Spacer(), // Pushes price and button to the bottom // Price and Add Button Row Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.center, children: [ // Price Column Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( '₹${product.price.toStringAsFixed(0)}', // Show price without decimals for simplicity style: theme.textTheme.titleMedium?.copyWith(fontWeight: FontWeight.bold), ), if (product.oldPrice != null) Text( '₹${product.oldPrice!.toStringAsFixed(0)}', style: theme.textTheme.bodySmall?.copyWith( decoration: TextDecoration.lineThrough, color: Colors.grey[500], ), ), ], ), // Add Button ElevatedButton( onPressed: () { // TODO: Add product to cart print('Added ${product.name} to cart'); }, style: ElevatedButton.styleFrom( padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8), minimumSize: const Size(60, 36), // Adjust size textStyle: const TextStyle(fontWeight: FontWeight.bold), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(6), side: BorderSide(color: colorScheme.primary.withOpacity(0.5)) ), backgroundColor: Colors.white, foregroundColor: colorScheme.primary, elevation: 1, ), child: const Text('ADD'), ), ], ), ], ), ), ), ); } } import 'package:flutter/material.dart'; import 'package:zepto_clone/data/dummy_data.dart'; import 'package:zepto_clone/widgets/category_card.dart'; import 'package:zepto_clone/widgets/product_card.dart'; class HomeScreen extends StatelessWidget { const HomeScreen({super.key}); @override Widget build(BuildContext context) { final theme = Theme.of(context); return Scaffold( appBar: AppBar( leading: IconButton( icon: const Icon(Icons.location_on_outlined), onPressed: () { // TODO: Implement location selection }, ), title: const Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text('Delivering to', style: TextStyle(fontSize: 12, fontWeight: FontWeight.w300)), Text('Your Location', style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600)), // TODO: Replace with actual location ], ), actions: [ IconButton( icon: const Icon(Icons.search), onPressed: () { // TODO: Implement search functionality }, ), IconButton( icon: const Icon(Icons.person_outline), onPressed: () { // TODO: Navigate to profile/account screen }, ), ], ), body: ListView( padding: const EdgeInsets.only(bottom: 16.0), // Add padding at the bottom children: [ // Search Bar (Optional - can be in AppBar or here) // Padding( // padding: const EdgeInsets.all(16.0), // child: TextField( // decoration: InputDecoration( // hintText: 'Search for groceries...', // prefixIcon: Icon(Icons.search, color: Colors.grey[600]), // ), // ), // ), // Banner Section (Placeholder) Container( height: 150, margin: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0), decoration: BoxDecoration( color: Colors.grey[300], // Placeholder color borderRadius: BorderRadius.circular(12.0), image: const DecorationImage( // Replace with your banner image asset or network image image: AssetImage('assets/images/banner_placeholder.png'), fit: BoxFit.cover, onError: null, // Handle error loading image if needed ) ), child: Center(child: Text('Offer Banner Placeholder', style: theme.textTheme.titleMedium?.copyWith(color: Colors.white70))), // Placeholder text // TODO: Replace with actual banner implementation (e.g., PageView) ), // Categories Section Title Padding( padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0), child: Text( 'Shop by Category', style: theme.textTheme.titleLarge, ), ), // Categories Grid Padding( padding: const EdgeInsets.symmetric(horizontal: 12.0), // Adjust horizontal padding child: GridView.builder( shrinkWrap: true, // Important for GridView inside ListView physics: const NeverScrollableScrollPhysics(), // Disable GridView's scrolling gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 4, // Number of columns crossAxisSpacing: 8.0, // Spacing between columns mainAxisSpacing: 8.0, // Spacing between rows childAspectRatio: 0.8, // Adjust aspect ratio (width / height) ), itemCount: dummyCategories.length, itemBuilder: (context, index) { return CategoryCard(category: dummyCategories[index]); }, ), ), const SizedBox(height: 16), // Popular Products Section Title Padding( padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0), child: Text( 'Popular Picks', style: theme.textTheme.titleLarge, ), ), // Popular Products Grid Padding( padding: const EdgeInsets.symmetric(horizontal: 12.0), child: GridView.builder( shrinkWrap: true, physics: const NeverScrollableScrollPhysics(), gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 2, // Two products per row crossAxisSpacing: 12.0, mainAxisSpacing: 12.0, childAspectRatio: 0.65, // Adjust aspect ratio for product cards ), itemCount: dummyProducts.length, itemBuilder: (context, index) { return ProductCard(product: dummyProducts[index]); }, ), ), ], ), ); } } # Create this empty file to ensure the directory is created. # Add your actual image assets to this folder: # assets/images/cat_fruits_veg.png # assets/images/cat_dairy_bread.png # assets/images/cat_snacks.png # assets/images/cat_beverages.png # assets/images/cat_meat.png # assets/images/cat_cleaning.png # assets/images/cat_personal_care.png # assets/images/cat_baby_care.png # assets/images/prod_banana.png # assets/images/prod_milk.png # assets/images/prod_lays.png # assets/images/prod_coke.png # assets/images/prod_onion.png # assets/images/prod_surf.png # assets/images/banner_placeholder.png