Flutter Clean Architecture - Learn By A Project | Full Beginner's Tutorial

DO YOU HAVE ANY QUESTION ? JOIN THE COMMUNITY
🤝 Telegram Community

📄Architecture is very important in developing an application. Architecture can be likened to a floor plan that describes how the flow in an application project. The main purpose of implementing the architecture is the separation of concern (SoC). So, it will be easier if we can work by focusing on one thing at a time.
In the context of Flutter, clean architecture will help us to separate code for business logic with code related to platforms such as UI, state management, and external data sources. In addition, the code that we write can be easier to test (testable) independently.

🌐Reference :

📁Source Code

⚡ SUBSCRIBE HERE⚡

🌐Social Media

⏳ TIMESTAMPS :
00:00 Intro
03:44 Add Packages & Create Folders Structure
06:33 Define Entities Classes
09:05 Create Repository Classes & Models
11:27 Make Request To API Using Retrofit
14:40 Use Cases
17:54 Create Bloc
21:16 Dependency Injection
24:32 Display News
29:20 Local Database
33:39 Add Database Methods To Layers
36:45 Save & Remove Article From Database

#flutter #fluttertutorial #fluttercourse

[sarawanak]

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.

[david_junior]

It is so helpful that you show the errors you encounter and how to solve them.
Makes a big difference, thanks.

[minseokjeong]

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.

[nunosilva]

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.

[spthpgh]

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<ArticleModel> articles;

this.articles});

factory ArticleResponseModel.fromJson(Map<String, dynamic> articleResponseData) {
return ArticleResponseModel(
articles: ?? []) as List<dynamic>)
.map((dynamic 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<String, dynamic> articleModelData) {
return ArticleModel(
author: articleModelData['author'] ?? "",
title: articleModelData['title'] ?? "",
description: ?? "",
url: articleModelData['url'] ?? "",
urlToImage: ?? "",
publishedAt: ?? "",
content: articleModelData['content'] ?? "",
);
}
}



Step no 2: And news_api_service.dart, new get method function looks like below


@GET('/top-headlines')
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;



@override
getNewsArticle() async {
try {
final httpResponse = await
apiKey: newsAPIKey, country: countryQuery, category: categoryQuery);

if == HttpStatus.ok) {
// here you need to return httpResponse.data.articles instead of httpResponse.data
return
} else {
return DataFailed(DioError(
error: httpResponse.response.statusMessage,
response: httpResponse.response,
type: DioErrorType.badResponse,
requestOptions:
}
} on DioError catch (err) {
return DataFailed(err);
}
}
}


easy peasy lemon squeezy

[mrkesu]

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.

[theabhi]

Complete the whole course, excellent work @Flutter Guys. More power to you.

[jackvessalius]

@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?

[timurakhtyamov]

Very nice and complete explanation, thanks a lot! Looking forward for similar videos on other topics!

[AkshyaKumar-bw]

Bro your way of teaching and advance level of code is excellent ..

[ArturoMartinez-uzsw]

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

[adrianbilescu]

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.

[muhammadissasabbagh]

Best clean arch explaining, thanks a lot🥳

[FromDataKnowledge]

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 :)

[DyecksRF]

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.

[hoanghuynh]

i watched more than 10 times, thanks a lot, i gonna be a master Flutter like u Flutter Guy.

[donathmm]

You are talking so fast man take a breath between each sentence ...

[happycat]

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

[mohammadrezabehzadfar]

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 to Future<HttpResponse> and in article_repository_imp.dart parse it like this :
List<ArticleModel> articles =
as List<dynamic>)
.map((e) => ArticleModel.fromJson(e))
.toList();

[bfxlhho]

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.