Flutter - Firebase - SQLite : Multi-store App (Full - Deep)

Build empty screens for a flutter firebase sqlite multi-store app, including welcome and authentication, a five-tab customer home, categories, store, cart, profile, and search.

Migrate to Flutter 3 by updating navigation and context handling, using Future.delayed to obtain a fresh context before navigation, and updating pub dependencies for the collection and intel packages.

Download the starting project folder to access labeled main and subcategories images and lists. Configure pubspec.yaml assets for images directory, then start the category screen and support supplier product uploads.

Implement a bottom navigation bar across customer and supplier screens while exploring stateless versus stateful widgets, the main function, and a counter example that updates UI on button presses.

Learn to build a bottom navigation bar in Flutter by wiring a five-item bar (home, category, stores, cart, profile) with current index, onTap, and setState to switch body tabs.

design a home screen with a scaffold, app bar, and search bar, featuring nine scrollable tabs that control the body via tab bar view, using a default tab controller.

Design a tappable fake search bar in Flutter that navigates to a dedicated search screen, featuring a yellow bordered container with an icon and placeholder text.

Develop the category screen using a scaffold, app bar with a search bar, and a responsive stack layout with a side navigator and category view that adapts to screen size.

Create a flutter side navigator using ListView.builder to display category items, manage selection with an items data class and isSelected, and update visuals via GestureDetector and setState.

Create a synchronized category view in Flutter using a vertical PageView and page controller; activate items by index and animate pages, initializing the default category in initState.

Create a category screen featuring a 3-column grid of subcategories with images and labels, using indexed assets and a reusable men category widget in a dedicated categories folder.

Navigate from a subcategory list to a subcategory products screen in a Flutter app by wrapping taps with a gesture detector and using MaterialPageRoute to pass main and subcategory data.

Add a slider bar to scroll through categories and subcategories in Flutter, using a stack, positioned widgets, and a rotated box for arrows.

Refactor your Flutter app by extracting header label and subcategory model into reusable widgets and models, centralizing styling and on-tap navigation across a single category-driven screen.

Build and wire multiple category screens by duplicating and renaming widgets like women and shoes category, refine slider navigation, and refactor text style into a shared constant.

Install and configure a custom font (ACME) from fonts.google.com, update pubspec.yaml, apply it to the app bar title, and extract reusable app bar widgets.

Build the stores screen as a stateless widget in stores.dart, customize the appbar with zero elevation and a white background, and prepare the scaffold body to stream stores.

Create a cart screen with an empty state, app bar, delete action, a continue shopping button, and a sheet showing the total; navigate to customer home screen via push replacement.

Create a responsive Flutter profile screen with a scaffold and custom scroll view, featuring a sliver appbar, gradient header, animated title, and three action buttons.

Build a Flutter profile screen by adding an asset logo, an account header, and three info cards for email, phone, and address, with dividers, styling, and reusable list tiles.

Build a pinned sliver app bar with a gradient background, a circular avatar loaded from assets, and a header row with text and animated opacity.

Create the supplier home screen by cloning the customer home, renaming widgets, updating tabs to dashboard and upload, and set supplier home as the landing page in main.dart.

Build a Flutter dashboard screen with a scaffold, app bar, and a two-column grid of six cards generated from labels and icons like my store, orders, and edit profile.

Build a Flutter welcome screen with a full-screen background image, supplier and customer authentication, and animations, using scaffold, safe area, and a reusable yellow button.

Continue building the Flutter welcome screen by adding a social login section (Google, Facebook, guest) and extract reusable login button widgets with box decoration, padding, and index-based alignment.

Learn to implement welcome screen animations in a flutter multi-store app using animation controller, animated builder, rotation, opacity tween, and colorized animated text kit.

Learn Flutter navigation with push, push replacement, and push named to move between welcome, supplier home, and customer home screens, and implement login and logout flows with routes and initialRoute.

Create a supplier dashboard with six screens—my store, supplier orders, edit business, manage products, supplier balance, and statics—and navigate via inkwell taps and a single material page route.

Tap dashboard items to navigate to pages, such as my store and orders, using either a pages list of widgets or a list of functions with push, replacement, and pop.

Add customer screens by creating orders and wishlist pages and wiring navigation with navigator push and material page route. Fix cart overflow with safe area and a conditional back button.

Navigate the cart screen with a conditional back button by passing an optional back widget, showing it from profile, and using canPop to decide between pop or push replacement named.

