Flutter With Firebase Build An E Commerce App From Scratch

Flutter full shop app with Firebase to cover Flutter and Firebase concepts&Stripe payment integration

Last updated 2022-01-10 | 4

- This Flutter course a complete guide that helps in learning and building a fully functioning Flutter application with Firebase.
- Teaching how to write Clean-code and avoid Boilerplate code
- This course you how to make new designs and styles for your app

What you'll learn

This Flutter course a complete guide that helps in learning and building a fully functioning Flutter application with Firebase.
Teaching how to write Clean-code and avoid Boilerplate code
This course you how to make new designs and styles for your app
Clear state management in a very detailed manner
Introduce new widgets and how to use them correctly

* Requirements

* Basic knowledge in Flutter and Dart


Course prerequisites:

  • Basic knowledge in programming to get started

  • Basic knowledge in Flutter

  • Concepts are explained clearly. You will always learn what you're building and why, and then how to do it.

How this course can be of help:

  • Gaining more knowledge in Flutter and firebase

  • Learn how to make an online shopping application simply

What's in the course:

  • Complex UI done simply

  • State management

  • Firebase

  • Clean-code and avoid Boilerplate code

  • Styles for UI

  • State Management: setState, lifting state up via callbacks, global access, scoped access with Provider and ChangeNotifier

  • Navigation

  • Dart

  • Forms, input handling and validation

  • Managing and updating packages

  • Databases and Cloud Firestore

  • ListViews and multiple UI states

  • Firebase Authentication

  • Firebase Firestore

  • Firebase Storage

  • Dart Programming Language - Fundamentals and intermediate topics

  • How to understand Flutter Mobile Development by building apps incrementally.

  • How to design, build, debug Flutter Android and iOS Apps

  • How to get Flutter apps to communicate with a realtime database - Firestore

  • How to build robust apps with Flutter

  • Flutter AppBar

  • Flutter Material Design

  • Flutter Row and Column

  • Flutter ListView Builder

  • Stripe payment gateway

Course structure:

approximately 14 hours of content and updated regally 


  • Windows application development

  • Mac application development

  • Access to a computer with an internet connection.

  • and you are ready for the journey

  • Love learning about applying cutting-edge algorithms to practical cases!

What Should I Expect After this Course?:

  • The ability to build a fully functional shopping application with a firebase

  • new information regarding Flutter

Note that the course build on windows, so I didn't have a chance to cover the IOS configurations! But feel free to ask anything about it. I will be there to help.

Who this course is for:

  • Flutter and Dart learning cravers
  • Flutter beginners
  • To all people who are interest in Flutter
  • For people who want to make a complete app in Flutter

Course content

11 sections • 131 lectures

Who am I? And why this course? Preview 01:48

App overview Preview 06:27

Deal with null safety, and talk about the requirements Preview 03:30

Explain how to use null safety with examples Preview 07:40

***MUST READ*** Preview 01:04

Things that I added according to the students requests Preview 01:25

Clarify something Preview 00:49

This course was build for education purposes. This is a one store app! not a multistore app. it can be converted to a multistore app as your wish.

Get the most benefit of this course Preview 00:38

What benefits will you get once you finish this course? Preview 01:06

YouTube channel Preview 00:24


Flutter helper kit Preview 03:59

Stripe added, and find the app on playstore Preview 00:25

*MUST READ* Bottom bar lecture Update Preview 00:10

Lecture has been recycled in lecture 15 Create a notched bottom bar Preview 06:44

Deep explanation of the bottom Bar screen (Added after publishing) Preview 21:38

Bottom bar with null safety Preview 06:05

Edit deprecated title in the bottom bar Preview 02:27

Custom Icons update Preview 00:12

Usage of custom icons Preview 06:24

Build the user info and settings screen design Preview 07:33

Code recycling and more tricks ( Added after publishing) Preview 04:55

Create a dynamic widget that can be used everywhere. And simplify our code

Add a switch tile using 2 different ways ( Added after publishing the course ) Preview 06:33

**IMPORTANT** Sliver appbar lecture Update Preview 00:24

Implement a sliver app-bar Preview 05:18

Lecture has been recycled later in the course

Add animated FloatingActionButton Preview 01:45

Lecture has been recycled later in the course

Sliver appBar writing code from the beginning with detailed explanation Preview 05:54

Sliver AppBar lecture recycling (Added after publishing the course MUST WATCH) Preview 31:34

Sliver appbar with null safety Preview 00:11

Theme lecture update Preview 00:09

Add a Dark/Light theme to the app Preview 07:33

Save theme state using shared prefs Preview 06:16

In this tutorial you will learn how to save user setting into his phone. so it will not be lost once he close and open up the app again.

The chosen theme will be displayed once he open the app.

Implement the user empty cart screen design Preview 13:15

In this tutorial I wrote the code of the empty cart screen design.

This page appear once the user cart is empty. That's why I named it like that.

Implement the user Full cart screen design Preview 20:33

In this tutorial I wrote the code of the Full cart screen design.

This page appear once the user add a product to his cart. That's why I named it like that.

So once he add any product to his cart later. this screen will be displayed instead of the empty cart screen.

Build the App Bar and checkout section in the cart screen Preview 11:26

More design improvements in the cart screen Preview 03:50

Start implementing the products feeds screen. (Create the feeds shape design) Preview 10:06

Implement the Feeds screen by splitting its code into widgets. And in this tutorial I implemented the products shape design

Implement a GridView in the Feeds screen Preview 02:17

Implement a staggered Grid View in Feeds screen instead of a normal Grid View Preview 02:31

More design improvements in the User info screen Preview 01:10

More changes in the user info screen Preview 00:56

Add the a badge for the products design in the Feeds screen Preview 02:33

