Flutter Online Learning Course App | BLoC State Management

This is an online learning course app tutorial using BLoC state management. In this course, we focus how to build a Flutter app for selling course with Stripe payment and Laravel as backend with Restful API. This course also covers teacher's app. So you will be building two apps. State management and routing both have been done using BLoC.

It also contains extra chatting app for teachers.

It consists of 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) including teacher's app for chatting. On Udemy it has two parts and students have to take both course to complete it. 

Both parts have to be bought separately.

Take the BLoC Course on Udemy Part 1

Take the BLoC Course on Udemy Part 2

Get the source code. The below source code includes admin panel, teacher's panel and teacher chat app.

Buymecoffee Link

App Features

1. onboard screen
2. email login
3. social media login
4. viewing course
5. play video course
6. upload course from backend
7. view multiple teachers couse
8. buy course on the front end
9. stripe payment
10. super admin panel
11. teacher admin panel
12. chat in user end
13. teacher's chat app( a different one)

State Management

We used BLoC to manage state and as well for routing. If you follow the video tutorial you learn about BLoC events, states, abstract class, constructor, on() method, emit() function, trigger events, adding events, BlocObserver, different way of writting on events, why we need abstract class, how to create states, different classes, how to do debugging and networking using BLoC and Cubit.

This tutorial on Udemy course has partly used Cubit for state management apart from BLoC.

Part two of this course includes clean architecture with TDD and BLoC and Cubit. Clean architecture is extremly important for large scale app development.

Backend

We used Laravel framework for building backend and API. Backend has multi user previliges. 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.

With this course, you will learn how to build token for your api and how to do authorization of user access using Sanctum package of Laravel.

We used Laravel eloquent to work with our database from controller. 

By the end of this course, you will master

1. Laravel basics and MVC
2. Laravel admin panel (CRUD)
3. Laravel sanctum 
4. Laravel restful api

Payment

This course put a dedicated session to talk about building payment api using Stripe. We also explained in detail using picture to make it understand how payment works. 

To get the watermark free picture, you may take the course or buy the picture of psd version for one dollar only on buymeacoffe.

Firebase

Firebase is used for email login and third party login like Google, Facebook and Apple. We also used Firebase for storing chat information of users. All the chat messages are also saved in Firebase.

Version

1. PHP > 8.0
2. Laravel > 10
3. Flutter > 3.0

Deployment guide backend

1. Download the code from buymecoffee

2. First make sure you have xampp server installed. If not click on the link install it.

3. Make sure you drag and drop laravel backend inside htdocs.

4. Make sure you have create a new database and upload the mysql database from the downloaded folder

5. After that you need to update your .env file according to your database name and your user name and password

6. Then do the following commands

1. php artisan config:clear
2. php artisan cache:clear
3. php artisan route:clear
4. php artisan serve

7. With the above command you should be able to run server from localhost. In general you would be able to access it using http://127.0.0.1:8000

8. You would be able to access the admin panel by http://127.0.0.1:8000/admin username: admin, password: admin or 123456

9. Then you need to make sure you have Agora configuration setup correctly

Frontend deployment

1. First do flutter clean and flutter pub get

2. Then make sure you change the package name of your app

3. Then you need to do flutter firebase configuration in the terminal 

4. Then generate SHA1 key for the app

5. Then you need to put your local host address in constants.dart file 

SERVER_API_URL for this variable

6. In general for iOS localhost address default one is fine. For android it's 10.0.2.2, and make sure you have put the port number correctly. It's 8000 in general.

Teacher's panel

Home Page and Code

Here in the picture you may get the idea how our home page is build. Clear idea of different components and how they are organized. This is a basic flow of the widget.

Server Side diagram of the API

Here, you get the complete picture how our request and response works in terms of authentication with sanctum. You also see the steps how each steps occurs in terms of client and server.

Resources to follow the app

1. Download the images and common folder

2. Color file

The color file. Create a file name colors.dart inside lib/common/values/ folder and save it. If you don't have folder values, then create one

import 'dart:ui';

class AppColors {
  
  /// white background
  static const Color primaryBackground = Color.fromARGB(255, 255, 255, 255);
  /// grey background
  static const Color primarySecondaryBackground = Color.fromARGB(255, 247, 247, 249);
  /// main widget color blue
  static const Color primaryElement = Color.fromARGB(255, 61, 61, 216);
  /// main text color black
  static const Color primaryText = Color.fromARGB(255, 0, 0, 0);
  // video background color
  static const Color primary_bg = Color.fromARGB(210, 32, 47, 62);
  /// main widget text color white
  static const Color primaryElementText = Color.fromARGB(255, 255, 255, 255);
  // main widget text color grey
  static const Color primarySecondaryElementText = Color.fromARGB(255, 102, 102, 102);
  // main widget third color grey
  static const Color primaryThreeElementText = Color.fromARGB(255, 170, 170, 170);

  static const Color primaryFourElementText = Color.fromARGB(255, 204, 204, 204);
  //state color
  static const Color primaryElementStatus = Color.fromARGB(255, 88, 174, 127);

  static const Color primaryElementBg = Color.fromARGB(255, 238, 121, 99);


}