Full-Stack Health App (Flutter & Django) | Part 2: Flutter Frontend with BLoC & Clean Architecture
In Part 2 of our Full-Stack Health App series, we bring the frontend to life. We'll take the powerful Django REST API built in Part 1 and construct a robust, scalable Flutter application using Clean Architecture principles and the BLoC pattern for state management. This isn't just about UI. You'll learn how to implement the repository pattern, manage dependencies with GetIt and Injectable, handle complex state with BLoC, and build a protected routing system with GoRouter. By the end of this video, you will have a fully functional authentication frontend. 🚀 *Ready to become a top-tier Full-Stack Developer?* This YouTube series is just the beginning. My complete 111-hour Udemy course is a deep dive into building production-ready applications with Flutter and Django. Master advanced concepts, build complex features, and accelerate your career. 👉 Enroll Here: https://www.udemy.com/course/flutter-... Complete source code: https://buymeacoffee.com/general_kiha... --- * Prerequisites:* 🔙 Missed Part 1? Watch it here: • Building a Health App with Flutter & Djang... Complete course Part 1: • Building a Health App with Flutter & Djang... Part 2: • Full-Stack Health App (Flutter & Django) |... Part 3: • Telehealth App Build Part 3: Scalable Djan... Part 4: • Telehealth App Build Part 4: Flutter Clean... Part 5: • Flutter Telehealth App #5: Building the Co... Part 6: • Flutter Telehealth #6: Patient Full Stack ... Part 7: • Telehealth App Build Part 7: Patient Medic... Part 8: • Telehealth App Build Part 8: Django Backen... Part 9: • Flutter Telehealth App #10: Full Feature I... Part 10: • Flutter Telehealth App #10: Full Feature I... Part 11: • Telehealth app #11: Complete Booking Flow ... Part 12: • Telehealth App #12 : Backend Payment Archi... Part 13: • Flutter Healthcare App #13: Stripe Payment... Part 14: • Flutter Healthcare App #14: Building a Dig... Part 15: • Flutter Healthcare App #15: Video Calls wi... *Technologies Covered in this Video:* *Flutter:* Mobile UI Framework *State Management:* BLoC (Events, States, Blocs) *Architecture:* Clean Architecture (Domain, Data, Presentation Layers) *Dependency Injection:* GetIt & Injectable *Networking:* Dio *Routing:* GoRouter (including Auth Guards) *Code Generation:* Build Runner, Freezed --- *TIMESTAMPS / CHAPTERS* 00:00:00 - Introduction & Part 2 Objectives -- 📱 CHAPTER 1: DATA LAYER & REPOSITORY -- 00:03:28 - Implementing the Authentication Repository 00:05:31 - Core Networking: Creating the Network Info Service 00:08:45 - Authentication Repository Implementation (Continued) -- 🧠 CHAPTER 2: DEPENDENCY INJECTION -- 00:56:52 - Setup: GetIt, Injectable & Code Generation Explained 01:05:00 - Configuring the Dependency Injection Container -- ⚡ CHAPTER 3: PRESENTATION LAYER (BLOC) -- 01:11:31 - Structuring the Presentation Layer 01:12:23 - Defining Authentication Events (AuthEvents) 01:25:36 - Defining Authentication States (AuthStates) 01:33:24 - Implementing the Authentication BLoC (AuthBloc) 02:20:00 - Code Generation with Build Runner & Error Resolution -- 🎨 CHAPTER 4: CORE APP & UI SETUP -- 02:33:25 - Scaffolding the Register Page 02:35:11 - Refactoring main.dart & Global App Setup 02:45:00 - Defining App Theme: Colors, Dimensions & Text Styles 03:10:00 - App Routing with GoRouter: Setup & Route Names 03:21:52 - Register Page: Widget Lifecycle with WidgetsBindingObserver -- 🧱 CHAPTER 5: BUILDING REUSABLE WIDGETS -- 03:42:44 - Shared Widget: Loading Overlay 03:51:34 - Shared Widget: Authentication Header 04:20:13 - Shared Widget: Custom Text Field 05:52:56 - Shared Widget: Custom Button -- 🖥️ CHAPTER 6: BUILDING THE UI PAGES -- 04:16:21 - Building the Register Page UI (Continued) 06:17:14 - Building the Login Page UI 06:50:20 - Integrating the Login Page into the App Router 07:48:18 - Building the Email Verification Page UI -- 🛡️ CHAPTER 7: ADVANCED ROUTING & FINALIZATION -- 06:54:49 - App Initialization Logic 07:02:14 - Implementing a Router Auth Guard for Protected Routes 08:44:40 - Final Application Testing & Debugging --- #Flutter #Django #FullStack #BLoC #CleanArchitecture #SoftwareDevelopment #ProgrammingTutorial Connect with me and get help: 🔗 GitHub: https://github.com/kiharageneral 🔗 LinkedIn: / general-kihara 🔗 Website: https://nexusml-tech-kkut.onrender.com/ 🔗 X/Twitter: https://x.com/kiharageneral 🔔 Subscribe for more in-depth, project-based tutorials: / @nexusml-tech #Flutter #Django #MachineLearning
