Rivaan Ranawat demonstrates how to build a full-stack Flutter application using Clean Architecture, BLoC, and Supabase.
In this 7 hour tutorial, we will learn about Clean Architecture in Flutter by building a full stack application. We will learn about SOLID Principles and its usage in Clean Architecture, Bloc & Cubit State Management, Supabase, get_it and the need for dependency injection.
Prerequisites: Dart & Flutter Basics
Flutter version: 3.19.1
Code Reviewer - github.com/NonymousMorlock
Clean Architecture Image Credits: @ResoCoder
📌 Discord Server - discord.gg/Q8Rx8YWFVF
Source Code (MAKE IT PUBLIC) - github.com/RivaanRanawat/blog-app-clean-architecture
Resources:
Color Pallete - github.com/RivaanRanawat/blog-app-clean-architecture/blob/ma…
Build a User Management App Supabase Blog - supabase.com/docs/guides/getting-started/tutorials/with-flut…
Blog App Design Dribbble - dribbble.com/shots/23505046-Blog-app
Timestamps
() Introduction
() Creating Project
() App Flow
() Components of Clean Architecture - Data, Domain & Presentation Layer
() SOLID Principles + Clean Architecture
() Flutter Clean Architecture Folder Structure
() Signup Page UI
() Form for Signup Page
() Login Page UI & Form
() Domain Layer - AuthRepository
() Supabase Setup
() Data Layer - Auth Remote DataSource (For Sign Up)
() Data Layer - AuthRepository Implementation (For Sign Up)
() SignUp UseCase
() Auth Bloc (State Management) (For Sign Up)
() Connecting Auth Bloc to UI
() Again, Why Depend on Interface not Implementation?
() SignUp Feature Manual Testing
() Dependency Injection with get_it
() Creating Postgres Table & Function Trigger - Profiles
() User Entity & User Model
() Displaying Loading, Failure States in UI
() Same things like before but with Login as feature
() Clean Architecture + SOLID Principles Recap w/ Small Refactoring
() Persisting Auth State with Flutter & Supabase
() App-wide User
() Refactoring in AuthBloc - CatchAll Loading State
() Clean Architecture For Auth Done (Stop watching if you want)
() What’s Next? | Blog Feature | Blog Page AppBar
() Add New Blog Page UI
() Flutter Pick Image
() Supabase Create Table - Blogs
() Uploading Blog - BlogModel, Blog Entity, BlogDataSource & BlogDataSourceImpl
() Uploading Blog - Rest of the Clean Architecture + DI + Form
() Displaying Blogs - Clean Architecture
() Blog Card UI
() Calculate Reading Time Dynamically (Regex) + Changing Card Color
() Blog Viewer Page
() Date Formatting using Intl + Scrollbar
() Checking Internet Connection in Flutter
() Internet Connection in Auth + Supabase User Offline + DI
() Flutter Local Storage | Hive
() Bugs & Code Refactoring
() When not to use Clean Arc
Why it's here
4 people recommend this
What people say. Recommended as a high-quality, easy-to-follow tutorial for learning Clean Architecture and BLoC state management in Flutter.
P
u/Pika-Chew5879in r/FlutterDev • Recommends
On “New to Flutter, built an app, confused about advanced stuff – help!”
…y with `riverpod_annotations` and `riverpod_generator` doing most of the boilerplate for you.
Also, don't overlook app architecture patterns. I highly recommend learning one production-level pattern. **MVVM** is my favorite and is also the officially recommended one by the Flutter team.
# Some resources that helped me:
* Dart & Flutter Course: [video
* MVVM Architecture: [video
* Riverpod: [video
* Clean Architecture: [video
* BLoC: [video
* Flutter Cookbook: https://docs.flutter.dev/cookbook
* Flutter Widget Catalog: https://docs.flutter.dev/ui/widgets
Hope this helps — and best of luck on your journey!…
Here you go bud
link to this video
Alternatively just youtube 'Rivaan Ranawat Flutter' and you'll get some good easy to follow, high quality knowledge videos.
