Recently I'm thought about what is good architecture for flutter project. And I met this channel and this Clean Architecture is blowing my mind. This video has concrete example so I can learn the folder structure and concepts of clean architecture. Thanks you from bottom of my hearts❤. From S.Korea as Flutter position developer.
Go to video for one who wants to learn Clean Architecture with a real world example. Definitely a good watch & bookmark for me for Future references. Thanks a lot for the valuable content. I had to pause and watch to understand, the content is very intense.
Great video, exactly what I needed to start this new "clean code" journey and also thanks for providing a link to that three-part series of articles in the description. I definitely need to follow up by reading them too since I struggled a bit with following the fast paced monotone computer generated voice.
Nice video but you should not have done those explicit correction on generated file in minutes 28:00 , there was a work around. I believe that was missed in this video. It is as follows: since the response from api is not a json array but json object; we need to parse that json object. This can be achieved by following three simple steps in their respective file: Step no 1: In article.dart file inside folder models ######## add another class named ArticleResponseModel like below and ArticleModel as before: class ArticleResponseModel { List articles; ArticleResponseModel({required this.articles}); factory ArticleResponseModel.fromJson(Map articleResponseData) { return ArticleResponseModel( articles: ((articleResponseData['articles'] ?? []) as List) .map((dynamic article) => ArticleModel.fromJson(article)) .toList()); } } class ArticleModel extends ArticleEntity { const ArticleModel({ int? id, String? author, String? title, String? description, String? url, String? urlToImage, String? publishedAt, String? content, }) : super( id: id, author: author, title: title, description: description, url: url, urlToImage: urlToImage, publishedAt: publishedAt, content: content, ); factory ArticleModel.fromJson(Map articleModelData) { return ArticleModel( author: articleModelData['author'] ?? "", title: articleModelData['title'] ?? "", description: articleModelData['description'] ?? "", url: articleModelData['url'] ?? "", urlToImage: articleModelData['urlToImage'] ?? "", publishedAt: articleModelData['publishedAt'] ?? "", content: articleModelData['content'] ?? "", ); } } Step no 2: And news_api_service.dart, new get method function looks like below ######## @GET('/top-headlines') Future getNewsArticles({ @Query("apiKey") String ? apiKey, @Query("country") String ? country, @Query("category") String ? category, }); Step no 3: Change ArticleRepositoryImpl as below: ######## class ArticleRepositoryImpl implements ArticleRepository { final NewsApiService _newsApiService; ArticleRepositoryImpl(this._newsApiService); @override Future getNewsArticle() async { try { final httpResponse = await _newsApiService.getNewsArticles( apiKey: newsAPIKey, country: countryQuery, category: categoryQuery); if (httpResponse.response.statusCode == HttpStatus.ok) { // here you need to return httpResponse.data.articles instead of httpResponse.data return DataSuccess(httpResponse.data.articles); } else { return DataFailed(DioError( error: httpResponse.response.statusMessage, response: httpResponse.response, type: DioErrorType.badResponse, requestOptions: httpResponse.response.requestOptions)); } } on DioError catch (err) { return DataFailed(err); } } } easy peasy lemon squeezy
Great video! Well explained and following KISS principle. I would love to get more in depth videos and something that is not quite out there yet (at least an updated version), something like an authentication feature using OAuth or Firebase Auth alongside a simple routing system that redirects you the right presentation page depending if you are signed in or not in the meanwhile taking advantage of deep link. I think this makes a lot of sense since we are using a Clean Architecture approach to Flutter, in this way we may create an App that is multi-platform compatible and highly scalable and maintainable.
If you have multiple features for an app, would you not want to put the app database class and its generated floor code in the core package? Having it in the news feature package would make sense if that feature was going to be standalone module but Im not familiar with how that works in flutter and Im assuming thats not the case here.
I'm not a fan of feature folders... I had a better experience with having the layers a the first folders. Afterward, if the project needs to be broken in modules, I would add for each module a layer structure. Important is to acknowledge that simple apps don't need that many layers and sometimes can overcomplicate a simple 3 feature app. The use case is pointless in this example and can be easily pointed out as overengineering. Use the repository directly as use cases and you will have a simpler design. You have the same flexibility, or even bigger. Less code > More code.
@flutterguys in 28:32 you manually edit the ".g.dart" file, what happen if i re-run "flutter pub run build_runner" again?will the manual modification gets replace by generated code again?
Hello, many thanks for content! Any recomendation how to pass different combinations of query parameter/s, header/s and body to use cases? First API endpoint (use case) requires Id(query) and entity(body), second endpoint requires Id(query) and userId(header) for example. Should I create special params entity for all use case inputs?
its better have data/domain/presentation as main layers, and then add by module like data/auth/..., that repeat on each feature all the auth/domain/data... layers, having many directories make it complex to read.. simple its better always
Tks, great content, i've learned a lot with your videos. Just one point. I dont like to my domain depend on dio package. Dio is a infrastructure concern
When I have written in MVC, I've usually had another project called Domain.Shared as well as Domain. Is this a good idea for a Flutter project? What about class inheritance? As an example. A BaseEntity to hold/contain shared properties between entity classes?
Amazing video! But few concepts goes beyond my head. Can you provide few learning resources that I can use to follow to have better understanding of the architecture. I would appreciate your headsup on this! :)
Too fast for begineer so great video but will back later after become good at flutter !! make a medium pace videos so that it would be beginner friendly too !
Great video! I’ve learnt a lot to be honest. But is there a plugin available to simplify creating boilerplate codes for entities and models. Feel writing those can be cumbersome.
great video! one question, is it safe updating generated files by hand ? what happens when you rerun the build command ? will your manual updates not be overriden ?
The summary: we need to write hundreds of lines of boilerplate because otherwise it's against the rules of clean architecture. Remember that each line you write needs to be computed. The less code, the faster is your app, the more maintainable it is etc. You don't need classes for success and failure when you just can use Either from fpdart, you dont need entity and model if you can use freezed to do all of it. You don't need half of clean architecture when you can use retrofit. You don't need the second half when you use riverpod. Let those libraries generate boilerplate for you. They output optimized and tested code so you don't need to worry about performance too much.
I have a trust issue with libraries so I will make my own retrofit, riverpod or bloc. It is better for me to write it than trusting someone in the internet to trust another human being codes.
@@mac.ignacioif you come from react native, this thought is true because when react native update the framework version, many libraries just screwed😂😂😂
@@mac.ignacio trusting your own code is the worst you can ever do. You're the only one who tested it. Compare that to thousands of people who develop using bloc or riverpod and millions of users of apps written with those. Your code will fail, will have security vulnerabilities, will not be well documented etc. It's full time job to maintain riverpod. If you do your libraries well, you'll never build any app for your clients.
hi, after searching whole internet i found this wonderful tutorial about clean architecture, but i am little confuse about the difference of mvvm, mvc and mvi architecture vs clean architecture, somewhere in stackoverflow i read that mvvm and.... only use in presentation layer and we can use them even in clean architecture , so here in this project what kind of architecture are you using in presentation layer? and can you explain about it? thank you ❤
What amazing tutorial. I am very impress the way you write the clean code. I relly want to know how to implement this clean architecture using riverpod instead of bloc :)
@@flutterguys I try to use riverpod using your clean architecture. I just create two fils in remote folder : remote_article_state.dart and remote_state_notifier.dart, Can you just please have a look of what I have done in remote_state_notifier.dart : import 'package:dio/dio.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:test_mvvm_one/common/resources/data_state.dart'; import 'package:test_mvvm_one/features/news/data/data_sources/remote/news_api_service.dart'; import 'package:test_mvvm_one/features/news/data/repository/article_repository_impl.dart'; import 'package:test_mvvm_one/features/news/domain/repository/article_repository.dart'; import 'package:test_mvvm_one/features/news/domain/usecases/get_article.dart'; import 'remote_article_state.dart'; final dioProvider = Provider((ref) { final dio = Dio();
return dio; }); final newApiServiceProvider = Provider((ref) { final dio = ref.watch(dioProvider); return NewApiService(dio); }); final articleRepositoryProvider = Provider((ref) { final newApiService = ref.watch(newApiServiceProvider); return ArticleRepositoryImpl(newApiService); }); final getArticleUseCaseProvider = Provider((ref) { final articleRepository = ref.watch(articleRepositoryProvider); return GetArticleUseCase(articleRepository); }); // Define my notifier class RemoteArticlesNotifier extends StateNotifier { final GetArticleUseCase _getArticleUseCase; RemoteArticlesNotifier(this._getArticleUseCase) : super(const RemoteArticlesLoading()); Future getArticles() async { final dataState = await _getArticleUseCase(); if (dataState is DataSuccess && dataState.data!.isNotEmpty) { state = RemoteArticlesDone(dataState.data!); } else if (dataState is DataFailed) { state = RemoteArticlesError(dataState.error!); } } } // Notifier provider final remoteArticlesProvider = StateNotifierProvider((ref) { final getArticleUseCase = ref.watch(getArticleUseCaseProvider); return RemoteArticlesNotifier(getArticleUseCase); });
@@flutterguys I used riverpod instead of bloc to see how to integrate it in this clean architecture. I just create two files : remote_state_notifier.dart and remote_article_state.dart, the remote_article_state.dart still the same. In the remote_state_notifier file, I write this code there : ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- import 'package:dio/dio.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:test_mvvm_one/common/resources/data_state.dart'; import 'package:test_mvvm_one/features/news/data/data_sources/remote/news_api_service.dart'; import 'package:test_mvvm_one/features/news/data/repository/article_repository_impl.dart'; import 'package:test_mvvm_one/features/news/domain/repository/article_repository.dart'; import 'package:test_mvvm_one/features/news/domain/usecases/get_article.dart'; import 'remote_article_state.dart'; final dioProvider = Provider((ref) { final dio = Dio(); print("Nop"); // Ajoutez toute configuration nécessaire pour Dio ici return dio; }); final newApiServiceProvider = Provider((ref) { final dio = ref.watch(dioProvider); return NewApiService(dio); }); final articleRepositoryProvider = Provider((ref) { final newApiService = ref.watch(newApiServiceProvider); return ArticleRepositoryImpl(newApiService); }); final getArticleUseCaseProvider = Provider((ref) { final articleRepository = ref.watch(articleRepositoryProvider); return GetArticleUseCase(articleRepository); }); //My notifier class RemoteArticlesNotifier extends StateNotifier { final GetArticleUseCase _getArticleUseCase; RemoteArticlesNotifier(this._getArticleUseCase) : super(const RemoteArticlesLoading()); Future getArticles() async { final dataState = await _getArticleUseCase(); if (dataState is DataSuccess && dataState.data!.isNotEmpty) { state = RemoteArticlesDone(dataState.data!); } else if (dataState is DataFailed) { state = RemoteArticlesError(dataState.error!); } } } // Notifier provider final remoteArticlesProvider = StateNotifierProvider((ref) { final getArticleUseCase = ref.watch(getArticleUseCaseProvider); return RemoteArticlesNotifier(getArticleUseCase); }); ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- The app is just on loading state and do not get articles. Please can you help me to understand what is the probleme. Thanks in advance :)
The folder structure is a bit complex, but a great video nonetheless. I would much like to see a cleaner implementation without relying on multiple dependencies. A question, at this moment, i was working on a hobby project of mysql node js api which i could call using retrofit. Flutter Bloc has went through a lot of updates. If Possible Please do an indepth video on Hydrated Bloc pattern and Retrofit CRUD Requests Would love to see your take on that.
@@ka61er i have a question that what would we do if two features need to call the same endpoint? we will create 2 repository for each feature with the same code ?
Great tutorial bro. Sory but I got a problem when get imageUrl _TypeError (Null check operator used on a null value) in article_tile.dart would you help this error, thanks
in 2024, I got a bunch of errors due to dependencies mismatching versions. When I downgraded, I got similar results as it was shown. I am new to flutter. I found this tutorial helpful. But those errors were disappointing. Please, Dear Author, update some fixes. Thank you, anyway❤.
Well there is nothing as best state management it depends on the project your working on and also a lot of use cases I will say as a flutter developer make sure your confortable working with bloc and provider as the are the most popular in the community
In Create Repository Classes and Models video you make the Data model extend the Domain Entity which creates a dependency on Domain Layer from Data layer. Isn't it an antipattern? Well maybe it's not, since the Data layer should be swappable and the Domain layer contains only bussiness logic that should not have any frameworks and specific implementations/technologies.
Putting the abstract "usecase" class file into the core folder seems arbitrary. It is an essential part of the domain layer and should be located there, next to the use case implementations. When you put it into "core," you have a hard link between the domain and core layer, which makes the domain layer not independent of the other layers!
i encounter a problem took me few hours to figure it out, ArticleModel constructor name params should be super.title, if it is String ? title, all ArticleModel we get from factory, their attibute all Null
if you having an issue at 14:17 like "Failed to build build_runner:build_runner: ~~~~~ final error = e[0] as Object? ?? NullThrownError();" you should go to terminal agin, write; flutter pub upgrade flutter pub outdated flutter pub upgrade --major-version flutter pub get then you can try again to continue; flutter pub run build_runner build (': sorry if im mistaken , some code may be unnessecery but in total, that's works for now :')
Thank you very much for sharing this knowledge 🙏💚. I wanted to ask if I had many models, entities, and api services. Every time I run "build_runner build," will I have to edit all the api services to work properly the same way we did it in this video?
To edit the codegen is a very strange decision. You should create something like ArticleResponseModel, with fields statusCode, totalResults and articles(the list of all articles). And put articles into DataSuccess ''return DataSuccess(res.data.articles);''.
Great video! Thanks for the content... I have one confusion... Could @flutterguys or someone please explain this to me?... Since the presentation layer (bloc, state, widgets, etc.) and the data layer repo implementation (for saving articles locally) depend on the ArticleEntity (the domain entity), then how does this clean architecture make layers independent from each other or at least the domain layer decoupled from the other layers? TIA
I think it's a bad arhitecture to have different blocs for remote/local. IMO you should have the remote/local repositories which are interchangable, based on network connection. It more simple/clean/maintable and reduce the boilerplate comes with having diffeent blocs for remote/local.
Very good content, thank you! I would have a question regarding entities and models.. isn't there an easier way of doing that without writing a model that looks almost the same as the entity besides the annotations? It looks like a lot of duplicated work especially when changing the entities/modes...
You can delete the entity, but this is against the clean architecture, on the other hand, because the entity is in the domain layer and the domain layer is independent and should not be subject to external changes. We cannot use entity in the data layer because we may make changes in the database or api at any moment, which will lead to changes in the entity and domain layer, which is contrary to clean architecture.
@@flutterguys Still this explanation isn't quite clear because ArticleModel is extending the ArticleEntity. What does this mean if for some reasons, we change the articlesModel to add or remove or modify fields? We'll be forced to also update the entity. Instead of extending, I prefer separate data mappers for this. What do you think?
I have some concern about the ArticleState at 19:02 . Is safe using bang operator on 'props' method? I mean, both parameters are nullable so if we have the data the error will be null and I expect that there will be a crash. No?
i liked video until 28:27 very good explanation on why doing something , but error fixing in 28:27 destroyed all impression, how you can fix something in code where on top even comment don't do it manually its generated code, no one can remember all manual fixes , after adding net call api you will generate code again and this manual fix will be deleted and you will not understood why application stoped to work.If it possible can you present how to fix it so next generate will not delete it, thanks
Hey really nice video 👍, i had one question, so what if two different features share the same state, like they depend on a reactive state, where would you put it? Should it be in the data section but it won't be from a data source but just some shared state, how do you handle this.
we have two pages, and on one page we have a switch, and the other page will show some text based on the current value of the switch on the other page. we have two pages each with their own application login, but this switch is one that is shared.
Updating news_api_service.g.dart directly @28:35 was not a great idea because if the build runner command is executed again then those changes will be reset. For your scenario this is fine but you should consider that lots of beginners are watching this tutorial and they will implement these techniques in there next project.
great work and cool video!) it whould be very interesting to see the same topic in some depth: pagination. how to handle state when we have pagination in items list? and what if we need save all content, not only selected by user, for displaying when there are no conection?
I don't know if this is a good approach for big projects I mean in the example you have it is a small app and you have a huge folder structure what would happen with medium-big projects?
I believe that having many developers involved in a large-scale project would make it even better. It helps keep the code/context modular for each developer. While it may lead to an increase in the number of folders and files, navigating through it could be a challenge. However, modern IDEs make it easier by allowing for compilation error detection that pinpoint the exact files and lines causing the issue.
Most clean architecture projects focus on working with apis. What if you have firebase as backend? Which layer should you put your firebase methods in?
When bloc setup is done I get a null error. It works fine on the browser, Api key and all other stuff are okay, I have exactly copied all your codes to solve it but still doesn't work. DataState is success but it returns a list of articles with all null data inside. Plz help.@@flutterguys
@@flutterguys It didn't solve the error. I when I print the data, there are 17 ArticleModels where all their fields are null. This is what it looks like: ArticleModel(null, null, null, null, null, null, null, null). The only difference in my code is that I had to upgrade some dependencies to latest version.
thanks for nice video i just want to mention one thing it is not good idea to edit generated file (.g file) to solve that parse issue problem it is better to handle it by our own and change Future to Future and in article_repository_imp.dart parse it like this : List articles = (httpResponse.data['articles'] as List) .map((e) => ArticleModel.fromJson(e)) .toList();
@@flutterguys Suppose there is some variable like bool , string or any variable that can change UI like isSaved Something like that so if we need to handle them how we can do we need to declare those in UI or bloc file for this clean architecture ? Like in Getx we can declare in controller file but in this structure how we can manage As u said in bloc there will be only less logic like calling apiRepo/use case so can you explain that one? It will be great. Also more question on any sdk implementation like firebase services or suppose we are using any ChatSdk so how do we manage that in clean architecture where should we create all services in this structure.
Hi, I'm new to the BloC pattern and Flutter so please excuse my ignorant question about the 'Create BloC' section. I looked up BloC examples online and they all seem to involve the use of StreamController in some shape or form. How come in this tutorial, only the emit is used? And thanks for the great video. Subscribed!
Hi, If you are going to implement the pattern bloc, we used to work with streamcontroller to control the stream flow, but in this video we are using the bloc library (not only the pattern) that encapsulate this for us.
Great videos! but I have question, why after I remove the saved article, it's UI didn't re-render...? (removed article didn't disappeared) I have to go back to the prev page, then go again to Saved Articles page to get the UI changing (removed article has disappeared)
Great content! and I have a question in terms of scalability. as for now we only have 1 api to deal with and the sl is full of content. what if the api count goes for like 50? how to handle it in clean architecture?
Registered those api's in NewsApiService class if it only has one baseUrl, the tricky part if you follow this tutorial if you had 50 api's you're likely dealing with many models and entities which is cumbersome
Good. But i have doubt, is calling initialize dependencies in main methods does impact on the performance of the app, since in big app with 1000 block and more repo, how we can do it better way
Thank you so much! I'd appreciate some advice. We're developing a Flutter web application with three main components: an admin section for creating assessments and surveys, a user section for taking them, and a landing page. My manager, unfamiliar with Flutter, suggests using it for the entire project. However, with a year's experience in Flutter, I'm proposing separating the sections to reduce load times, possibly using Next.js for the user end. What's your opinion? Your input would be valuable in making a decision."
Hey! I need you help. I really like this clean architecture kind of programming because it will be more professional to use this instead of direct and hard coded practices. the problem is it is very hard to me. how can i learn it because of the complex kind of programming. how did you learn it and what was of help. Thank you
When I was learning, I thought it was complicated, but it is not at all. I found the source code of a simple project and tried to find the connection of the files with each other and this way I could learn. I taught exactly the method I learned in the video, so watch the video and then check the source code.
🌐 JOIN TO TELEGRAM COMMUNITY
🔗 t.me/flutterguysgp
It is so helpful that you show the errors you encounter and how to solve them.
Makes a big difference, thanks.
Recently I'm thought about what is good architecture for flutter project. And I met this channel and this Clean Architecture is blowing my mind. This video has concrete example so I can learn the folder structure and concepts of clean architecture. Thanks you from bottom of my hearts❤. From S.Korea as Flutter position developer.
Great to hear!
Go to video for one who wants to learn Clean Architecture with a real world example. Definitely a good watch & bookmark for me for Future references. Thanks a lot for the valuable content. I had to pause and watch to understand, the content is very intense.
Great video, exactly what I needed to start this new "clean code" journey and also thanks for providing a link to that three-part series of articles in the description. I definitely need to follow up by reading them too since I struggled a bit with following the fast paced monotone computer generated voice.
Nice video but you should not have done those explicit correction on generated file in minutes 28:00 , there was a work around. I believe that was missed in this video.
It is as follows:
since the response from api is not a json array but json object; we need to parse that json object.
This can be achieved by following three simple steps in their respective file:
Step no 1: In article.dart file inside folder models
########
add another class named ArticleResponseModel like below and ArticleModel as before:
class ArticleResponseModel {
List articles;
ArticleResponseModel({required this.articles});
factory ArticleResponseModel.fromJson(Map articleResponseData) {
return ArticleResponseModel(
articles: ((articleResponseData['articles'] ?? []) as List)
.map((dynamic article) => ArticleModel.fromJson(article))
.toList());
}
}
class ArticleModel extends ArticleEntity {
const ArticleModel({
int? id,
String? author,
String? title,
String? description,
String? url,
String? urlToImage,
String? publishedAt,
String? content,
}) : super(
id: id,
author: author,
title: title,
description: description,
url: url,
urlToImage: urlToImage,
publishedAt: publishedAt,
content: content,
);
factory ArticleModel.fromJson(Map articleModelData) {
return ArticleModel(
author: articleModelData['author'] ?? "",
title: articleModelData['title'] ?? "",
description: articleModelData['description'] ?? "",
url: articleModelData['url'] ?? "",
urlToImage: articleModelData['urlToImage'] ?? "",
publishedAt: articleModelData['publishedAt'] ?? "",
content: articleModelData['content'] ?? "",
);
}
}
Step no 2: And news_api_service.dart, new get method function looks like below
########
@GET('/top-headlines')
Future getNewsArticles({
@Query("apiKey") String ? apiKey,
@Query("country") String ? country,
@Query("category") String ? category,
});
Step no 3: Change ArticleRepositoryImpl as below:
########
class ArticleRepositoryImpl implements ArticleRepository {
final NewsApiService _newsApiService;
ArticleRepositoryImpl(this._newsApiService);
@override
Future getNewsArticle() async {
try {
final httpResponse = await _newsApiService.getNewsArticles(
apiKey: newsAPIKey, country: countryQuery, category: categoryQuery);
if (httpResponse.response.statusCode == HttpStatus.ok) {
// here you need to return httpResponse.data.articles instead of httpResponse.data
return DataSuccess(httpResponse.data.articles);
} else {
return DataFailed(DioError(
error: httpResponse.response.statusMessage,
response: httpResponse.response,
type: DioErrorType.badResponse,
requestOptions: httpResponse.response.requestOptions));
}
} on DioError catch (err) {
return DataFailed(err);
}
}
}
easy peasy lemon squeezy
thank you
Thank you 🙏
Great video! Well explained and following KISS principle.
I would love to get more in depth videos and something that is not quite out there yet (at least an updated version), something like an authentication feature using OAuth or Firebase Auth alongside a simple routing system that redirects you the right presentation page depending if you are signed in or not in the meanwhile taking advantage of deep link. I think this makes a lot of sense since we are using a Clean Architecture approach to Flutter, in this way we may create an App that is multi-platform compatible and highly scalable and maintainable.
Complete the whole course, excellent work @Flutter Guys. More power to you.
Bro your way of teaching and advance level of code is excellent ..
Glad to hear that
If you have multiple features for an app, would you not want to put the app database class and its generated floor code in the core package? Having it in the news feature package would make sense if that feature was going to be standalone module but Im not familiar with how that works in flutter and Im assuming thats not the case here.
I'm not a fan of feature folders... I had a better experience with having the layers a the first folders. Afterward, if the project needs to be broken in modules, I would add for each module a layer structure.
Important is to acknowledge that simple apps don't need that many layers and sometimes can overcomplicate a simple 3 feature app.
The use case is pointless in this example and can be easily pointed out as overengineering. Use the repository directly as use cases and you will have a simpler design. You have the same flexibility, or even bigger. Less code > More code.
@flutterguys in 28:32 you manually edit the ".g.dart" file, what happen if i re-run "flutter pub run build_runner" again?will the manual modification gets replace by generated code again?
yes running the command will reset the manually changed lines of code, you will have to redo it
@@BhardwajHackology Sounds like a problem to me, is this a good practice ?
@@LawSan_ yes there's nothing wrong in doing that, you're a developer, take full control of everything,
Best clean arch explaining , thanks a lot🥳
Hello, many thanks for content! Any recomendation how to pass different combinations of query parameter/s, header/s and body to use cases? First API endpoint (use case) requires Id(query) and entity(body), second endpoint requires Id(query) and userId(header) for example. Should I create special params entity for all use case inputs?
This worries me a lot too. Have you found the answer to the question?
its better have data/domain/presentation as main layers, and then add by module like data/auth/..., that repeat on each feature all the auth/domain/data... layers, having many directories make it complex to read.. simple its better always
Please put subtitles on your videos. Today with AIs it is so simple and easy! This way, people from all over the world can see your videos.
Tks, great content, i've learned a lot with your videos.
Just one point. I dont like to my domain depend on dio package. Dio is a infrastructure concern
When I have written in MVC, I've usually had another project called Domain.Shared as well as Domain. Is this a good idea for a Flutter project? What about class inheritance? As an example. A BaseEntity to hold/contain shared properties between entity classes?
This series is awesome ❤
I am glad ❤️
Бро просто сделал титаническую работу. Спасибо
Thanks for the video, learned a lot about new dependencies and code pattern
Great to hear!
Amazing video! But few concepts goes beyond my head. Can you provide few learning resources that I can use to follow to have better understanding of the architecture. I would appreciate your headsup on this! :)
Search on Github or Medium
Very nice and complete explanation, thanks a lot! Looking forward for similar videos on other topics!
✌❤
i watched more than 10 times, thanks a lot, i gonna be a master Flutter like u Flutter Guy.
✨❤️
It is out of box for me also, we need years of experience to understand this video, i guess.
love the fireship format
Too fast for begineer so great video but will back later after become good at flutter !! make a medium pace videos so that it would be beginner friendly too !
It's not really clean, the folder structure actually makes me confused :), but it's still a great video, thanks for sharing!
Great video! I’ve learnt a lot to be honest. But is there a plugin available to simplify creating boilerplate codes for entities and models. Feel writing those can be cumbersome.
Learned a lot. Thanks!
great video! one question, is it safe updating generated files by hand ? what happens when you rerun the build command ? will your manual updates not be overriden ?
You should not modify generated files, as they will be overwritten next time with the build runner called.
The summary: we need to write hundreds of lines of boilerplate because otherwise it's against the rules of clean architecture.
Remember that each line you write needs to be computed. The less code, the faster is your app, the more maintainable it is etc.
You don't need classes for success and failure when you just can use Either from fpdart, you dont need entity and model if you can use freezed to do all of it. You don't need half of clean architecture when you can use retrofit. You don't need the second half when you use riverpod. Let those libraries generate boilerplate for you. They output optimized and tested code so you don't need to worry about performance too much.
So what do you think is the right way? Would like to hear your thoughts
I have a trust issue with libraries so I will make my own retrofit, riverpod or bloc. It is better for me to write it than trusting someone in the internet to trust another human being codes.
@@mac.ignacioif you come from react native, this thought is true because when react native update the framework version, many libraries just screwed😂😂😂
@@mac.ignacio trusting your own code is the worst you can ever do. You're the only one who tested it. Compare that to thousands of people who develop using bloc or riverpod and millions of users of apps written with those. Your code will fail, will have security vulnerabilities, will not be well documented etc. It's full time job to maintain riverpod. If you do your libraries well, you'll never build any app for your clients.
Thanks for the detailed explanation on the architecture....can you show how to cache remote responses to local Database too....
hi, after searching whole internet i found this wonderful tutorial about clean architecture, but i am little confuse about the difference of mvvm, mvc and mvi architecture vs clean architecture, somewhere in stackoverflow i read that mvvm and.... only use in presentation layer and we can use them even in clean architecture , so here in this project what kind of architecture are you using in presentation layer? and can you explain about it? thank you ❤
MVVM solves issues from MVC.
MVVM structure follows clean architecture.
At first, I thought the video was playing at 1.5x speed😐
Btw...thanks for this video!!
What amazing tutorial. I am very impress the way you write the clean code. I relly want to know how to implement this clean architecture using riverpod instead of bloc :)
Glad it was helpful!
@@flutterguys I try to use riverpod using your clean architecture. I just create two fils in remote folder : remote_article_state.dart and remote_state_notifier.dart, Can you just please have a look of what I have done in remote_state_notifier.dart :
import 'package:dio/dio.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:test_mvvm_one/common/resources/data_state.dart';
import 'package:test_mvvm_one/features/news/data/data_sources/remote/news_api_service.dart';
import 'package:test_mvvm_one/features/news/data/repository/article_repository_impl.dart';
import 'package:test_mvvm_one/features/news/domain/repository/article_repository.dart';
import 'package:test_mvvm_one/features/news/domain/usecases/get_article.dart';
import 'remote_article_state.dart';
final dioProvider = Provider((ref) {
final dio = Dio();
return dio;
});
final newApiServiceProvider = Provider((ref) {
final dio = ref.watch(dioProvider);
return NewApiService(dio);
});
final articleRepositoryProvider = Provider((ref) {
final newApiService = ref.watch(newApiServiceProvider);
return ArticleRepositoryImpl(newApiService);
});
final getArticleUseCaseProvider = Provider((ref) {
final articleRepository = ref.watch(articleRepositoryProvider);
return GetArticleUseCase(articleRepository);
});
// Define my notifier
class RemoteArticlesNotifier extends StateNotifier {
final GetArticleUseCase _getArticleUseCase;
RemoteArticlesNotifier(this._getArticleUseCase) : super(const RemoteArticlesLoading());
Future getArticles() async {
final dataState = await _getArticleUseCase();
if (dataState is DataSuccess && dataState.data!.isNotEmpty) {
state = RemoteArticlesDone(dataState.data!);
} else if (dataState is DataFailed) {
state = RemoteArticlesError(dataState.error!);
}
}
}
// Notifier provider
final remoteArticlesProvider = StateNotifierProvider((ref) {
final getArticleUseCase = ref.watch(getArticleUseCaseProvider);
return RemoteArticlesNotifier(getArticleUseCase);
});
@@flutterguys I used riverpod instead of bloc to see how to integrate it in this clean architecture. I just create two files : remote_state_notifier.dart and remote_article_state.dart, the remote_article_state.dart still the same. In the remote_state_notifier file, I write this code there :
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
import 'package:dio/dio.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:test_mvvm_one/common/resources/data_state.dart';
import 'package:test_mvvm_one/features/news/data/data_sources/remote/news_api_service.dart';
import 'package:test_mvvm_one/features/news/data/repository/article_repository_impl.dart';
import 'package:test_mvvm_one/features/news/domain/repository/article_repository.dart';
import 'package:test_mvvm_one/features/news/domain/usecases/get_article.dart';
import 'remote_article_state.dart';
final dioProvider = Provider((ref) {
final dio = Dio();
print("Nop");
// Ajoutez toute configuration nécessaire pour Dio ici
return dio;
});
final newApiServiceProvider = Provider((ref) {
final dio = ref.watch(dioProvider);
return NewApiService(dio);
});
final articleRepositoryProvider = Provider((ref) {
final newApiService = ref.watch(newApiServiceProvider);
return ArticleRepositoryImpl(newApiService);
});
final getArticleUseCaseProvider = Provider((ref) {
final articleRepository = ref.watch(articleRepositoryProvider);
return GetArticleUseCase(articleRepository);
});
//My notifier
class RemoteArticlesNotifier extends StateNotifier {
final GetArticleUseCase _getArticleUseCase;
RemoteArticlesNotifier(this._getArticleUseCase) : super(const RemoteArticlesLoading());
Future getArticles() async {
final dataState = await _getArticleUseCase();
if (dataState is DataSuccess && dataState.data!.isNotEmpty) {
state = RemoteArticlesDone(dataState.data!);
} else if (dataState is DataFailed) {
state = RemoteArticlesError(dataState.error!);
}
}
}
// Notifier provider
final remoteArticlesProvider = StateNotifierProvider((ref) {
final getArticleUseCase = ref.watch(getArticleUseCaseProvider);
return RemoteArticlesNotifier(getArticleUseCase);
});
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
The app is just on loading state and do not get articles. Please can you help me to understand what is the probleme. Thanks in advance :)
Thank you so much, I am learning a lot from your videos.
Subscribed!
Happy to hear that!
Hello, the video content is nice but old, we would appreciate it if you create a new one for today's version. Thanks
I'm getting the exception in the "article!urltoimage!" in the article_tile.dart file as -> "no host specified in the URL ". how to resolve this??
hello ! is there any extention to give a folder icon like in the case of your vs thank you
Thank you for giving me that "Eureka!" moments
Our pleasure!
This could have been better if you made a bootcamp style. I will gladly watch a 24 hour version of it.
why are you keeping all the fields optional, is it that we should not use required?
The video I should have seen before starting the application I’m working on xD
Can't wait for more ❤❤❤
The folder structure is a bit complex, but a great video nonetheless. I would much like to see a cleaner implementation without relying on multiple dependencies. A question, at this moment, i was working on a hobby project of mysql node js api which i could call using retrofit. Flutter Bloc has went through a lot of updates. If Possible Please do an indepth video on Hydrated Bloc pattern and Retrofit CRUD Requests Would love to see your take on that.
no bro, this structure is very popular and easiest in mobile to understand and maintain
@@ka61er i have a question that what would we do if two features need to call the same endpoint? we will create 2 repository for each feature with the same code ?
great tutorial. in minutes 28:00 i tried my code and got I/flutter null. please advice. thanks
Same, did you fix it?
I tried logging the data I get from the API, it's null. When I try it in postman, like same query params, it works
Great tutorial bro. Sory but I got a problem when get imageUrl _TypeError (Null check operator used on a null value) in article_tile.dart
would you help this error, thanks
Confirm if you passed urlToImage in ArticleModel class to super
in 2024, I got a bunch of errors due to dependencies mismatching versions. When I downgraded, I got similar results as it was shown. I am new to flutter. I found this tutorial helpful. But those errors were disappointing. Please, Dear Author, update some fixes. Thank you, anyway❤.
very crisp & clear explanation .. Just wanted to ask can we use the bloc's cubit instead of old bloc state management method
yes you can use any state management of your choice
@@onyemaanthony can i ask you ? which is the best for state management right now ?
Well there is nothing as best state management it depends on the project your working on and also a lot of use cases I will say as a flutter developer make sure your confortable working with bloc and provider as the are the most popular in the community
In Create Repository Classes and Models video you make the Data model extend the Domain Entity which creates a dependency on Domain Layer from Data layer. Isn't it an antipattern? Well maybe it's not, since the Data layer should be swappable and the Domain layer contains only bussiness logic that should not have any frameworks and specific implementations/technologies.
this is the first clean one ever and advance
Putting the abstract "usecase" class file into the core folder seems arbitrary. It is an essential part of the domain layer and should be located there, next to the use case implementations. When you put it into "core," you have a hard link between the domain and core layer, which makes the domain layer not independent of the other layers!
Nice work done buddy nice explanation as per industry standards
Thanks a ton
i encounter a problem took me few hours to figure it out, ArticleModel constructor name params should be super.title, if it is String ? title, all ArticleModel we get from factory, their attibute all Null
Thank you man I was having this problem
You are talking so fast man take a breath between each sentence ...
Ya it feels like AI voiceover at 1.15x speed
Most definitely AI voice
I used the 0.75x setting :D
Its his credit, you can slow the video speed.
This channel is from France. No way this is his real voice
what is the difference between this architecture, MVP, MVC, or MVVM
and which is better
Sir you just earned a new subscriber
if you having an issue at 14:17 like
"Failed to build build_runner:build_runner: ~~~~~ final error = e[0] as Object? ?? NullThrownError();"
you should go to terminal agin, write;
flutter pub upgrade
flutter pub outdated
flutter pub upgrade --major-version
flutter pub get
then you can try again to continue;
flutter pub run build_runner build
(': sorry if im mistaken , some code may be unnessecery but in total, that's works for now :')
✌❤
It solved my problem. Thanks!
Thank you very much for the content 💙😊
Thank you very much for sharing this knowledge 🙏💚. I wanted to ask if I had many models, entities, and api services. Every time I run "build_runner build," will I have to edit all the api services to work properly the same way we did it in this video?
To edit the codegen is a very strange decision. You should create something like ArticleResponseModel, with fields statusCode, totalResults and articles(the list of all articles). And put articles into DataSuccess ''return DataSuccess(res.data.articles);''.
Great video! Thanks for the content...
I have one confusion...
Could @flutterguys or someone please explain this to me?... Since the presentation layer (bloc, state, widgets, etc.) and the data layer repo implementation (for saving articles locally) depend on the ArticleEntity (the domain entity), then how does this clean architecture make layers independent from each other or at least the domain layer decoupled from the other layers? TIA
I think it's a bad arhitecture to have different blocs for remote/local. IMO you should have the remote/local repositories which are interchangable, based on network connection.
It more simple/clean/maintable and reduce the boilerplate comes with having diffeent blocs for remote/local.
Such a small application, and so much code, so much time spent! But what if the app is much bigger than that? 😬😑
Very good content, thank you! I would have a question regarding entities and models.. isn't there an easier way of doing that without writing a model that looks almost the same as the entity besides the annotations? It looks like a lot of duplicated work especially when changing the entities/modes...
You can delete the entity, but this is against the clean architecture, on the other hand, because the entity is in the domain layer and the domain layer is independent and should not be subject to external changes. We cannot use entity in the data layer because we may make changes in the database or api at any moment, which will lead to changes in the entity and domain layer, which is contrary to clean architecture.
@@flutterguys Still this explanation isn't quite clear because ArticleModel is extending the ArticleEntity. What does this mean if for some reasons, we change the articlesModel to add or remove or modify fields? We'll be forced to also update the entity. Instead of extending, I prefer separate data mappers for this. What do you think?
@flutterguys can you reply please? I'm interested
I have some concern about the ArticleState at 19:02 . Is safe using bang operator on 'props' method? I mean, both parameters are nullable so if we have the data the error will be null and I expect that there will be a crash. No?
i liked video until 28:27 very good explanation on why doing something , but error fixing in 28:27 destroyed all impression, how you can fix something in code where on top even comment don't do it manually its generated code, no one can remember all manual fixes , after adding net call api you will generate code again and this manual fix will be deleted and you will not understood why application stoped to work.If it possible can you present how to fix it so next generate will not delete it, thanks
I didn't find a solution from the retrofit document and I didn't want to make an additional model....
I did not expect the video to go viral 😂
Hey, why ingredient model doesn't pass parameters to super class? Thanks
Hey really nice video 👍, i had one question, so what if two different features share the same state, like they depend on a reactive state, where would you put it? Should it be in the data section but it won't be from a data source but just some shared state, how do you handle this.
If you can give an example
we have two pages, and on one page we have a switch, and the other page will show some text based on the current value of the switch on the other page. we have two pages each with their own application login, but this switch is one that is shared.
Updating news_api_service.g.dart directly @28:35 was not a great idea because if the build runner command is executed again then those changes will be reset. For your scenario this is fine but you should consider that lots of beginners are watching this tutorial and they will implement these techniques in there next project.
great work and cool video!)
it whould be very interesting to see the same topic in some depth: pagination.
how to handle state when we have pagination in items list?
and what if we need save all content, not only selected by user, for displaying when there are no conection?
Great suggestion!
I don't know if this is a good approach for big projects I mean in the example you have it is a small app and you have a huge folder structure what would happen with medium-big projects?
I feal like that this approach is not following the KISS principle, because of many introduced shallow "modules", just passing the data
I believe that having many developers involved in a large-scale project would make it even better. It helps keep the code/context modular for each developer. While it may lead to an increase in the number of folders and files, navigating through it could be a challenge. However, modern IDEs make it easier by allowing for compilation error detection that pinpoint the exact files and lines causing the issue.
None of the statements in initializeDependencies() method are asynchronous. Why is the function itself asynchronous?
As we didn't use the fromjson method but it didn't pose a problem why?
Thank you for thi type of content.
i was looking for it for many days
Glad you like it!
@@flutterguys can I use any alternative of retrofit?
Greate video
Thanks!
Then where should I set my user token value for dio options headers?
Hi, great video. May I know what extension are you using for the folder icon?
I think its Material Icons extension
For those whose build_runner command is not working add retrofit_generator in dev_dependencies.
Thanks
Most clean architecture projects focus on working with apis. What if you have firebase as backend? Which layer should you put your firebase methods in?
Data layer , not difference
When bloc setup is done I get a null error. It works fine on the browser, Api key and all other stuff are okay, I have exactly copied all your codes to solve it but still doesn't work. DataState is success but it returns a list of articles with all null data inside. Plz help.@@flutterguys
@@mrfounderr This error is because the url of some photos, You can check this to set a default url if it is null.
@@flutterguys It didn't solve the error. I when I print the data, there are 17 ArticleModels where all their fields are null. This is what it looks like: ArticleModel(null, null, null, null, null, null, null, null). The only difference in my code is that I had to upgrade some dependencies to latest version.
@@mrfounderr This error can be from the from json method. please print in from json. If you could not solve it, push it on GitHub and I will check it.
thanks for nice video i just want to mention one thing it is not good idea to edit generated file (.g file) to solve that parse issue problem it is better to handle it by our own and change Future to Future and in article_repository_imp.dart parse it like this :
List articles =
(httpResponse.data['articles'] as List)
.map((e) => ArticleModel.fromJson(e))
.toList();
Thanks for sharing
Wow clever idea, you should also make videos.
What a great video, thanks alot !!
Glad it helped!
Best video out there for flutter clean architecture
Still i've some confusion can you help me?
Yes sure
@@flutterguys
Suppose there is some variable like bool , string or any variable that can change UI like isSaved Something like that so if we need to handle them how we can
do we need to declare those in UI or bloc file for this clean architecture ?
Like in Getx we can declare in controller file but in this structure how we can manage
As u said in bloc there will be only less logic like calling apiRepo/use case so can you explain that one?
It will be great.
Also more question on any sdk implementation like firebase services or suppose we are using any ChatSdk so how do we manage that in clean architecture
where should we create all services in this structure.
Hi I have one question why repo abstraction is in domain layer why it is not in data layer? can you please explain in comment.
Hi, I'm new to the BloC pattern and Flutter so please excuse my ignorant question about the 'Create BloC' section. I looked up BloC examples online and they all seem to involve the use of StreamController in some shape or form. How come in this tutorial, only the emit is used? And thanks for the great video. Subscribed!
What did they use stream controller for? What was their goal?
Hi, If you are going to implement the pattern bloc, we used to work with streamcontroller to control the stream flow, but in this video we are using the bloc library (not only the pattern) that encapsulate this for us.
is it with mvc patter
No , Clean Architecture
Do you have any video with mvc
Bro you explainstions🔥🔥🔥
Appreciate that
Very Informative 😉🤞
Glad you think so!
thnx, please a clean aechitecture project with Hive and bloc
Thank you for this great explanation
Can you please share the updated repo?
the repo in the link is not updated
Best Regards,
Already shared , check description.
@@flutterguys
Thanks now I see the updated code
Best Regards,
why not hive? retrofit really need dio can do most of the work ?
Hello, can you tell how to pass bloc reference from one screen to others.
Best
Great videos! but I have question, why after I remove the saved article, it's UI didn't re-render...? (removed article didn't disappeared)
I have to go back to the prev page, then go again to Saved Articles page to get the UI changing (removed article has disappeared)
And if I built it into release .apk, the news didn't load (the application just layout with no data)..
please answer if you have some insight
You have to internet permission in AndroidManifest to work in release mode
Please check with source code or clone project from Github
@@flutterguys Ohh okay thanks for your reply! appreciate it, I'll check it right away
simple explanation, great video. Im looking forward for new videos keep going man
Appreciate it!
Great content! and I have a question in terms of scalability. as for now we only have 1 api to deal with and the sl is full of content. what if the api count goes for like 50? how to handle it in clean architecture?
I think we can create multiple sl instance, I don't know exactly I have to research about it.
Registered those api's in NewsApiService class if it only has one baseUrl, the tricky part if you follow this tutorial if you had 50 api's you're likely dealing with many models and entities which is cumbersome
This video makes me feel that I don't know nothing.
Welcome to programming
Good.
But i have doubt, is calling initialize dependencies in main methods does impact on the performance of the app, since in big app with 1000 block and more repo, how we can do it better way
No this is not heavy operation.
It is just registration
Thank you so much!
I'd appreciate some advice.
We're developing a Flutter web application with three main components: an admin section for creating assessments and surveys, a user section for taking them, and a landing page.
My manager, unfamiliar with Flutter, suggests using it for the entire project. However, with a year's experience in Flutter, I'm proposing separating the sections to reduce load times, possibly using Next.js for the user end.
What's your opinion? Your input would be valuable in making a decision."
@@raghavendrakj4976
Using flutter web just for admin side
flutter web has problems which are not good for user side
@@flutterguys thankyou so much
Thanks man ❤
Hey! I need you help. I really like this clean architecture kind of programming because it will be more professional to use this instead of direct and hard coded practices. the problem is it is very hard to me. how can i learn it because of the complex kind of programming. how did you learn it and what was of help. Thank you
When I was learning, I thought it was complicated, but it is not at all. I found the source code of a simple project and tried to find the connection of the files with each other and this way I could learn. I taught exactly the method I learned in the video, so watch the video and then check the source code.
@@flutterguys I am gonna build the app myself with you. Thanks for replying. Have a great day!
do we really need usecases why cant we use repositories instead of usecases directly.
what if tomorrow you need to add a repository/change the current one?