Flutter+Firebase Build a Grocery App&WEB Admin Panel [2024]

Flutter & Firebase Build a Grocery App with a WEB Admin panel From scratch with payment gateway integration 2024 Edition

4.85 (366 reviews)
Udemy
platform
English
language
Mobile Apps
category
instructor
12,818
students
18 hours
content
Feb 2024
last update
$84.99
regular price

What you will learn

This Flutter course is a complete guide that helps learn and build a fully functioning Flutter application with Firebase.

Teaching how to write Clean-code and avoid Boilerplate code

A fully functional app that is ready for use and deployment

Fully Functional Flutter Grocery app with WEB Admin panel

Flutter SharedPreferences

Clear state management with Flutter Provider State Management

Flutter StreamBuilder & FutureBuilder

Firebase Firestore, Authentication & Storage

Payment gateway

Write production-ready code following best practices and become a competent Flutter developer

Description

Course prerequisites:

  • Basic knowledge in programming to get started

  • Basic understanding of Flutter and good knowledge is recommended

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

How this course can be of help:

  • Gaining more knowledge in Flutter and Firebase with Payment integration

  • Learn how to make a shopping application simply with a web admin panel

  • A fully functional app that is ready for use and deployment

What's in the course:

  • Complex UI has done simply

  • Build a Complete mobile app With a WEB admin portal

  • 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 & Custom 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&expert topics

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

  • How to design, build, and debug Flutter 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

  • Payment gateway

Course structure:

approximately 17 hours of content and updated regally 

Requirements:

  • 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 Firebase and payment integration

  • 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.


Note:

This course has 2 apps, One for the user "ANDROID app in Portrait mode", and one for the admin "WEB".

Note that the ANDROID app is responsive only in portrait mode, it doesn't support landscape mode.


The search logic is done locally, and it is only available in the Android application since it is the same logic if you want to implement in the WEB Admin Panel.

The app is available on Playstore, please consider testing it before buying the course.

Content

Introduction

Introduction
App overview - explain how it works
Youtube channel

Start coding - Build the Mobile app UI

App intialization and dark theme implementation
Implement the bottomBar
Assignment 1
Add different appbars for the different screen in the bottombar
Assignment 2
Implement the user screen
Create the update address dialog
Assignment 3
Implement the logout dialog
Implement the category design
Finish building the category screen
Implement the card swiper in the home screen
Implement the sale widget
Create the items on sale listview
Impelment the rotated on sale text widget
Fancy image implementation
Implement the feeds widget and add it to the Home screen
Make the price widget dynamic
Implement the sale screen
Handle UI if there is no products on sale. (Create new UI to it)
Implement the feeds screen
Implement the cart widget
Implement the cart screen
Assignment 4
Implement the products details screen
Implement the quantity text controller function
Implement the wishlist screen
Impelement the warning dialog
Implement the orders screen
Implement the viewed recently products screen
Handle the empty screen for the Orders, Cart, Wishlist and Viewed recently
Implement the badge widget for the cart
Implement the login screen
Implement the sign up screen
Implement the forget password screen

Build the admin panel UI

Start implementing the admin panel
About next lecture
Implement the products widget and explain how to run the web app
Implement the products gridview
Implement the all products screen
Implement the order widget in the Dashboard screen
Fix the ScrollController error
Implement the Orders screen
Implement the upper widgets in the dashboard screen
Start building the add product screen
Edit the header widget
Implement the drop menu for selecting a category
Impelement the Radio buttons to choose the Measure unit
Implement the image picker widget (WEB)

WEB Image picker

Allow the admin to pick up the product image
Allow the admin to clear the picked image
Implement the clear form function

State management

Create a model class for the products
Show different products
Implement the products provider
Get the products details in the feeds screen without passing it
Read the other attributes in the feads widget
Finish the state management for the on sale products
Show the product details
Show different products depending on their category
Implement the cart model
Implement the cart provider
Allow the user to add to his cart
Manage the cart screen
Show the correct information of the items in the cart
Allow the user to clear his cart, update quantity and remove one item from cart
Add to cart from the product details
Check if product is in cart
Implement the wishlist provider
Allow the user to add to his wishlist
Finish the wishlist state management
Finish the viewed recently state management
Show the correct number for the cart badge

Firebase - Android app (Part 1)

