Flutter & Firebase E-commerce (Main, MultiVendor, Admin) app

Install the flutter sdk on Windows by downloading flutter 3.13.9 from flutter.dev, extracting, moving the flutter folder to the C drive, and adding its bin path to system environment variables.

Download git from git-scm.com, then run the installer to complete installation, noting the latest release 2.42.1, and confirm git is ready for your Flutter projects.

Install Android Studio by downloading Android Studio Giraffe from developer.android.com, agreeing to the terms, and running the downloaded executable to complete the installation after setting up Flutter and Git.

Enable Flutter to locate Android Studio using cmd by running a command that sets the Android Studio installation directory, and verify the path shown (e.g., c:\program files\android\android studio).

Run Flutter doctor to verify installation and identify issues, such as missing Visual Studio, while configuring Android Studio with Flutter and Dart plugins from the marketplace.

Download and extract the shopping project zip, copy the Jackie Shopping Project from downloads into the Android Studio projects folder, and import the Jackie Shopping Project into Android Studio.

Configure Android Studio to set the Flutter and Dart SDK path for the Flutter e-commerce project. Verify the SDK path points to flutter/bin on the C drive, then apply.

Connect your Android Studio project to Firebase by logging in, creating a Firebase project, adding an app with package name com.shopping.app, and placing the google services json in your project.

Customize the splash screen by editing the Android launch background XMLs to set the color and central logo. Replace the default white screen before the main Flutter code runs.

Initialize firebase and push notification permissions in main.dart, configure cloud messaging, set up state management providers, and establish the app root and the initial shopping screen.

Explore the main shopping screen in a Flutter and Firebase e‑commerce app, focusing on the home, category, and account tabs with back-button behavior.

Navigate the category screen in a flutter and firebase e-commerce app, where categories from firestore populate an image list; tap a category to view its subcategory screen.

Fetch subcategories from firestore within the category-sub fashion screen. Filter by gender (women, men, kids) and view items like boots and dresses, with add-to-cart via provider.

Displays a category sub fashion screen with a zero-elevation app bar showing the selected category and two icons for search and cart, each navigating to their respective screens.

Display subcategories by gender in a category screen using a grid view, fetch subcategories for women's fashion, men's fashion, and kids fashion, and navigate to the product screen on tap.

Fetch fashion products from Firebase Firestore, filter by category and vendor approval, display them in a padded grid of cards, and navigate to a detail screen with product data.

Showcases a bottom-centered add-to-cart button on the category-sub fashion screen in Flutter, with pinkish or gray color based on cart status and tap feedback via a snackbar.

In the fashion category, select a size from a bottom sheet when adding to cart, with visual indicators for selected sizes and a toast prompt if no size is chosen.

Add items to cart in the category-sub fashion screen using a cart model and provider, passing product details, selected size, quantity, and vendor, with bottom sheet prompts and status messages.

On all products screen, filter by the selected subcategory, fetch approved items from Firestore, display them in a grid with add to cart, and navigate to the product detail screen.

Explore the product detail screen in a Flutter & Firebase e-commerce app, showing the product image, name, brand, price, and details passed from the selected item.

Demonstrates a product detail screen with a horizontal carousel slider that auto-plays multiple images every 8 seconds with 0.8s transitions; tapping an image navigates to the image slider screen.

Explore the image slider screen that displays all product images with a photo view gallery, enabling zoom in and zoom out for clear detail on a black, app-bar-free interface.

Navigate the product detail screen with an image slider, showing the product name, conditional brand name or subcategory, price, and fashion sizes in a horizontally scrollable, bordered size list.

Explain delivery information on the product detail screen by showing a ready-for-delivery date range calculated from today, with a location-specific delivery message and zoomable product images.

Explore how the product detail screen presents features: 6.5in display, 64 MP camera, and 8 MP back camera. Fetch data from Firebase and navigate to description via a gesture detector.

Explore the description screen to view all descriptions and key features, plus an advertisement, contrasting with the product detail screen that limits to five lines with ellipsis.

Explore the seller store screen in a flutter and firebase e-commerce app, viewing vendor details, published products, and seamless navigation to seller profiles and product details via firestore queries.

Learn how adding items from product details or lists adds to the cart, view and edit quantities with plus minus, see item totals, and delete items from the cart.

Discover the cart screen in a Flutter e-commerce app, displaying items via a provider-backed cart model with image, name, price, and plus, minus, delete actions, including a clear cart option.

Explore the cart screen's total price calculation in Kenyan shillings, multiplying item prices by quantities, and navigate to checkout when the total is nonzero.

Navigate the checkout screen from location verification and a horizontal cart view to pay now (Visa or Mastercard) or pay on delivery, and review the subtotal, delivery fee, and total.

Show the delivery address section on the checkout screen with a leading location icon and a deliver to editor location subtitle. Tap edit to open the edit profile screen.

Edit profile screen enables updating first name, last name, email, phone, and location with form validation; updates Firestore using the current user uid and returns to checkout.

