Flutter Clean Architecture

Flutter Clean Architecture - Full Course

Рет қаралды 72,307

Күн бұрын

This is a visual tutorial of Clean Architecture with Flutter (Full Course). The course is based on the ‪@ResoCoder‬ 7-hour course available on KZfaq. By combining both courses, you will gain a deep understanding of how to use Clean Architecture with Flutter like a pro. Throughout this Clean Architecture tutorial, you will learn how to implement it in your own apps. The primary goal of this video is to ensure your comprehension of how Clean Architecture (CA) works, and to aid in this, we employ visual aids extensively. Furthermore, most of the necessary code for Flutter is readily accessible on GitHub (Link in the description below). We encourage you to express your opinion by liking or disliking this video and leaving positive or constructive feedback in the comments. This input will help us create better content in the future. Flutter Mapp is committed to offering the simplest and fastest Flutter tutorials on earth. Thank you for watching, and peace. ✌
LINKS
GitHub: github.com/fluttermapp/flutte...
PokeApi (It's free to use): pokeapi.co/
PROVIDER
If you don't use Provider and need a quick explanation, you can watch this video on KZfaq: • Flutter Provider State...
Keep in mind that you can build your clean architecture projects using alternatives; you aren't required to use Provider.
Provider documentation: pub.dev/packages/provider
WEBSITE
fluttermapp.com/
OVERVIEW
0:00 The board
6:04 Get the project (GitHub)
9:06 What will we build
10:34 API
12:47 Feature 1: Visual Explanation
16:34 Feature 1: Code Explanation
26:24 Feature 2: Business Layer
33:14 Feature 2: Data Layer
40:07 Feature 2: Presentation Layer
43:04 What is next?
44:39 Provider (Setup)
51:36 Widget
56:17 Remote data source
1:00:59 Provider (Usage)
1:06:43 Visual overview
1:08:45 Code overview
MISSION
Our mission at Flutter Mapp (Flutter Mobile App) is to help purpose driven Flutter developers go full-time doing what they love and making an impact through coding. We achieve this with useful Flutter tips and straight to the point Flutter videos.
RECOMMENDED VIDEOS
Playlist of more than 200 Flutter tips: • 35 Flutter Tips That W...
Learn Flutter in 1 hour: • Flutter Tutorial For B...
Zero to Hero Flutter Course (Beginners): • Video
Hero to Pro Flutter Course (Advanced): • Video
SOCIAL MEDIA:
Instagram : fluttermapp
Twitter : FlutterMapp
Website: www.fluttermapp.com
Discord Invite: / discord
CONTACT
For business inquiries email me here: info@fluttermapp.com
Website: fluttermapp.com
#FlutterMapp
#flutter #cleanarchitecture

Пікірлер: 117

@rahulrvp 4 ай бұрын

This is a brilliant course! Thank you so much for putting this together.

@ravi2048 6 ай бұрын

Explained very well, your hard work is clearly showing up, I am grateful that I found your video, thank-you

@cleanbold4967 9 ай бұрын

Finally i learnt clean architecture on this channel. ❤❤ Thank you so much sir. 🇮🇳 love from India.

@unknownprogramme 6 ай бұрын

Best Video for understanding the concept of clean architecture Very helpful

@tapantorbangla 6 ай бұрын

Very nice explained.. Learned a lot about what should be architecture.. Love from Bangladesh.

@webappss2023 6 ай бұрын

Oh my god. This is the video where a avarage developer will become advance developer. Thanks for amazing content.❤

@Nicosfrs 10 ай бұрын

I am so grateful you did this tutorial, thank you very much!

@FlutterMapp 10 ай бұрын

My pleasure Nico! Best wishes for you projects 🙏

@aldoalexisurtusuasteguicar7493 9 күн бұрын

very well explanation of clean architecture using a cone. thank you!

@jacsdev 6 ай бұрын

just great!! Congrats!!!

@DaniTeCuenta 10 ай бұрын

this video is pure gold. thank you for sharing knowledge

@FlutterMapp 10 ай бұрын

My pleasure! 🎉

@nemuellealpereira7126 5 ай бұрын

Thanks.. this is the ultimate flutter clean architecture guide for me ;)❣

@FlutterMapp 5 ай бұрын

Glad to hear that Nemuelle!

@arjunkhatri6304 10 ай бұрын

Nice Explanation! Good Job Dude! ❤

@FlutterMapp 10 ай бұрын

Thanks! 😃

