Flutter & Firebase: build an E-commerce and Admin App [2024]

Lock the device orientation to portrait in Flutter to support responsive design, focusing on portrait mode, state management with Provider and Firebase for an e-commerce and admin app.

Install Visual Studio Code and Flutter, then create and open a new Flutter app in Visual Studio Code using flutter create, name the project, and select a device or emulator.

Implement a dark and light theme across the app using provider state management, persisting the user's choice with shared_preferences and applying it via theme data and a ThemeProvider.

Learn to build a reusable custom text widget in Flutter, with subtitle and title variants, default values, and properties for size, color, decoration, and overflow to simplify ui code.

Create a bottom navigation bar with an active state using a page view and page controller to switch between home, search, cart, and profile screens while preserving state.

Create an app name animated background widget in flutter by wrapping text with a shimmer, installing the package, editing pubspec.yaml, and customizing base color, duration, and font size via constructor.

Create a reusable empty cart screen in flutter by turning the layout into an empty bag widget with image, title, subtitle, and button text, made responsive with media queries.

Build a cart bottom sheet widget in Flutter as a stateless cart bottom sheet with a row for product count, quantity, and price, plus a check out button.

Create a cart quantity bottom sheet in flutter, using ListView.builder inside a quantity widget and showing it with show modal bottom sheet, including styling and padding.

Implement the cart badge in a flutter 3.7+ app by wrapping the cart widget with the built-in badge widget, configuring label, count, and colors for light and dark themes.

Set up the search screen with an app bar, text field, and product grid. Implement a gesture detector to dismiss the keyboard and use a text editing controller with disposal.

Implement a responsive search grid using a grid view builder and a third-party package, with dynamic height, image caching, product widgets, and add-to-cart and wishlist interactions.

Explore how the search screen uses a text controller to clear input without setState, and review disposal, icon size defaults, and performance considerations for Flutter ecommerce and admin apps.

Create the latest arrival widget for the home screen in Flutter, featuring the image, title, price, and heart and cart actions in a horizontally scrollable list.

Create a categories widget for the home screen using a grid view and a reusable category rounded widget, backed by a categories model.

Implement a product details screen in Flutter for an e-commerce app, including app bar, image, title, price, description, and add-to-cart actions, with named route navigation and responsive layout.

Implement a login screen in Flutter by wiring email and password fields with controllers and focus nodes, validating inputs with a form and validator, and adding alignment and forgot password.

Implement the sign in with Google button as a new auth/google_button.dart widget, style with height, width, expanded layout, padding, and iron icons, and integrate it beside the login button.

Begin implementing the sign up screen for a Flutter and Firebase e-commerce admin app, adding name, email, and password fields with validation, navigation, and password visibility toggling.

Implement a profile image picker widget that opens a dialog with camera and gallery options and displays the selected image from the image picker package.

Learn to implement an image picker dialog in Flutter, using showDialog to present camera, gallery, and remove options, and wire it from the register screen.

Implement image selection in a Flutter app by integrating image picker library to allow camera or gallery choices, handle async image retrieval, and update the UI with the selected file.

Implement the orders screen by building an orders widget that displays multi‑product orders with status indicators for completed or in process.

Implement and test the forgot password screen in a Flutter and Firebase e-commerce app, detailing the auth folder, login and register screens, and the forgot password method.

Create a product model class in Flutter to manage product data for an e-commerce app, including id, title, price, category, description, image, and quantity, with a required named constructor.

Demonstrate dynamically displaying products by category and by product id, using a product model, a product provider, and null checks to support search, wishlist, and recently viewed features.

Create a product find by category function in the products provider to filter items by category using where and lowercase checks, then navigate to the search screen.

Refine the products provider by updating the search query to accept a product list and pass the correct category, then test on a device to verify watch results.

Develop cart state management in Flutter by modelling the cart with product id and cart id, and quantity, managed by a map-based cart provider for efficient add-to-cart and in-cart checks.

Learn to display cart items in a Flutter app using a cart model and provider, showing product images, titles, prices, quantities, and the correct total price and badge.

Implement updating cart quantities in a Flutter & Firebase app by adding update quantity function using the product ID as the key and reflecting changes via a quantity bottom sheet.

Implement clear local cart and remove one item in the cart provider, with a warning dialog and notify listener; plan to integrate Firebase for later syncing.

Display the latest arrival products by wiring up product, product model, and card providers. Enable add-to-cart with a shared function and ensure correct image, title, and price for product details.

Implement the viewed recently products state management by creating a viewed products provider and wiring it through main.dart and product widgets.

Implement the admin panel UI for a Flutter and Firebase e-commerce app, reuse the user app structure, and demonstrate state management across products, orders, and search screens.

Build a dynamic dashboard in a Flutter and Firebase admin app by creating a dashboard button model, a two-column grid view, and navigation to search and orders.

Start implementing the upload a new product screen by building a form with title, price, quantity, and description, plus a category dropdown and later image picker.

Implement a Flutter product image upload widget using a dotted border, with an image picker, conditional display before and after image selection, and options to pick or remove the image.

Learn to connect Flutter apps to Firebase by creating a Firebase project, adding Android apps, configuring authentication (email/password and Google sign-in), and enabling Firestore and storage, with pubspec dependencies.

Learn to implement sign in with Google in Flutter using the Google sign-in library and Firebase auth, obtaining access and ID tokens to authenticate with Firebase, and handle errors.

Build a reusable loading manager in Flutter that overlays a circular progress indicator on login and registration screens using a stack and isLoading, then save user data to Firestore.

Create a user model with uid, username, email, image, and Createdat, plus empty cart and wishlist, then save it to Firestore under Users with document id as the user uid.

Implement state management to fetch and display the current user's id, name, email, and profile image from Firestore on the profile screen using a provider.

Enable users to upload profile images to Firebase Storage from the register screen, placing files in a users_images folder, then store the URL in Firestore.

Fetch products from Firebase Firestore in a Flutter app, map documents to a product model, and display them via a provider with a loading state.

Empower admins to edit a product by updating the product model, provider, and search screen, handling image uploads and using the product id to perform Firestore updates.

Display the ten most recent products by ordering the fetch results by the created timestamp, using order by and where in Firestore, shown on the left after admin uploads.

Learn to add items to a cart and save it to Firebase Firestore, including user login checks, cart ID generation, and updating the user's cart array.

Fetch the cart from Firestore by reading the user document, handle guest or null users, and map cart items to the local cart model after loading products.

Learn to remove a single item from a Firebase cart and clear the cart in Firestore using async functions with cart ID, product ID, quantity, and UI updates.

Learn how to connect the user’s wishlist to Firebase in a Flutter app, saving and fetching wishlist items as maps in Firestore with add, remove, and clear actions.

Fetch and display user-specific orders using a Flutter provider and Firebase Firestore, building an orders screen with future builder, per-user filtering, and real-time UI updates.