Register and log in users via an authentication form with full name, email, and password, validate emails, and upload profile images to Firebase storage and Firestore.

Create a Flutter sign-up screen with header, avatar and image pickers, and text fields for full name, email, and password, including navigation to the welcome screen.

Refactor code to simplify the UI by extracting reusable widgets such as the auth header label and text form decoration for sign up and login screens.

Add a suffix icon button to the password text form field to toggle password visibility. Bind a password visible boolean to the obscure text property to control typing visibility.

Apply text form field validation in flutter using a validator callback to detect empties, show error messages for name, email, and password, and validate with a form key before signup.

Implement email validation using a regular expression and a string extension called email validator. Handle empty and invalid emails with clear messages while building and testing the regex pattern.

Save user input into late string variables in a Flutter signup flow, using text editing controllers or onChanged/onSaved with text form fields, validation, and setState to store data.

Implement a reusable snack bar in Flutter using scaffold messenger to show messages. Customize content with text style, background color, duration, and alignment using a my_message_handler class with a scaffoldKey.

Add the image picker package to a Flutter Firebase SQLite multi-store app to enable selecting images from gallery or camera, with pubspec.yaml updates and iOS permission setup.

Log into Firebase.google.com, open the console, create a new Firebase project named Multi Store, enable Google Analytics, select the default account, and continue to set up Firebase for Android.

Set up firebase for android by linking the android package name and sha1, register the app, and download google-services.json into the android app folder, then configure gradle dependencies and plugins.

Set up firebase on iOS by adding an iOS app, copying the bundle identifier from Xcode, adding GoogleService-Info.plist to runner, and setting the Podfile platform to iOS 12 before rebuilding.

Enable anonymous login in a Flutter app with Firebase by installing Firebase Auth, Cloud Firestore, Storage, and Core, initializing Firebase, signing in anonymously, and navigating to the customer home screen.

Learn to implement a logout with firebase auth signOut, present a Cupertino alert dialog for confirmation, and navigate back to the welcome screen, with a reusable alert dialog class.

Explain sign up by validating form fields, requiring an image, creating a Firebase auth user with email and password, handling errors, and navigating to the customer home screen on success.

Upload customer info to Firebase Cloud Firestore and storage. Create a document in the customers collection with name, email, profile image URL, and CID.

Refresh the page, open Google Cloud Console, switch to native mode, then return to the Firebase console to enable Cloud Firestore for the project.

Master the sign-up flow in a flutter app with firebase, showing a circular progress indicator during processing, validating fields, handling errors, and navigating to login after sign-up.

Adapt the customer sign-up code to a login screen, wire it to a named route, and sign in with email and password to reach the customer home.

Preview the current customer data on the profile screen with Flutter and Cloud Firestore, using a FutureBuilder for a single document snapshot and showing name, email, and profile image.

Implement supplier authentication by duplicating the customer flow, updating Firebase to a suppliers collection with store name and logo, and wiring supplier sign up and login routes in main.dart.

Solve the anonymous sign-in profile issue by creating a user document for the guest uid, showing a guest image in the avatar, and using future builder to reference the document.

Sign in anonymously with Firebase auth, create a corresponding empty document in the customers collection using the user's UID, and navigate to the home screen while later updating profile data.

Enable suppliers to upload new products with images, choose main and subcategories, enter price, quantity, name, description, and optional discount; validate inputs, reset forms, and showcase products in stores.

Design and implement a Flutter upload product form for a supplier, with image previews, category dropdowns, and fields for price, quantity, name, and description, ready to upload to Firebase.

Explore text form validation for product submissions, using validators for price, quantity, name, and description. Implement a form key and scaffold messenger to validate input and upload to Firebase.

learn how to capture supplier data into price, quantity, product name, and description variables in a Flutter form, using onChanged and onSaved with parsing and validation to safely upload products.

Learn how to implement a multi-image picker for supplier products in a Flutter app using image picker, manage a list of XFile, preview images, and validate before upload.

Learn to implement a professional image editing flow by conditionally showing a clear image button, allowing suppliers to pick or reset images, and manage the image list with state updates.

Build interconnected drop down buttons in flutter to select a main category and its subcategory. Use state, dropdown menu items, and a category list to drive dynamic subcategories.

Create dynamic subcategory lists that auto-update based on the main category in a Flutter app, using set state, drop down buttons, and category-specific lists for men, women, shoes, and bags.

Implement a category dropdown in the upload form using a category list file, with a default select category, onChanged updating subcategories, and printing selections, while adjusting indices for image alignment.