Explore the checkout screen with items in cart displayed horizontally, including image, name, price, and a payment option, plus a payment summary, delivery fee, and Firebase Firestore order placement.

Discover the success screen that redirects home after placing an order, blocks back navigation to checkout, and shows a green check, order placed message, and a go to orders link.

Explore the account orders screen with open and closed tabs, streaming the user’s orders from Firestore and filtering by buyer ID equals UID and delivery status, with tap-to-view order details.

Explore the order detail screen, displaying the order id, price (subtotal plus delivery), and an optional size. See the ordered item card with image, delivery tracking, and payment details.

Explore the account screen in the Flutter Firebase ecommerce app, featuring user details, cart count, and navigation to orders, inbox, country, account management, about, vendor, app info, and logout.

Fetches customer messages from Firebase Firestore, filters by the current user id, and displays them in an inbox with message details and related product image and name.

Explore the country screen in the Flutter & Firebase e-commerce app, which fetches the countries from Firestore's countries collection using a stream builder and displays them with images and names.

Discover account management in a flutter and firebase e-commerce app, including sign-in gated access, editing profile details, and deleting data via the delete my data screen with firestore.

Explore Cheki shopping home screen built with a nested scroll view, featuring a floating app bar with a logo, search, and cart actions that hides on scroll and reappears upward.

Explore the home screen of a Flutter & Firebase e-commerce app, featuring a sliver app bar and a tappable category list (shopping, cars, relisted, construction) with navigation or snackbar feedback.

Learn how the home screen banner widget in a Flutter and Firebase e-commerce app displays sliding banner images with autoplay, indicators, and a Firestore banners collection integration.

Master navigation from the home screen to the category sub screen by tapping the deals on smartphones card, passing the selected category mobile phones to render category-specific results.

Explore the home screen's horizontal deals lists, fetching mobile phones from Firestore by category with vendor approval and deals status, displayed as image, name, and price cards in a list.

Explore the login and signup flows for a Flutter & Firebase e-commerce app, including vendor authentication via an authentication controller and data capture in Firebase Firestore.

After login validation, the destination screen serves as a directory with sections for shopping, cars, real estate, and construction, guiding clicks to the main vendor or cars screens.

Explore the main vendor earnings screen, which fetches the vendor name from Firestore, computes total earnings from orders with two decimals, and shows total orders filtered by vendor ID.

Explore the upload screen to enter product details across general, attributes, and images tabs, select category, subcategory, sizes, and upload images to Firebase Storage, then save to Firestore.

Navigate edit product screen with published and unpublished tabs, fetch vendor products by id and approved status, and slide items to unpublish or delete, routing to fashion or product edits.

Navigate the orders screen with open and closed tabs, fetch and filter orders by vendor ID, and move delivered orders to closed for clear vendor order management.

Use the logout screen to sign out a vendor; press the outlined button to log out via authentication.signOut and redirect to the login screen.

Explore how the cars, real estate, and construction sections mirror the shopping flow, featuring a main screen with upload, edit, and logout, plus general, images, and published/unpublished edit tabs.

Customize the flutter firebase e-commerce admin app by editing the main theme color and the splash screen assets in the Android module, including the launch background xml and center logo.

Explore the admin login screen with authentication and password validation that navigates to the admin main screen, shows validation errors for invalid input, and omits a sign-up page.

Explore admin main screen of the Flutter & Firebase e-commerce app, which defaults to admin order page and includes six navigation items: orders, shopping, cars, construction, and log out.

Explore the admin orders screen with open and closed tabs and a center titled app bar, showing open orders (delivered false) and closed orders (delivered true) in a list view.

The admin orders model organizes order data, showing open and closed orders with product, order id, delivery stage, and date. Tapping an item navigates to the admin order detail screen.

Navigate admin order detail screen to see how order data passes from the orders model via a gesture detector. View app bar customization and the padded, scrollable column layout.

Display the order ID, price with two decimals, and conditional size display on the admin order details screen using data from the orders model.

Fetch the ordered product from Firestore by product ID on the admin order details screen, filter for approved, and display a card with the product image, name, and price.

Admin can update the current delivery stage from the order details by tapping edit to open a dialog with stage options, update Firestore, and show a success snackbar.

Admins send messages from the order details screen, with a title and content, via a confirmation dialog, stored in Firestore under messages buyers and shown with a green snackbar.

Explore the admin order details screen's draft messages, enabling quick copy of draft titles and their messages to prepare customer notifications using the clipboard.

Navigate the deals shopping page with a two-tab layout—bills tab and search tab—within a Bealls shopping page, featuring a centered app bar titled 'shopping'.

The search tab lets admins search published products via a text field, fetches results from Firebase Firestore, and shows tappable cards for details, delete, or set deals true.

Learn how the deals tab in the admin Flutter and Firebase e-commerce app displays home screen products and uses the deals field to sync with the main app.

The deals sections for cars, real estate, and related pages share the layout, with a search tab, text field, item confirmation, add to home screen, and delete; admin logout screen.

Navigate to the logout screen via auth, where a centered outlined button labeled sign out logs the user out and redirects to the admin login screen.