Flutter Online Learning Course App Using BLoC

Description

This is an online learning course app tutorial using BLoC state management. Here, we focus how to build a Flutter app for selling course with Stripe payment and Laravel as backend with Restful API. This 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. 

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

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

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


Requirements

  • The resources on this site are only for downloaders to learn IT programming and development technology. Please abide by national laws and regulations and are strictly prohibited from being used for illegal purposes.
  • If it is for commercial use, please purchase the genuine version.
  • If the source code of this site infringes upon your rights, please contact us by email to delete it and we will deal with it in time!

Comment

Add Reviews & Rate

What is it like to shop code?