Flutter Shop App | State Management BLoC | Backend
Loại khoá học: Mobile Development
iOS and Android Flutter Online Store for Course Selling
Mô tả
This is a online learning course app tutorial using BLoC state management. State management and routing both have been done using BLoC.
It consists for Laravel backend with Firebase for basic social media login. Most of the API are built using Laravel. The backend contains multi admin( super admin panel and teachers panel). It will have part 1 & 2. Students need to buy both part separately. In part 2, we will partially cover TDD With BLoC
App Features
onboard screen with three photos
email login Firebase verification
social media login Google, Apple and Facebook
viewing course
play video course where you will see how to play and stop videos
upload course from backend
view multiple teachers course
buy course on the front end
step by step stripe payment
super admin panel
teacher admin panel
chatting feature using Firebase
This app covers Flutter for very beginners to advanced learners. We start from very simple ui like drawing text to complex layout.
We also built reusable widget to reduce code amount. So at the end of this tutorial you learn how to build simple to complex reusable flutter widgets. Eventually we will master Firebase chatting and building API and interact with the servers with three ways.
State Management
We used BLoC to manage state and as well for routing.
Backend
We used Laravel framework for building backend and API. Backend has multi user privileges. It means there are super admins and sub admins. Teachers accounts are sub admin. Super admin can observe and assign roles to the teachers or the sub admins.
Firebase
Firebase is used for email login and third party login like Google, Facebook and Apple.
Version
PHP >= 7.4
Laravel > 8.8
Flutter > 3.3
Bạn sẽ học được gì
How to build a mobile app step by step using Flutter for iOS and Android
Connect your app with Firebase and Laravel Backend
Learn to build API for you app
Learn to use BLoC state management
Yêu cầu
- Make sure you have Flutter environment set up correctly with Android Studio or VS Code
Nội dung khoá học
30 sections
Introduction
08:29
Create the project and up and running
03:16
Understand the project and state management
07:17
Create bloc app states and events
05:24
Create blocs for app and understand the mechanism
07:09
Dependency inject and use blocs
05:09
Importance of BlocBuilder widget
03:58
More about bloc and next part
08:42
Welcome screen and stack widget ui part 1
08:22
Welcome screen and column layout ui part 2
03:49
Welcome screen and work on the next button ui part 3
07:40
Welcome screen and reusable widget ui part 4
06:51
Welcome screen and show dots indicator ui part 5
05:09
Welcome screen page view and dots indicator ui part 6
12:18
Welcome screen and work size indicator part 7
01:03
Welcome screen and show image ui part 8
07:08
Welcome screen and page swipe button click ui part 8
05:26
MultiBlocProviders part 1
05:40
MultiBlocProviders and heroTag part 2
01:50
MultiBlocProvider and lazy bloc loading part 3
04:38
MultiBlocProviders and routing with pushNamedAndRemoveUntil part 4
04:27
Sign in screen and app bar part 1
09:52
Sign in screen and social icon buttons part 2
06:36
Sign in screen and reusable buttons part 3
03:53
Sign in screen and reusable text part 4
06:48
Sign in screen and text field part 5
05:06
Sign in screen and text field part 6
04:29
Sign in screen and text field part 7
07:24
Sign in screen and text field part 8
05:31
Sign in screen forgot link part 9
04:28
Sign in screen and login and registration button part 10
07:19
Refactor code part 1
12:42
Refactor code part 2
04:30
Refactor code part 3
01:17
Sign in bloc and states part 1
05:00
Sign in bloc and events part 2
02:49
Sign in bloc and create blocs part 3
07:19
Sign in bloc and understand event handler part 4
07:14
Sign in bloc and understand emit function part 5
04:38
Sign in bloc and event handler part 6
02:15
Sign in controller and get bloc context and state part 1
04:56
Sign in controller and install plugin and firebase auth part 2
04:40
Sign in controller and firebase auth part 3
04:36
Sign in controller and firebase project creating part 4
09:57
Sign in controller and iOS settings part 5
04:56
Sign in controller and text field value part 6
12:41
Sign in controller and passing function to widgets part 7
05:47
Sign in controller and test with data part 8
03:19
Sign in controller and try on Android part 9
02:37
Sign in controller and toast widget part 10
09:00
Sign in controller and separate BlocProviders part 11
06:31
Register screen and route part 1
05:00
Register screen and do ui part 2
05:10
Register screen and do ui part 3
04:58
Register screen and ui app bar theme part 4.mp4
06:38
Register screen and register states part 5
04:06
Register screen and understand immutable classes part 6
04:47
Register screen and understand copyWith method part 7
05:43
Register screen and create copyWith method part 8
06:32
Register screen and register blocs part 9
04:36
Register screen and optional named parameter for blocs part 10
07:26
Register screen and finish the blocs part 11
05:40
Register screen and inject bloc part 12
06:24
Register screen and deeper understanding copyWith method part 13
12:24
Register controller and part 1
06:52
Register controller and part 2
05:21
Welcome screen and reusable widget ui part 4
06:51
Register controller and part 3
05:30
Application screen and ui part 1
06:05
Application screen and ui bottom navigation part 2
04:59
Application screen and ui bottom navigation part 3
06:17
Application screen and ui bottom navigation part 4
07:26
Application screen and ui bottom navigation part 5
05:35
Route section and understand bloc and routes part 1
04:52
Route section and understand PageEntity class part 2
06:28
Route section and create list of routes with provider part 3
08:14
Route section and inject bloc part 4
07:20
Route section and onGenerateRoute part 5
06:09
Route section and onGenerateRoute part 6
07:43
Route section and debug route part 7
05:17
Route section and organize files part 8
03:50
Route section and app states part 9
03:38
Route section and app events part 10
03:25
Route section and bloc super constructor part 11
03:58
Route section and set up application route part 12
06:09
Route section and application page part 13
05:56
Route screen and application widget bottom navigation bar part 14
02:50
SharedPreferences and singleton instance part 1
06:30
SharedPreferences and setBool part 2
05:59
SharedPreferences and getBool part 3
05:36
SharedPreferences and remember the welcome screen part 4
07:31
Home page and app bar part 1
06:32
Home page and app bar part 2
05:28
Home page and title text part 3
04:11
SharedPreferences and set user profile string part 5
05:13
Home page and sub title text part 4
01:41
SharedPreferences and retreive user profile string part 6
05:53
Home page and reusable text widget part 5
07:28
Home page and search field part 6
08:04
Home page and search button part 7
04:24
Home page and designSize for adaptive screen part 8
07:40
Home page and slider part 9
07:28
Home page and reusable slider widget part 10
06:08
Home page and dots indicator part 11
03:16
Home page and states part 12
05:36
Home page and events and blocs injection part 13
05:50
Home page and dots with states part 14
05:19
Home page and section title text part 15
05:37
Home page and reusable section title part 16
05:32
Home page and course button part 17
07:46
Home page and course reusable button part 18
05:19
Home page and course buttons refactor part 19
07:05
Home page and CustomScrollView part 20
05:07
Home page and SliverGrid and Delegate part 21
05:08
Home page and understanding delegate and gridDelegate part 22
06:11
Home page and grid text part 23
05:03
Home page and grid text part 24
06:50
Profile page and create page part 1
05:03
Profile page and app bar part 2
05:16
Profile page and icon and edit button part 3
07:15
Profile page and listview buttons part 4
06:46
Profile page and dynamic listview part 5
07:43
Settings page folders
04:01
Settings page and create states, events and blocs part 6
07:29
Settings page and onTap event part 7
04:56
Settings page and understanding callback function part 8
09:53
Settings page and app bar part 9
05:16
Settings page and dialogue box part 10
06:30
Settings page and remove user data on logout part 11
09:06
Settings page and code refactor part 12
05:28
Settings page and application state reset part 13
04:25
Settings page and code refactor part 14
05:16
Settings page and code refactor part 15
04:55
Windows 11 + Xampp + Laravel
08:44
Backend and install laravel part 2
03:56
Windows laravel admin package set up part 3
04:54
Backend and remove error part 4
04:40
Backend and install sanctum package part 5
02:16
Backend and dummy register and login with sanctum part 6
10:53
Backend build our own login api part 7
06:37
Backend and build our own api login part 8
10:29
Backend and modify users table part 9
05:50
Backend and add more database fields part 10
07:53
Backend and work on access token part 11
04:07
Backend and finish building our login api part 12
04:25
Home Page preview
03:14
Front end api repos and save google login data part 1
05:05
Front end and login request entity part 2
06:28
Front end and work on the end point part 3
04:14
Front end and create HttpUtil part 4
06:39
Front end and make a call to the api part 5
07:11
Front end and hit end point part 6
09:32
Front end and status code, refactor code and server url part 7
08:42
Front end and more debugging on the api and database part 8.mp4
10:16
Front end and refactor code part 9
07:28
Front end and finalize login api part 10
05:31
Front and back end understand the complete flow
24:29
Front end and get user profile part 11
08:40
Front end and show name and image part 12
07:02
Front end and fix avatar url part 13
10:53
Front end and fix null value issues part 14
11:45
Build the back end ui part 1
06:32
Backend and work on ui grid view part 2
16:56
Backend and understand migration part 3
06:55
Backend and do migrations part 4
05:35
Backend and CourseTypeController detail and index method part 5
07:45
Backend and create draggable menu category part 6
11:21
Backend and better understanding for grid, show and detail part 7
14:16
Backend and create migration for course part 8
07:17
Backend and create CourseController part 9
02:38
Backend and update CourseController form method part 10
08:06
Backend and work on the form method part 11
07:14
Backend and finish the form method part 12
09:08
Backend and upload course and Windows and Mac settings part 13
08:36
Backend and laravel admin command line interface part 14
06:26
Backend and create a new CourseController part 15
05:45
Backend and finish working on CourseController part 16
07:25
Backend and show image in the row part 17
03:58
Backend and understand api section part 18
05:52
Backend and changes in RouteServiceProvider part 19
08:50
Backend and finish work on courseList method part 20
06:55
Backend and understand select () and get() differences part 21
03:17
Backend and access the api from the frontend part 22
18:19
Backend and understand the api security part 23
03:45
Complete Home Page With Diagram
00:08
Frontend and formatting data part 1
10:44
Frontend and backend error handling part 2
09:41
Home page and finish states, events and blocs for Home page part 3
11:13
Home page and show data and pictures from backend using bloc part 4
09:53
Home page and prevent unnecessary call part 5
05:00
Home Page and check context part 6
02:49
Home page and change in AppBlocs part 7
01:51
Home page and HomePageDots part 8
02:01
Home page and learn about BlocObserver part 9
13:33
Detail page and create blocs and routes part 1
10:19
Detail page and pass id as arguments part 2
09:40
Detail page and singleton class part 3
09:58
Detail page and use singleton class and prevent unnecessary api call part 4
13:21
Detail page and build app bar part 5
04:45
Detail page and show image part 6
08:56
Detail page and show author button part 7
11:22
Detail page and build reusable widgets part 8
06:53
Detail page and draw text and button part 9
11:29
Detail page and listview items part 10
10:46
Detail page and show lesson list part 11
24:12
Backend build course detail api and test with postman part 1
11:05
Backend and course detail api part 2
03:54
Preview of the payment controller
12:02
Back end and create paycontroller part 3
08:20
Backend and work on checkOut end point part 4
08:10
Backend and checkOut with query part 5
06:27
Backend and build order model part 6
16:15
Backend and finish checkOut api part 7
11:51
Course detail controller part 1
21:53
Front end and work on detail course bloc and ui part 2
26:57
Front end bloc check null value part 3
05:41
Front end and show dynamic values for course part 4
13:20
Front end and goBuy button and stripe url part 5
18:21
Front end and paywebview part 1
05:54
Front end and paywebview blocs part 2
07:05
Front end and paywebview part 3
14:41
Front end and show webview with bloc part 5
12:27
Front end and reusable app bar part 6
04:53
Front end and back end web hook part 7
20:58
Front end and back end and create more routes part 8
13:07
Front end and back end done with payment part 9
21:45
Front end and deal with status code 400 part 10
08:11
Front and get callback message part 11
07:30
Front end and pay and repay issue solved part 12
03:04
Backend and show orders part 1
08:51
Backend and show orders with buyer part 2
08:16
Backend and show orders with status part 3
05:37
Backend and lesson migrations part 1
07:39
Backend and lesson controller and form method part 2
07:24
Backend and lesson controller and upload part 3
14:13
Backend and set and get video attributes part 4
07:30
Backend and done uploading medias part 5
12:05
Backend and build lesson end points part 6
17:34
Backend and work on the json format part 7
10:09
Backend and understand the form submission issue part 8
19:17
Backend and form submission and saving method part 9
05:51
Backend and understand the saving method and data processing part 10
15:23
Backend and finish form editing part 11
12:03
Lesson data build api end point, build blocs
18:41
Lesson data load and trigger events
20:10
Frontend and load lesson data to the UI part 3
16:08
Frontend and refresh indicator part 4
05:21
Frontend and lesson detail blocs part 5
15:13
Frontend and build lesson controller part 6
14:15
Frontend and set up routes, blocs and ui part 7
11:26
Frontend and work on video player part 8
21:17
Frontend and lesson video player understanding part 9
08:35
Frontend and lesson play video part 10
18:55
Frontend and play video with buttons part 11
09:41
Frontend and iOS play video issue part 12
08:30
Frontend and draw list of videos part 13
21:41
Frontend and play on button click part 14
05:51
Frontend lesson detail and code refactor part 15
04:07
Frontend and lesson detail video buttons part 16
05:40
Frontend and lesson detail video index state part 17
16:52
Frontend and auto play video and show thumbnail of video 18
12:26
Correct image path for lesson thumbnails part 19
06:55
Show keyboard and hide
02:18
Google sign in code set up
15:06
Implement forgot password
05:34
Complete code part 1
03:38
Viết Bình Luận
Khoá học liên quan
Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!
Get khoá học giá rẻ ngay trước khi bị fix.
Đánh giá của học viên
Bình luận khách hàng