@abymathew575 10 ай бұрын

thanks for creating this much details tutorial. Expecting more from you

@FlutterMapp 10 ай бұрын

More to come! ✌

@user-vi2fp6dl7b 7 ай бұрын

Good job! Thank you!

@muazamir 9 ай бұрын

was just about to implement offline system for my apps so this architecture really helpful, thanks!

@FlutterMapp 9 ай бұрын

You're welcome!

@silentSkipan 10 ай бұрын

Good video. Taking it step by step so haven't watched it all, but have a question about the Data source layer. Feels like when the app get even slightly more complex you'll end up with a lot of code as some features will access the same data. Why not create a singleton service that handles all data from a single API endpoint from which all features accessing that data can access the data. Also prevents inconsistent states across the app

@newnormal7365 10 ай бұрын

I like your video too much it should out when I learn clean architecture 2 years ago haha. It should be good if you can create tutorial of clean architecture with bloc with your simple explaination.

@Artem-bx1is 8 ай бұрын

Best clean architecture video I've ever seen. It would be great if you could make another video about TDD. You can rewrite this program using TDD. P.S. Guys, instead of the eather package, you can use dart records.I think that's easier way

@JSL180 5 ай бұрын

You are right, it can be updated to use registers instead of dartz, but just like the state manager, you can use another one and the idea is the same. The course is really amazing and clear. I couldn't ask for more without paying for it. Flutter is always evolving.

@graphic-Pixel 9 ай бұрын

Best explanation, thanks for this 🎉

@FlutterMapp 9 ай бұрын

You're very welcome!

@devagarwal3250 10 ай бұрын

thank you so much for this tutorial about clean architecture

@FlutterMapp 10 ай бұрын

Welcome 😊

@muxammederaiev733 3 ай бұрын

you are the best!!! good job !

@FlutterMapp 3 ай бұрын

You are!

@krishnagovinda16 9 ай бұрын

this is good stuff, the explanation is clear, practical, and there's pokemon! what more could you ask???

@FlutterMapp 9 ай бұрын

Haha, thank you, Krishnagovinda! I really appreciate it. 👍

@umbrto 6 ай бұрын

Thank you for the video, is great, wont the triggering of a use case from another create extra coupling? I think all the should be in just one feature.

@luiscejudoo 2 ай бұрын

10/10 tutorial

@squidproxy136 9 ай бұрын

hello thanks for the video, can you please explain why you created a new feature just for the image, why not creating the image as a widget in the pokemon feature, it seems like this will save alot of boilerplate coding

@user-dw4wk3uj9f 10 ай бұрын

WOW thanks pro

@nandaprian 2 ай бұрын

If you are new , I would highly recommend to just stick to classifying your folders to MVC, then u can subclass it even further for each afterwards U have other approach , like mvvm , but I personally feel like with the standard MVC pattern and classifying it that way, the code is still maintainable

@situansitus 10 ай бұрын

Can you explain about exporting Excel from Flutter using Excel dependencies, please

@saurabh9446 10 ай бұрын

Keep making tutorials that nobody makes🔥

@FlutterMapp 10 ай бұрын

Thanks 🤠

@legrandpone8819 10 ай бұрын

Thank you sir you are just awesome

@FlutterMapp 10 ай бұрын

You are awesome for watching 🙏

@legardemontcho6739 9 ай бұрын

Hi, I followed your example, but I'm having trouble with the API call. In fact I registered on the Amadeus site to obtain an API_key and API_secret. I'm having trouble implementing my repository and my store. Can you explain how to do this?

@miketaylor253 9 ай бұрын

Excellent video ! Are there any more resources on the wider subject of "clean architecture" that you would suggest? Not necessarily Flutter, but to give a solid grounding in that subject?

@the-antroy 10 ай бұрын

Thanks sir!

@FlutterMapp 10 ай бұрын

Pleasure!

@harisalvi5988 10 ай бұрын

Well done

@FlutterMapp 10 ай бұрын

Thank you! 🔥

@obvinpro 10 ай бұрын

This is the VIDEO!!!!!

@FlutterMapp 10 ай бұрын

Glad you like this one ✅

@ayberk117 6 ай бұрын

I think there is some logic issue at the beginning. If the user clicks on a button, it es commen that provider triggers a usecase & communicates with repositories -> data sources. And the data source not communicates provider directly. Datasource returns its value back to repository and provider gets from repository the values, which will be presented in the UI

