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

About 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

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

يتضمن التطبيق واجهة خلفية بلغة 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