What is Firebase?
Connect the app to the Firebase
Firebase initialization
Allow the user to register using an email and password
Create a loading manager widget
Show a different loading widget
Check if the user is allowed to add to his cart (If the user is logged in)
Allow the user to sign out, and test the app
Allow the user to loggin
Implement the google sign method (Allow the user to login using his gmail acc
Forget password
Impelement a toast in Flutter
Save the user information in the Firebase Firestore
Fetch the user information from the Firebase Firestore
Allow the user to edit his address

Firebase - WEB Admin panel (Part 1)

Connect the web admin panel to the Firebase
Allow the admin to upload a product
Flutter web - Upload an image to the Firebase
Display the products in the admin panel after fetching it from the Firebase
Implement the Edit product screen
Display the correct data in Edit product screen
Allow the admin to update the product details
Allow the admin to delete a Product

Firebase - Android app (Part 2)

Fetch the products from the Firebase
Show different background while fetching the products.mp4
Allow the user to search for a product
Fix products duplication error

Firebase & User Cart

Save user cart to the Firebase Firestore
Fetch the user cart from the Firebase (Show the itemsthat are in the user cart)
Fetch the user cart while the app is loading
Fix some errors related to the user cart
Show the correct prices in the cart screen
Allow the user to delete one item from his cart (Perform deletion from an array)
Allow the user to clear his cart and fix a bug
Added after the user wishlist section-Fix one bug related to the cart-Null user

Firebase & User Wishlist

Write the method to save the wishlist on the Firestore
Finish the wishlist provider (Fetch, add, remove From the Firebase)
Finalize the wishlist with the Firebase
Show a progress indicator while adding product to the wishlist
Fix a bug while fetching the wishlist

Firebase & User orders

41- Create the orders model and provider class
Implement the place order method to save the orders on the Firebase
Implement the Fetch orders method
Finalize the orders and display it for the user

Firebase & Fixes

Save extra user info on google sign in

Firebase - Admin panel (Part 2)

Improve the edit product screen UI
Start fetching the orders and display it in the admin panel
Refactor the fetching orders widget
Display the correct orders information
Stripe implementation with Firebase

Screenshots

Flutter+Firebase Build a Grocery App&WEB Admin Panel [2024] - Screenshot_01Flutter+Firebase Build a Grocery App&WEB Admin Panel [2024] - Screenshot_02Flutter+Firebase Build a Grocery App&WEB Admin Panel [2024] - Screenshot_03Flutter+Firebase Build a Grocery App&WEB Admin Panel [2024] - Screenshot_04

Reviews

Praveen
May 19, 2023
In admin panel, The teacher has exhausted, may be. Therefore he didnt explain as like making of UI. In the admin panel he wrote the code and the head and tail only he explained in very less. For me is a very bad
Fadel
May 12, 2023
You should write the code within the lecture, not to be prepared before, and start going up and down with the cursor
Darwin
April 20, 2023
Don't buy this course, some function is not even completed, the instructor is not helping at all, he don't care about your problem, he only wants your money.
Ridho
March 22, 2023
I had many problems when I started making the admin panel. The instructor should have explained step by step, like making a mobile UI. This was very difficult for me, who was still a beginner.
Rebaone
January 3, 2023
The instructor explains everything in details and he goes at a good pace for you to grasp everything , LOL the only thing I can say is the Instructor is surely a back-end developer
Muhammad
November 24, 2022
This course is a great start to project building, the instructor has covered a lot of key concepts and widgets. He is quite responsive as queries are concerned.
Dilan
November 17, 2022
Excellent Course. Helped me to learn and understand Flutter Dart Firebase very well. I found the course materials very useful. Hadi Kachmar's Presentation skill is very much understandable to me. highly recommended.
Tauseef
September 12, 2022
This UI of the app is not good enough to be displayed in an real life app, Im really hopefull of the UI imporvements
Basheer
August 19, 2022
If you have the basics, you have to take this course, any other course on Udemy is just a waste of time. I just finished this course, the course is complete, I have learned a lot of things from it. The instructor's English and accent are straightforward to understand, and the video editing is excellent, with zooming on the code. This course helped me with my freelance work to build E-commerce and any other App for production. Thanks for this course, and thanks for making me an expert flutter developer.
Naresh
August 14, 2022
Good Start the Project is to Interesting and the till now the all things are going in linear manner without any issues. Awesome things are use in this Courses project and new concept and creativity.
Prathamesh
August 2, 2022
Very good starter app and good explanation given in this course. Worth it for getting started the flutter app and backend !!!
Ezzeldin
July 12, 2022
not what was said in title of course ! the UI UX the lecturer made was awful and the language spoken was unclear ! wasted time
Emir
June 25, 2022
Great course, great instructor. Instructions straightforward and clear. The content is updated. Instructor is always there for questions. I don't regret even 1% for taking this course. Actually, can't wait for the next course from Hadi! Any other rating than 5.0 doesn't make any sense. P.S. I see some people are complaining about instructor. The course is definitely not for beginners. You need some basic knowledge. I finished course from Hussain Mustafa / Dart&Flutter, and after that course I can follow content of this course with no problems.
Bertrand
June 21, 2022
This course is of a fairly low quality compared to other courses I took. I have completed around a third of the materials, and the trainer explains very little about why things are this or that way. I know it says you're supposed to have some knowledge in Flutter, but some details about widgets, states, would be welcome. The most frustrating is usually when somethings doesn't work for ... well reasons, and the solution is "Let's try that, oh it doesn't work, let's try this" and in the end, you remove a widget to make things ok, and still no explanation is given why it was necessary to do that. A bit amateurish to my taste.
Bhakin
May 11, 2022
This course can answer many difficult questions (Null Safety, Asset File Access, context, etc.) I wondered for a long time by showing some concise and clear examples.

Coupons

DateDiscountStatus
5/11/2022100% OFF
expired
5/18/202286% OFF
expired
6/10/202286% OFF
expired
6/26/2022100% OFF
expired
7/28/2022100% OFF
expired
8/5/2022100% OFF
expired
10/4/2022100% OFF
expired
12/20/2022100% OFF
expired
3/12/2023100% OFF
expired
7/15/202384% OFF
expired
8/8/202384% OFF
expired
8/9/2023100% OFF
expired
9/8/202384% OFF
expired
11/23/2023100% OFF
expired

Charts

Price

Flutter+Firebase Build a Grocery App&WEB Admin Panel [2024] - Price chart

Rating

Flutter+Firebase Build a Grocery App&WEB Admin Panel [2024] - Ratings chart

Enrollment distribution

Flutter+Firebase Build a Grocery App&WEB Admin Panel [2024] - Distribution chart
4593816
udemy ID
3/13/2022
course created date
5/9/2022
course indexed date
Bot
course submited by