Flutter Shop App | State Management BLoC | Backend [2024]

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

App Features

1. onboard screen with three photos

2. email login Firebase verification

3. social media login Google, Apple and Facebook

4. viewing course

5. play video course where you will see how to play and stop videos

6. upload course from backend

7. view multiple teachers course

8. buy course on the front end

9. step by step stripe payment

10. super admin panel

11. teacher admin panel

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

1. PHP >= 7.4

2. Laravel > 8.8

3. Flutter > 3.3

يتضمن التطبيق واجهة خلفية بلغة Laravel مع Firebase لتسجيل الدخول الاجتماعي الأساسي. معظم الـ API تم بناؤها باستخدام Laravel. الواجهة الخلفية تحتوي على عدة مسؤولين (لوحة تحكم للمسؤول العام ولوحة للمدرسين). يتكون التطبيق من جزئين يحتاج الطلاب لشرائهما بشكل منفصل. في الجزء الثاني، سنغطي جزئياً ميزة الدردشة.

ميزات التطبيق

• شاشة بدء تشغيل مع ثلاث صور

• تسجيل الدخول عبر البريد الإلكتروني مع تحقق Firebase

• تسجيل الدخول الاجتماعي عبر Google، Apple، وFacebook

• عرض الدورات

• تشغيل فيديو الدورات مع ميزات تشغيل وإيقاف الفيديو

• تحميل الدورات من الواجهة الخلفية

• عرض دورات مدرسين متعددين

• شراء الدورات من الواجهة الأمامية

• دفع خطوة بخطوة باستخدام Stripe

• لوحة تحكم للمسؤول العام

• لوحة تحكم للمدرسين

• ميزة الدردشة باستخدام Firebase

يغطي هذا التطبيق Flutter للمبتدئين وحتى المتعلمين المتقدمين. نبدأ من واجهات بسيطة مثل كتابة النصوص إلى تخطيطات معقدة.

لقد قمنا أيضاً ببناء عناصر واجهة مستخدم قابلة لإعادة الاستخدام لتقليل كمية الأكواد. في نهاية هذا الدليل ستتعلم كيفية بناء عناصر واجهة مستخدم Flutter بسيطة ومعقدة قابلة لإعادة الاستخدام. سنتمكن في النهاية من إتقان ميزة الدردشة باستخدام Firebase وبناء API والتفاعل مع الخوادم بثلاث طرق.

إدارة الحالة

استخدمنا BLoC لإدارة الحالة وكذلك للتوجيه.

الواجهة الخلفية

استخدمنا إطار عمل Laravel لبناء الواجهة الخلفية والـ API. تحتوي الواجهة الخلفية على امتيازات متعددة للمستخدمين. يعني ذلك وجود مسؤولين عامين ومسؤولين فرعيين. حسابات المدرسين هي مسؤولين فرعيين. يمكن للمسؤول العام مراقبة وتعيين الأدوار للمدرسين أو المسؤولين الفرعيين.

Firebase

تم استخدام Firebase لتسجيل الدخول بالبريد الإلكتروني وتسجيل الدخول من خلال طرف ثالث مثل Google وFacebook وApple.

الإصدارات المطلوبة

• PHP >= 7.4

• Laravel > 8.8

• Flutter > 3.3