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.

Build a Flutter profile screen with login state, avatar display, and a settings list, using assets management, custom widgets, and themed app bar for an ecommerce admin app.

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.

Create the cart screen by building a cart widget with an app bar and a list view to render items, using fancy shimmer image loading and a quantity bottom sheet.

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.

Implement a Flutter carousel on the home screen using the card swiper package, configure a banners images list, and customize pagination, height, padding, and optional rounded corners.

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.

Create a dynamic heart button widget in Flutter for an e-commerce app, with customizable background color and size. Integrate it into product details and cart screens to reflect wishlist actions.

Implement the wishlist and viewed recently screens for an e-commerce app, mirroring the card screen with a grid view, proper routing, and navigation updates.

Learn to implement a warning or error dialog in Flutter using showDialog and an alert dialog, triggered from the profile screen's login button.

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.

Explain why state management is needed and how provider enables global state updates, reducing heavy stateful widgets, and improving scalability for Flutter apps.

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.

Configure a static list of product model instances and wire it to the search screen to display image, title, and price, with uuid-based ids and null checks.

Display the correct products with provider state management and a product provider. Fetch from backend, listen for changes via change notifier, and integrate the provider above the UI.

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.

Pass the product id to the details screen via modal routes or arguments, fetch the current product, and display its image, title, price, category, and description with null checks.

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.

Enable product search in the Flutter e-commerce app by adding a search field, implementing a provider-based search, and showing results from a dedicated search list with empty-state handling.

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 wishlist state management with a wishlist model and provider, enabling add, remove, and clear. Display wishlist items and a toggle heart in the user interface.

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.

Make the upload product screen dynamic by passing the product model to the edit screen, enabling admins to edit title, category, price, description, and 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.

Register users with email and password through the register screen wired to Firebase Auth. Initialize Firebase at startup and handle errors with try/catch and finally, showing a toast on success.

Implement firebase authentication in a flutter app by adding sign in with email and password, checking current user to toggle login or logout, and navigating accordingly.

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.

Push google sign-in data to firestore on login and populate the profile with name, photo URL, and email. Implement a new-user check and generate a uuid to identify the user.

Keep the bottom navigation bar state alive on the profile screen with the automatic keep-alive mixin, avoiding repeated data fetches; use a user provider to fetch once.

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.

Empower admins to upload new products to Firebase by initializing the Firebase app, generating a product ID, uploading an image, and saving title, price, description, quantity, and category to 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.

Use a stream builder with Firebase Realtime Database to fetch and display products in an e-commerce admin app, enabling real-time updates as products are added, edited, or deleted.

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.

Discover how to place an order in a Flutter Firebase app by creating an orders collection, saving user and product data, and clearing the cart upon success.

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.