@maryamfallah78 3 ай бұрын

Finally someone saved me from feeling confused and being stupid

@gojo_homes4804 8 ай бұрын

Excellent Explanation of clean architecture but after i run the cloned app all i see loading. what could be the problem?

@user-sx3gw8ey5o 5 ай бұрын

Thank you. That is a great video. however, I have a few questions. 1, aren't you violating the flow of dependency and making the data layer dependent on the business layer when you extend the data layer model from PokemonImageEntity(Business layer entity).

@shyye_ 2 ай бұрын

Thank you so much for this course! I have a question regarding Bluetooth connection, can you take a similar approach as in this example or should you think differently in any particular way? I am currently working on a project using the flutter package 'flutter_reactive_ble'

@_jorge_ 10 ай бұрын

THANKS

@FlutterMapp 10 ай бұрын

Pleasure 🙏

@ThePilli41 10 ай бұрын

I am a simple man, I see Pokemon, I like! THank you for the ongoing effort!

@FlutterMapp 10 ай бұрын

lol, thanks Pilli41 ✌ Which is your favorite Pokemon btw?

@charithasds 5 ай бұрын

This is the Clean Architecture Nirvana! 🤩 Love it! Quick tip: Maybe use Mason to generate the template code. Also Riverpod please, I need to see your way of doing it and compare to my way.

@FlutterMapp 5 ай бұрын

Dear Charithasds, you know how some days you wake up feeling mad... Well, today is not one of them! So, you know what? I'm going to make the Riverpod video. Actually, I'll go record it right now. Buckle your seatbelt because the video is coming today! 🔥 P.S.: A couple of weeks ago, I recorded the Riverpod video, but the sound had way too much reverb, resulting in bad quality, so I removed the video.

@charithasds 5 ай бұрын

@@FlutterMapp This is the best news I heard all day! Cheers and eagerly waiting to watch it! 🤩

@FlutterMapp 5 ай бұрын

Here you go! kzfaq.info/get/bejne/bamgZKqd0q64d3k.html

@charithasds 5 ай бұрын

@@FlutterMapp Greaaat! I will watch after I am off work 😁

@falahasyraf6011 8 ай бұрын

can you make tutorial for MVC/MVVM with clean architecture for flutter?

@Guix555 6 ай бұрын

Do you mean clean architecture by Uncle Bob ? If so, your video is not. The domain (business logic) is the center of the circle, or the top of the cone. The data sources (network requests, local db) are at the same level of the presentation, in the outer circle. The flow is from outer circle to inner circle, then inner to outer. There is a lot of reading about clean architecture on the internet, all and its opposite. But the idea is clear: I should not constraint my domain with infrastructure constraints. Similar concepts that share the same idea: hexagonal, onion, ports and adapters, domain driven design.

@aouadicharaf1038 10 ай бұрын

❤❤❤

@alanbosco7174 9 ай бұрын

I love this video, amazing. 🤩 ❤ But I have some doubts about how you will be doing:- Routing in this structure. If some pages have internal pages, how you will transfer data from one page to the other? Or do we just need to keep the internal pages in the same functions? Please help me understand this.

@walidscreations6509 2 ай бұрын

what if there is a shared presentation screens between multiple features?

@matejmlynar7340 10 ай бұрын

Thanks for that! But still I would like to ask for a few questions. Would you do this complex architecture in every app, even the small ones? How would you manage for example currently logged user by this structure? Maybe provider would be sufficient? Thanks!

@FlutterMapp 10 ай бұрын

For small apps, you don't need to use this 👍 Clean architecture is mostly for big complex apps.

@kodiworm7249 5 ай бұрын

I would appreciate a tutorial where you are using BLOC

@albiummid 7 ай бұрын

In 28:26, You don't need to select every similar world like this. Just mark the word and press "Ctrl + D".

@user-sx3gw8ey5o 5 ай бұрын

Or he could have just typed the word and make it case sensitive, then find and replace

@madinge711 Ай бұрын

@@user-sx3gw8ey5ono

@Adez3 10 ай бұрын

Nice

@FlutterMapp 10 ай бұрын

🚀

@Amanullah-of3mg 10 ай бұрын

OG is back🔥

@FlutterMapp 10 ай бұрын

😂😂🔥

@TungNguyen-lt5ej 10 ай бұрын

Thank you very much. From Viet Nam with lov3! template folder, I want to apply the login feature via JWT by POST method, is that possible?

