Flutter 1.2 with Firebase&Stripe Build shop app from scratch

Flutter 1.2 with Firebase&Stripe Build shop app from scratch

Flutter 1.2 with Firebase&Stripe Build shop app from scratch

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

Language: english

Note: 4.2/5 (589 notes) 55,889 students

Instructor(s): Hadi Kachmar

Last update: 2022-06-02

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
  • Write production-ready code following best practices and become a competent Flutter developer



  • Basic knowledge in Flutter and Dart



Course prerequisites:

  • Basic knowledge in programming to get started

  • Basic knowledge of 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 with payment gateway

  • Learn how to make an online shopping application simply

What’s in the course:

  • Complex UI has 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 apps

  • How to get Flutter apps to communicate with a real-time 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 15 hours of content and updated regally 


  • Windows application development OR 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 builds 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

  • Introduction – DONT SKIP
    • Who am I? And why this course?
    • Flutter 2.10&Firebase Build a grocery app with Admin Panel
    • App overview
    • NULL SAFETY “MUST READ” Project is done using 1.23 SDK
    • Deal with null safety, and talk about the requirements
    • Explain how to use null safety with examples
    • ***MUST READ***
    • Things that I added according to the students requests
    • Clarify something
    • Get the most benefit of this course
    • What benefits will you get once you finish this course?
    • YouTube channel
    • Flutter helper kit
    • Stripe added, and find the app on playstore
    • *MUST READ* Bottom bar lecture Update
    • Lecture has been recycled in lecture 15 Create a notched bottom bar
    • Deep explanation of the bottom Bar screen (Added after publishing)
    • Bottom bar with null safety
    • Edit deprecated title in the bottom bar
    • Custom Icons update
    • Usage of custom icons
    • Build the user info and settings screen design
    • Code recycling and more tricks ( Added after publishing)
    • Add a switch tile using 2 different ways ( Added after publishing the course )
    • **IMPORTANT** Sliver appbar lecture Update
    • Implement a sliver app-bar
    • Add animated FloatingActionButton
    • Sliver appBar writing code from the beginning with detailed explanation
    • Sliver AppBar lecture recycling (Added after publishing the course MUST WATCH)
    • Sliver appbar with null safety
    • Theme lecture update
    • Add a Dark/Light theme to the app
    • Save theme state using shared prefs
    • Implement the user empty cart screen design
    • Implement the user Full cart screen design
    • Build the App Bar and checkout section in the cart screen
    • More design improvements in the cart screen
    • Start implementing the products feeds screen. (Create the feeds shape design)
    • Implement a GridView in the Feeds screen
    • Implement a staggered Grid View in Feeds screen instead of a normal Grid View
    • More design improvements in the User info screen
    • More changes in the user info screen
    • Add the a badge for the products design in the Feeds screen
    • Align the badge using the positioned widget
    • Add a backdrop layout in the home screen
    • Carousel and Swipper update
    • Add a Carousel widget in the Home screen
    • Add a Swiper widget in the Home screen
    • Create the Category widget design
    • Create the popular items widget design in the Home screen
    • Introduce the navigation rail widget to Create the brand Inner screen using
    • Create the backdrop back-layer design
    • Implement the user empty Wishlist screen design
    • Implement the user Full Wishlist screen design
    • Full code until now
    • Implement the Product details screen UI
    • Create the Product model class
    • Use dynamic data to show different products in the Feeds screen
  • State management
    • Why do we need state management?
    • Create the products provider class
    • Code improvement instead of dependency injection
    • Display products according to their categories in the home screen category widgt
    • Finalize the categories state management
    • Display products according to their Brand in the home screen Brands widget
    • Display only popular products in the Home screen
    • Finishing up the products details screen
    • Handling view all brands in the Home screen
    • Handle view all popular products in the Home screen
  • Cart state management
    • Create a cart model class
    • Implement the cart provider class
    • Create add to cart method where users will be able to add products to their cart
    • Using the dependency injection for the cart (passing data through constructor)
    • Show if the product is found in cart and disable add to cart button if found.
    • Use the cart model provider instead of dependency injection
    • Allow the user to add to their cart from the popular products widget
    • Allow user to change the products quantity in the cart
    • Allow the user to delete one product from his cart and clear it
    • Show total price in the cart screen
    • Create a dynamic alert dialog method
  • Wishlist state management
    • Wishlist state management
    • Edit the icon color in the popular products widget
  • More UI and improvements
    • Add a badge for the Wishlist and the Cart
    • Add an appBar for the Feeds screen
    • Make the products dialogs in the feeds screen
    • Show the product details in the Feeds dialog instead of dummy data
    • Implement the search screen UI and Logic
    • Create a Landing page part 1
    • Create the Landing page part 2
    • Implement the Login screen
    • Add the submit form method to save the form
    • Implement the Signup screen
    • Implement the top widget in the sign up screen (Profile preview widget)
    • Allow the user to pick up an image
    • Allow the user to navigate From the landing page to the main screen in the app
    • Implement the Upload a new product screen
    • Allow the user to swipe to the left to navigate Into the upload a product screen
  • Firebase
    • Connect our app to Firebase
    • Allow the users to register using Email and Password part (1)
    • Allow the users to register using Email and Password part (2)
    • Error Handling
    • Allow the users to login
    • Show different screens depending on the users if logged in or not
    • Implement the sign out method
    • Google Sign In
    • Google Sign In error handling
    • What is Firebase Firestore and how does it works?
    • Upload extra user data to the Firebase Firestore
    • Upload image to Firebase Storage, And add its link to the Firestore
    • Fetch user info from the Firestore
    • Display the information on the screen and handle errors
    • Get the display name and the photo URL from the user instead of the Firestore
    • Allow the users to sign in anonymously
    • Save user info to the Firestore on google sign in
    • Upload products to the Firestore
    • Fetch products from the Firestore and display it.
    • Implement Forget password screen to allow the user to reset his password
    • Fix an error that is being made by the suggested products (Range index Error)
  • Stripe payment gateway
    • Stripe deprecated use this tutorial instead!
    • Get start with stripe payment gateway
    • Stripe integration
  • Orders implementation
    • Implement the orders design
    • Create orders model class
    • Upload the user orders to the Firestore
    • Fix an error while placing an order
    • Create the orders provider
    • Fetching the orders and display it on the screen using FutureBuilder
    • Fetch only correspondent orders for each user
    • Show different screen depending if there is any order in the Firestore
    • Allow the users to delete from their orders
    • Place an order only if the transaction is successful
  • Fixes
    • Handle empty products in the brands and the category
    • Fix the dark theme state
    • Add a refresh indicator in the feeds screen
  • Bonus contents
    • Bonus contents


Flutter 1.2 with Firebase&Stripe Build shop app from scratchFlutter 1.2 with Firebase&Stripe Build shop app from scratch

Time remaining or 864 enrolls left


Don’t miss any coupons by joining our Telegram group 

Udemy Coupon Code 100% off | Udemy Free Course | Udemy offer | Course with certificate