Build and validate a Flutter drop-down form for main category and subcategory, use snack bars for missing input, style dropdowns, manage state, and prepare data upload to Firebase.

Upload multiple product images to Firebase Storage, creating storage references, awaiting upload, obtaining download URLs, and preparing an image URL list to accompany product data in Firestore.

Learn how to upload product information to a Firestore collection, including category and subcategory, price, stock, name, description, supplier id, and image URLs, and ensure images are uploaded before saving.

Upload multiple images with an async dedicated method, collect download URLs in an image URL list, and then save the product data to Cloud Firestore.

Learn how to name product documents manually using the customer's UID and UUID v4, so each document ID matches the product ID for easy later edits.

Display a loading spinner during product upload by toggling a processing boolean and replacing the upload button with a circular progress indicator until validation and image upload to Firebase complete.

Stream Firebase data to the app, surfacing products by main categories on the home and category screens. Navigate to detailed product views with images, descriptions, reviews (future), and store links.

Create four supplier stores, upload multiple products with images, prices, quantities, and categories, clean Firebase collections and authentication, and prepare data for streaming to the app’s home and category views.

Stream products in real time from the products collection with a stream builder for live updates. Filter by gallery categories and display image, name, and price in a responsive list.

Stream product data into a Flutter product model with a staggered grid view, displaying images, names, and prices, and filter by main category.

Create men, women, shoes, and kids gallery screens, stream products by main and subcategories with Firestore, and integrate with home.dart using the staggered grid view.

Tap a product to open the product details screen with an image swiper, item description, recommended and similar items, and a bottom sheet to add to cart.

Pass product data from the model to the details screen, displaying name, description, price, stock, and images, while filtering similar items by main category and subcategory.

Tap product images to open a full screen view with a page view, zoomable images via an interactive viewer, and a white app bar with a back button.

Learn to build a full-screen image viewer in flutter by refactoring into a dedicated image view, using a page view with a controller and gesture taps for image previews.

Stream stores in a two-column grid view using Firestore, configure StreamBuilder to fetch supplier documents, and render each store with asset images, logos, and names.

Learn to build a Flutter visit store flow with gesture detection, navigation to a visit store screen, and Firestore integration to stream supplier stores and their products.

Toggle a follow/unfollow button in a Flutter app by flipping a boolean state, switching the label between follow and unfollow and rendering a material button on press.

Show how to navigate from a product detail to the supplier's store in a Flutter multi-store app, tapping the store icon and passing the supplier ID via MaterialPageRoute.

Implements edit feature in Flutter, where owners see edit stores and products, while others see follow or unfollow or add to favorites, by comparing supplier ID with Firebase Auth UID.

Add a green floating action button in the visit store screen to contact the supplier via WhatsApp using font awesome icons; install and import the package and set onPressed.

Learn to implement a multi-store Flutter app with Firebase by managing authenticated and anonymous customer collections, and troubleshoot streaming data when current user document may be missing.

Create a conditional data stream by duplicating the collection reference for anonymous users and switching to the anonymous collection when the current user is anonymous, otherwise streaming from customers.

Add items to favorites, view the wishlist, and move selections to the cart. Manage quantities, prevent duplicates, respect stock limits, and clear cart or wishlist with empty-state messages.

Create a product class with name, price, stock, and images; build a change notifier cart model to add items and connect to the cart screen using provider and consumer.

implement the provider package and a consumer to listen to cart state with a change notifier, then set up multi provider and build a dynamic cart view.

Create a cart model item in Flutter, displaying image, product name, and price with plus/minus quantity controls, using a flexible layout and two-line ellipsized text, with padding and card styling.

Increment item quantity using Flutter, Provider, and ChangeNotifier by adding increase and decrease methods in the product class, updating the cart UI, and ensuring quantity stays within available stock.

Enforce a quantity limit in the cart by a minimum of one and a maximum equal to stock, disable the plus button at the limit, and prevent duplicates.

Check for existing items in the cart before adding, by comparing product IDs (document IDs), and show a snack bar when duplicates are found.

Add remove item and clear cart methods in the cart provider, notify listeners, wire actions to the UI with context and a confirmation dialog when clearing the cart.

Compute the total price by summing each item’s price times its quantity, expose it via a provider, and update the bottom sheet text in real time as it changes.

Learn to implement a wishlist in a Flutter app using provider, mirroring the cart flow with a product class, wish provider, get wish items, add, remove, and clear actions.

