Flutter Fullstack Bootcamp [Pt. 6]: Complete Auth UI & State-Driven Routing with BLoC
Welcome to Part 6 of the Flutter Fullstack Bootcamp! In this intensive session, we build the complete set of user interface screens required for a modern authentication flow. We'll move beyond theory and implement the practical UI for email verification, login, and a full password reset cycle.
The centerpiece of this session is architecting a robust, state-driven navigation system. You will learn how to configure `go_router` to dynamically react to changes in your authentication BLoC, ensuring users are automatically redirected based on their auth state (e.g., from login to home). This is a critical skill for building production-grade Flutter applications.
Finally, we'll scaffold the main home feature, setting up the Bottom Navigation Bar and its corresponding BLoC to prepare for future feature development.
By the end of this video, you will have built:
✅ A complete set of Auth UI screens.
✅ A dynamic routing system that listens to BLoC state changes.
✅ The foundational structure for your app's home screen and navigation.
▶️ Watch Part 5 : • Flutter Fullstack Bootcamp: Part 5 - User ...
▶️ Watch Part 7 : • Flutter Fullstack Bootcamp Part 7: Masteri...
Connect with me:
LinkedIn: linkedin.com/in/general-kihara
Twitter/X: x.com/kiharageneral
#Flutter #FlutterBootcamp #FullstackDevelopment #FlutterBLoC #GoRouter #FlutterUI #StateManagement
Timestamps below
00:00 - Introduction: Part 6 Objectives
04:47 - UI Build: Email Verification Success Screen
36:16 - UI Build: Login Screen with Form Validation
01:28:26 - UI Build: "Forgot Password" Request Screen
01:51:02 - UI Build: "Reset Password" Screen with Token Handling
02:16:08 - Initial Routing: Adding Auth Screens to Go_Router
02:20:33 - UX Improvement: Connecting Login to Password Reset Route
02:21:27 - Core Architecture: Building a State-Driven Router
02:35:00 - (Example) Tying Go_Router Redirects to Auth BLoC State
02:43:17 - UI Component: Creating a Global Loading Indicator Screen
02:45:40 - Feature Scaffolding: Home Screen with Bottom Navigation Bar
02:55:10 - (Example) State Management for the Bottom Navigation Bar using BLoC
03:04:00 - Finalizing Router Configuration & Next Steps