Align the badge using the positioned widget Preview 01:31

Add a backdrop layout in the home screen Preview 06:05

Carousel and Swipper update Preview 00:07

Add a Carousel widget in the Home screen Preview 06:16

Add a Swiper widget in the Home screen Preview 07:32

Create the Category widget design Preview 11:59

The purpose of this widget is to allow the users to browse using products category

Create the popular items widget design in the Home screen Preview 13:52

Introduce the navigation rail widget to Create the brand Inner screen using Preview 10:39

Later on this screen will be used to show products according the its categories.

Create the backdrop back-layer design Preview 10:12

Implement the user empty Wishlist screen design Preview 08:07

Just as the cart screen. this page will be displayed where the Wishlist is empty.

Implement the user Full Wishlist screen design Preview 04:28

Just as the cart screen. this page will be displayed where there is items in the Wishlist screen

Full code until now Preview 00:00

Implement the Product details screen UI Preview 12:31

Create the Product model class Preview 02:41

Use dynamic data to show different products in the Feeds screen Preview 07:23

Why do we need state management? Preview 00:50

Create the products provider class Preview 06:28

Code improvement instead of dependency injection Preview 03:52

In this tutorial, the main thing that I explained is that  to use better way instead of dependency injection

Display products according to their categories in the home screen category widgt Preview 06:14

Finalize the categories state management Preview 07:20

Display products according to their Brand in the home screen Brands widget Preview 12:56

Display only popular products in the Home screen Preview 10:11

Finishing up the products details screen Preview 11:04

Handling view all brands in the Home screen Preview 02:10

Handle view all popular products in the Home screen Preview 03:10

Create a cart model class Preview 01:38

Implement the cart provider class Preview 05:14

Create add to cart method where users will be able to add products to their cart Preview 04:23

Using the dependency injection for the cart (passing data through constructor) Preview 10:26

Show if the product is found in cart and disable add to cart button if found. Preview 02:01

Use the cart model provider instead of dependency injection Preview 05:21

Using Change Notifier Provider we become able to use the cart model class as a provider class and reduce and simplify the code

Allow the user to add to their cart from the popular products widget Preview 03:21

Allow user to change the products quantity in the cart Preview 06:18

Allow the user to delete one product from his cart and clear it Preview 10:58

Show total price in the cart screen Preview 02:53

Create a dynamic alert dialog method Preview 04:09

Wishlist state management Preview 16:48

Edit the icon color in the popular products widget Preview 01:20

Once the user add a product to his Wishlist. The favorite icon color will turn red in this case. To flag it as a Wishlist product.

Add a badge for the Wishlist and the Cart Preview 05:31

Add an appBar for the Feeds screen Preview 01:44

Make the products dialogs in the feeds screen Preview 05:01

Show the product details in the Feeds dialog instead of dummy data Preview 06:15

Implement the search screen UI and Logic Preview 15:26

Create a Landing page part 1 Preview 17:49

Create the Landing page part 2 Preview 13:54

Implement the Login screen Preview 14:43

Add the submit form method to save the form Preview 05:30

Submit method to save the current form and check for validation. and allow users to jump from TextField to another.

Implement the Signup screen Preview 08:02

Implement the top widget in the sign up screen (Profile preview widget) Preview 12:34

Allow the user to pick up an image Preview 05:56

Allow the user to navigate From the landing page to the main screen in the app Preview 03:41

Implement the Upload a new product screen Preview 06:50

Allow the user to swipe to the left to navigate Into the upload a product screen Preview 01:39

Connect our app to Firebase Preview 06:14

If the Sha- 1 command didn't work, apply this command "keytool -list -v -keystore c:\users\yourname\.android\debug.keystore -alias androiddebugkey -storepass android -keypass android"

Allow the users to register using Email and Password part (1) Preview 03:36

Allow the users to register using Email and Password part (2) Preview 07:02

Error Handling Preview 06:17

Allow the users to login Preview 02:35

Show different screens depending on the users if logged in or not Preview 06:34

Implement the sign out method Preview 05:11

Google Sign In Preview 07:35

Google Sign In error handling Preview 02:31

What is Firebase Firestore and how does it works? Preview 04:08

Upload extra user data to the Firebase Firestore Preview 13:51

Read more about 64k Multidex error, https://developer.android.com/studio/build/multidex

Upload image to Firebase Storage, And add its link to the Firestore Preview 14:28

Fetch user info from the Firestore Preview 06:40

Display the information on the screen and handle errors Preview 04:16

Get the display name and the photo URL from the user instead of the Firestore Preview 04:02

Allow the users to sign in anonymously Preview 06:03

Save user info to the Firestore on google sign in Preview 02:14

Upload products to the Firestore Preview 15:53

Fetch products from the Firestore and display it. Preview 15:40

Implement Forget password screen to allow the user to reset his password Preview 18:58

Fix an error that is being made by the suggested products (Range index Error) Preview 02:09

Get start with stripe payment gateway Preview 07:29

Stripe integration Preview 46:19

Implement the orders design Preview 10:18

Create orders model class Preview 03:55

Upload the user orders to the Firestore Preview 11:58

Fix an error while placing an order Preview 03:58

Create the orders provider Preview 05:58

Fetching the orders and display it on the screen using FutureBuilder Preview 06:27

Fetch only correspondent orders for each user Preview 05:35

Show different screen depending if there is any order in the Firestore Preview 03:59

Allow the users to delete from their orders Preview 07:32

Place an order only if the transaction is successful Preview 04:57

Handle empty products in the brands and the category Preview 04:45

Fix the dark theme state Preview 03:01

The theme wasn't changing once we try to switch it, in this tutorial we will fix it

Add a refresh indicator in the feeds screen Preview 05:50