4.6 out of 5
4.6
145 reviews on Udemy

Flutter with Firebase&Stripe Build shop app from scratch

Flutter full shop app with Firebase to cover Flutter and Firebase concepts&Stripe payment integration
Instructor:
Hadi Kachmar
23,529 students enrolled
English [Auto]
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 UI
Clear state management in a very detailed manner
Introduce new widgets and how to use them correctly

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 13 hours of content and updated regally 

Requirements:

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

Introduction

1
Who am I? And why this course?
2
App overview
3
Clarify something

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.

4
Get the most benefit of this course
5
What benefits will you get once you finish this course?
6
YouTube channel

https://www.youtube.com/channel/UCTGDYkqUtgCelc6G09LUm6w/videos

7
Flutter helper kit
8
Stripe added, and find the app on playstore

Start Coding

1
Deep explanation of the bottom Bar screen (Added after publishing)
2
Create a notched bottom bar
3
Usage of custom icons
4
Build the user info and settings screen design
5
Code recycling in the user info screen

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

6
Add a switch tile in the user info screen
7
Implement a sliver app-bar
8
Design improvement by adding an animated FloatingActionButton in the User screen
9
Add a Dark/Light theme to the app
10
Save theme state using shared prefs

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.

11
Implement the user empty cart screen design

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.

12
Implement the user Full cart screen design

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.

13
Build the App Bar and checkout section in the cart screen
14
More design improvements in the cart screen
15
Start implementing the products feeds screen. (Create the feeds shape design)

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

16
Implement a GridView in the Feeds screen
17
Implement a staggered Grid View in Feeds screen instead of a normal Grid View
18
More design improvements in the User info screen
19
More changes in the user info screen
20
Add the a badge for the products design in the Feeds screen
21
Align the badge using the positioned widget
22
Add a backdrop layout in the home screen
23
Add a Carousel widget in the Home screen
24
Add a Swiper widget in the Home screen
25
Create the Category widget design

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

26
Create the popular items widget design in the Home screen
27
Introduce the navigation rail widget to Create the brand Inner screen using

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

28
Create the backdrop back-layer design
29
Implement the user empty Wishlist screen design

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

30
Implement the user Full Wishlist screen design

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

31
Full code until now
32
Implement the Product details screen UI
33
Create the Product model class
34
Use dynamic data to show different products in the Feeds screen

State management

1
Why do we need state management?
2
Create the products provider class
3
Code improvement instead of dependency injection

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

4
Display products according to their categories in the home screen category widgt
5
Finalize the categories state management
6
Display products according to their Brand in the home screen Brands widget
7
Display only popular products in the Home screen
8
Finishing up the products details screen
9
Handling view all brands in the Home screen
10
Handle view all popular products in the Home screen

Cart state management

1
Create a cart model class
2
Implement the cart provider class
3
Create add to cart method where users will be able to add products to their cart
4
Using the dependency injection for the cart (passing data through constructor)
5
Show if the product is found in cart and disable add to cart button if found.
6
Use the cart model provider instead of dependency injection

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

7
Allow the user to add to their cart from the popular products widget
8
Allow user to change the products quantity in the cart
9
Allow the user to delete one product from his cart and clear it
10
Show total price in the cart screen
11
Create a dynamic alert dialog method

Wishlist state management

1
Wishlist state management
2
Edit the icon color in the popular products widget

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.

More UI and improvements

1
Add a badge for the Wishlist and the Cart
2
Add an appBar for the Feeds screen
3
Make the products dialogs in the feeds screen
4
Show the product details in the Feeds dialog instead of dummy data
5
Implement the search screen UI and Logic
6
Create a Landing page part 1
7
Create the Landing page part 2
8
Implement the Login screen
9
Add the submit form method to save the form

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

10
Implement the Signup screen
11
Implement the top widget in the sign up screen (Profile preview widget)
12
Allow the user to pick up an image
13
Allow the user to navigate From the landing page to the main screen in the app
14
Implement the Upload a new product screen
15
Allow the user to swipe to the left to navigate Into the upload a product screen

Firebase (Under developement)

1
Connect our app to Firebase

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

2
Allow the users to register using Email and Password part (1)
3
Allow the users to register using Email and Password part (2)
4
Error Handling
5
Allow the users to login
6
Show different screens depending on the users if logged in or not
7
Implement the sign out method
8
Google Sign In
9
Google Sign In error handling
10
What is Firebase Firestore and how does it works?
11
Upload extra user data to the Firebase Firestore

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

12
Upload image to Firebase Storage, And add its link to the Firestore
13
Fetch user info from the Firestore
You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
4.6
4.6 out of 5
145 Ratings

Detailed Rating

Stars 5
99
Stars 4
29
Stars 3
12
Stars 2
4
Stars 1
1
30-Day Money-Back Guarantee

Includes

12 hours on-demand video
2 articles
Full lifetime access
Access on mobile and TV
Certificate of Completion
Flutter with Firebase&Stripe Build shop app from scratch
Price:
$108.98 $79

Community

For Professionals

For Businesses

We support Sales, Marketing, Account Management and CX professionals. Learn new skills. Share your expertise. Connect with experts. Get inspired.

Community

Partnership Opportunities

Layer 1
samcx.com
Logo
Register New Account
Compare items
  • Total (0)
Compare
0