Flutter Clean Architecture Full Course For Beginners - Bloc, Supabase, Hive, GetIt

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

Clean Architecture Image Credits: @ResoCoder

Resources:

Timestamps
(00:00:00) Introduction
(00:01:10) Creating Project
(00:02:38) App Flow
(00:04:26) Components of Clean Architecture - Data, Domain & Presentation Layer
(00:14:12) SOLID Principles + Clean Architecture
(00:17:15) Flutter Clean Architecture Folder Structure
(00:19:37) Signup Page UI
(00:50:28) Form for Signup Page
(00:57:58) Login Page UI & Form
(01:06:40) Domain Layer - AuthRepository
(01:16:04) Supabase Setup
(01:22:05) Data Layer - Auth Remote DataSource (For Sign Up)
(01:35:06) Data Layer - AuthRepository Implementation (For Sign Up)
(01:40:25) SignUp UseCase
(01:49:48) Auth Bloc (State Management) (For Sign Up)
(02:00:34) Connecting Auth Bloc to UI
(02:06:57) Again, Why Depend on Interface not Implementation?
(02:08:17) SignUp Feature Manual Testing
(02:09:52) Dependency Injection with get_it
(02:24:16) Creating Postgres Table & Function Trigger - Profiles
(02:39:20) User Entity & User Model
(02:49:47) Displaying Loading, Failure States in UI
(02:55:33) Same things like before but with Login as feature
(03:15:22) Clean Architecture + SOLID Principles Recap w/ Small Refactoring
(03:25:49) Persisting Auth State with Flutter & Supabase
(03:46:52) App-wide User
(04:00:45) Refactoring in AuthBloc - CatchAll Loading State
(04:02:53) Clean Architecture For Auth Done (Stop watching if you want)
(04:03:22) What’s Next? | Blog Feature | Blog Page AppBar
(04:09:16) Add New Blog Page UI
(04:28:30) Flutter Pick Image
(04:39:31) Supabase Create Table - Blogs
(04:48:11) Uploading Blog - BlogModel, Blog Entity, BlogDataSource & BlogDataSourceImpl
(05:04:15) Uploading Blog - Rest of the Clean Architecture + DI + Form
(05:34:20) Displaying Blogs - Clean Architecture
(05:56:18) Blog Card UI
(06:04:31) Calculate Reading Time Dynamically (Regex) + Changing Card Color
(06:15:14) Blog Viewer Page
(06:23:30) Date Formatting using Intl + Scrollbar
(06:26:46) Checking Internet Connection in Flutter
(06:30:20) Internet Connection in Auth + Supabase User Offline + DI
(06:36:46) Flutter Local Storage | Hive
(06:53:23) Bugs & Code Refactoring
(07:04:13) When not to use Clean Architecture?
(07:04:39) Conclusion

Connect With Me Here:

[jeromestsauver]

Rivaan you have a gift for teaching! I rarely hang in this long on a course like this but I'm 4 hours in and still going!
The concept of the domain and the data layer sharing a repository through abstract class interfaces finally clicked for me when watching this. Many thanks!

[DEVKushal-tb]

I was annoyed that you weren't posting any new videos, but now that you have, I'm glad.

[KhanAdnann]

Hey Rivaan a big update from my side. Received an offer for flutter developer. I've learnt a lot from your videos. Thanks man.

[nullcodeer]

Hey Rivaan, I just wanted to drop in and say a massive thank you for your amazing Flutter and BLoC tutorial. It was incredibly well-structured and insightful, making the learning process so much smoother and enjoyable. Your dedication to sharing knowledge is truly appreciated!

Also, I have a small request. Could you consider creating a tutorial on building a food delivery app using Google Maps with live ride-sharing features in Flutter and BLoC? I believe it would be a fantastic addition to your tutorials, and many of us are eager to learn how to integrate these advanced functionalities. Thanks again for your great work! 🎉

[MUSABEYTEKIN-jhpu]

Your explanation is really simple and understandable. One of the best training videos I've ever watched. Greetings from Turkey.

[KhanAdnann]

I know, only Rivaan can make me understand things like these. ♥

[vladimirlysenko]

Hello Rivaan, thank you very much.

Yeaah, I've completed 7 hours. It took me a few days to go through the whole video. Thank you for the simple explanation of this complex concept

[kareemmuhamedz]

7:04:58. Finally done! I hope to add some awesome features to this app in the future. Of course, I will do this at another time, and when I do, I will share my repo here for everyone.
thanks Rivaan. ❤✅

[yasserhy]

I know that most dart developers will use the "imp" as a keyword for the implementation, but coming from a C# background, I prefer using the "I" for the interface and the normal name for the implementation. I found it very helpful while following along with this course. So, the IAuthRemoteDataSources will be for the interface and the AuthRemoteDataSource will be for the implementation, as an example

[dontdoit]

How are you not a multi-millionaire when you're capable of building these apps front to back? Great work. Thank you so much.

[claudedaiga]

Thank you very much Rivaan for sharing this mater tutorial on using flutter bloc, and also explaining the clean architecture.

[VaibhavC-cobi]

Man you really are amazing I was waiting for this video but I haven't watched it yet😅😅😅

I know your flutter tutorials are all awesome.

[iamkartiknayak]

You are doing so much for the Flutter community brother, Thank you dil se ❤️

[sangameshkyatappanavar]

Even though it's a bit challenging for me to get my head around this, after your such an amazing explanation, I should just practice it more to get a knack of it! but, man, you're truly done a great job in explaining every bit soo clearly! thank you soo much for this amazing tutorial bro! For real! Thanks a bunch! 💗😊

[tanmaymaheshwari]

I am an hour into the project and I cannot appreciate how well you have explained all the little things in the UI. Hoping the entire project goes like this!

[damarsatriabuana]

i like your explanation, detail oriented and not boring anymore. thank you for providing this quality free tutorial

[kacchan]

man I had been looking for a good Clean Architecture video for 3 days now and see what I got now. Man you have posted it at a great time.

[MuhammadTalha-uihc]

Excellent Rivaan I have just completed you bloc tutorial and you have so good in your explanation that I can't even describe the best part of your explanation is that you explain even basic things of dart ThankYOu so much for these tutorials

[MuntasirHossen-ws]

An excellent tutorial for clean architecture for flutter I have ever found in youtube ❤❤❤. Now completed it.

[Boxheadsllc]

Great tutorial! I love tutorials that go straight to code and code quickly! Thanks.