@FlutterMapp 10 ай бұрын

Thank you Tung 👋 Everything is possible with Flutter 🤠

@Tom-um8mr 3 ай бұрын

A very good video ❤❤❤, but I still have 2 questions that are not quite clear to me. Isn't it actually bad if you use the code from the Pokemon Image feature in another feature? This could become confusing, or am I wrong here? I also wanted to ask because I have coded a news app with clean architecture and am happy with it. However, I have split the app into 2 features. One in which I can search for news and one in which I can favourite them. To do this, I created a "Shared" folder in which I put the "NewsEntity" so that I can use it in both features. Is this bad and if so, how can I make it better?

@shaderone07 6 ай бұрын

i tried this but had trouble understanding ...what is the minimum knowledge required to understand this? just started flutter and i'm loving it.

@zorkan 10 ай бұрын

Clean Explain 💯

@FlutterMapp 10 ай бұрын

Appreciate it

@MrAmG17 5 ай бұрын

I think it's misleading to say that datasource updates provider. Its more like a road. when user interacts, then it sends and event to provider/bloc, then bloc calls a use-case / repository_impl (which has abstraction in data layer) from business layer, then the repository_impl calls data_source from data layer and returns usually a Map which is then parsed into data Model inside repository_impl, aswell parsed into Entity. Then we go BACK through returns to provider/bloc/use-case with the entity and use it to display users what we just received .. in simplier form: (datasource->repository_impl->model->entity->use-case->provider->page) and NOT (datasource->provider) .

@awais.16 10 ай бұрын

why not create an api client, where you define all the dio cases and on basis of it just call the apis , and handle the failure and success cases, It is too much boiler plate code to create a function for every api calling, what you suggest about it?

@FlutterMapp 10 ай бұрын

If you prefer it that way, it is absolutely fine. Code is never perfect; the closest to perfection you can get is the code that you think is the best for your situation. 🚀

@zakblacki 10 ай бұрын

I really appreciate your effort but I wish you would had explained the different component layer on the board with a concrete example at the start you only pointed out the button (widget)... after that I don't know what the others usescases repositories entities model...etc utility does ? Because while It may sound simple for other it's not for someone like me who still struggle to create a function method or debugging we're stuck on tutorial loop unaible to read documentation properly

@FlutterMapp 10 ай бұрын

This is a pretty advance video, if you still struggle to create a function or debugging, this will be very hard to learn. Keep practicing and I 100% sure you will eventually get the concept 👍

@Unnonamus 7 ай бұрын

Agreed. It seemed promising at the beginning but I never got to the point where the layers clicked and came together. It was almost more of a how-to on refactoring code than a flutter architecture video. I say this with all due respect, as I appreciate the effort put into the video.

@zakariarebouhi4350 10 ай бұрын

Thanks for your effort, but I have one question is I have to this for each small feature? because I see your write a lot of code for only small thing? and ones again thank you for your effort

@FlutterMapp 10 ай бұрын

Yes, correct, this architecture is most useful for big and complex apps 👍

@FlutterMapp 10 ай бұрын

At the end, the goal is to show you as much new things as possible and you keep what you prefer, there is no perfect core, always room for improvement 🚀

@abymathew575 10 ай бұрын

in terms of big picture of scalability making things into small pieces of code will help us to work easily. yes there lot of code for only small thing, but for a big project perspective if this small feature is really matter in production, bcz we are ready to add new features into this small feature later so this much of smaller part will help us scalability , testability areas

@pixerdev 8 ай бұрын

🥰

@theemain 10 ай бұрын

Do clean architecture with firebase auth

@charithasds 5 ай бұрын

Second this!

@kiransilwal 3 ай бұрын

Third this!

@laurentjoly7759 4 ай бұрын

Not good for me. Why do you have a PokemonRepositoryImpl AND a usecase in your provider as the provider should call the usecase which call the repository. I have another implementation where there is no repository in my provider, just a call to use case.

@user-rh1sw6ji6t 10 ай бұрын

Anyone can tell me should I choose Provider or Riverpods

@FlutterMapp 10 ай бұрын

Riverpods is the successor of Provider, both created by the same person, Remi Rousselet. I use Provider in this tutorial because I'm used to it, but if you're starting from scratch, you should go with Riverpods. Let me know; I could create a tutorial about it. 👍

@user-rh1sw6ji6t 10 ай бұрын

@@FlutterMapp Nice please make a tutorial with Riverpods clean Architecture 🙏