Add or remove items to the wishlist by tapping a heart icon, toggling between outline and filled states, and updating in real time through a provider and item document IDs.

Explains moving items between wish list and cart using an icon button in the product model, with provider state management, duplicate checks, and a confirmation prompt for deletion.

Implement a Flutter modal sheet to move items from cart to wishlist or delete them, with async coordination to update both stores and proper navigation.

Refactor code to tidy a Flutter multi-store app by extracting wishlist and cart widgets into models and wiring add to cart and add to wishlist via provider and context.

Learn to add a live badge to the cart icon with the badges package, updating the count from the cart and styling the badge in a Flutter multi-store app.

Master checkout flow in a multi-store app: confirm and pay, adjust price with shipping, and select cash on delivery or card payment, with order data saved to Firebase.

Add items to cart and wishlist, proceed to checkout, and stream customer and order data through a Flutter Firebase SQLite multi-store app to the place order and payment screens.

Build an order screen that streams customer data from a future builder, displays cart items with images and prices, and uses a consumer for live updates and a loading state.

Tap confirm to open payment screen, stream customer data for order, and select a payment method (cash on delivery, Visa, MasterCard, PayPal) with total price plus $10 shipping.

Implement a Flutter payment screen using a radial list to select payment methods, manage selected value with state, and update the UI with Visa, MasterCard, and cash on delivery icons.

Implement an order confirmation flow in a Flutter app, handling cash on delivery, Visa or MasterCard, and PayPal, with a modal bottom sheet showing the total and uploading the order.

Upload cart items to firebase by creating an orders collection with a unique order id and saving customer, supplier, product, quantity, price, delivery, and payment status data.

update product stock through firestore transactions by editing each product document in stock field, using document references and snapshots, then clear cart and navigate to the customer home after checkout.

Implement a loading indicator using the progress dialog package, configure maximum value and red color, and guard button actions with a processing flag while syncing orders and enabling future reviews.

Enforce stock limits in the product detail and cart flows by checking in stock quantities, displaying out of stock messages, and preventing adding unavailable items.

Stream customer orders in a Flutter app using Firestore with a stream builder, filtering by the current user, and display expandable order cards showing name, image, price, and quantity.

Explore building an expansion tile for a customer order model in a Flutter app, detailing customer info, order fields, delivery and payment statuses, and a review workflow.

Navigate the orders dashboard to fetch orders by delivery status, move them to shipping with estimated delivery date, and view customer and product details while streaming store data and balance.

Enable suppliers to manage their orders via a supplier-specific dashboard featuring three tabs: preparing, shipping, and delivery, and stream orders by delivery state in each tab.

Explore building a supplier order model, using a date picker to set an estimated delivery date and update Firebase orders with delivery state and timestamp.

Display a supplier's products in a dashboard using a stream builder and a product model. Link the stream to Firebase Auth for the current user ID to manage items.

Add a badge to the supplier dashboard by streaming the orders collection and counting items with delivery set equal to preparing for the current user.

Stream dynamic data to the statics screen dashboard, building a statics model with reusable containers and decorative edges, and animate values while preparing to display real data.

Stream real-time store statistics from cloud data using a stream builder, displaying live sold out status, item counts, and total balance by aggregating quantities and prices from snapshot data.

Explore how to build a count up animation in a Flutter app with an animated counter, animation controller, and animated builder. Tune duration and tween values to display live numbers.

Implement a balance screen in the Flutter app by adapting the balance model, showing the total prize, and adding a pink gets my money button.

Set the main category and subcategory, add images, specify a product name and description, apply a 14% discount, and automatically calculate the new price for cart and wishlist.

Add an optional discount field in the uploading form, validate it as 0–99, and display the discounted price in product details, cart, and wishlist.

Learn to implement discounts in a Flutter app: calculate price after discount, show discount badge, strike through the original price, and display the sale price.

Calculate the discounted price and pass it to cart and favorites, showing price after discount when available and the original price otherwise, and verify updates in cart and wishlist.

Use the search bar to filter products by name or keyword like jeans, jacket, or skirt. Open any item and add it to favorites or cart with a tap.

stream data from a cloud database's products collection using a stream builder, then filter by search input to display matching product names and navigate to product details.

Style a Flutter search interface by configuring background colors, autofocus, and a dynamic search field that shows a hint 'search for anything' when empty and lists results as you type.

Implement a sales model for product search, enable tap navigation to a product details screen, and add a simple search bar to filter items and manage cart or favorites.