Flutter Clean Architecture Visual Explanation

in this video I will explain you how clean architecture work visually first let's start with the basic Circle okay to simplify everything we will separate the clean architecture into three different layers the presentation the business and the data most often the clean architecture is represented by a circle but you could also think it as a cone because it's like if you see it as a bird View and I think it's simpler to understand as a cone so now let's draw everything but this time we'll put the cone in the center it's the same structure we have the data on the top the business in the middle and the presentation at the bottom since the bottom is the presentation it is what the user can see and more you move up the cone more you are going into the database by example this is where you will get your information from an API when we will code with clean architecture we will separate every layer into three different folders for the presentation layer it will be the widget the provider and the pages for the business layer it will be the use cases the repositories and the entities and finally for the top layer which is the data it will be the repository the models and the data source this was a lot of information right off the bat to increase your chance to remember the folder's name we will associate every folder with an image the models and the entity will be the brackets the repositories will be some sort of bridge because the two repository will be a bridge between the data and the business layer next we have the data source which is represented by a database following by the use cases which we can represent as a business bag the pages will be represented by some pages the provider will be a web because this is how we manage all the data and finally we will put a symbol for the widget because the model and the entity have the same image inside we will put different things the models is the thing that come from the outside which is the internet and the entities is what is on the phone which we will present for a phone all right so now you can associate some image with every folders inside each layers now I want to show you how everything is linked together so we have a circle that never ends and we start with the pages which inside you have all the widget and by example when you click on a button you will trigger a use case the use case will use the repository inside the business layer with the entities and will create a bridge between the business and the data layer so that's why we have another repository inside the data layer which this one use the models this repository inside the data layer will use the data sources and the data sources will get all the data and then put it inside the provider which will manage your data and the provider will update your screen which will update the pages and all the widget this is a NeverEnding cycle I would like to present you other way that you can see the clean architecture let's reuse all these symbols and now I will show you how everything works together again so we have the pages inside your application which use all the widget by example button when you click the button this will trigger the use cases inside the business layer and this use case will get the data that you want in order to get the data the use case will need to pass by the bridge of the business layer and go into the bridge of the data layer the bridge inside the business layer will use the entities and the bridge inside the data layer we'll use the models once we have used the bridge to pass between the business layer and the data layer we can now use the repository inside the data layer in order to get the data sources and the data will return into the provider which will change the visual of the application now it's time to create one last visual to make sure that you understand how clean architecture work before we code we have the pages which inside have widgets and when the user click the button this will trigger a use Case by example get the data of something and this something will pass into the repository of the business layer and then go inside the repository of the data layer after this the repository inside the data layer will use the data source and this is a New Concept I want to introduce the data source will go inside a logic if there is some internet connection then it will go inside the remote data source because we will get the data from an API online but if we have no internet connection then it will get the data from the local database inside the phone and once we have the data coming from the data source this will update with the provider change the values and refresh the pages inside our app refresh all the widget and so the user will see the new data coming from the logic of the clean architecture so you can represent clean architecture as a cone or as a circle personally I prefer to represent it as a cone because I think it's simpler to understand how the flow of data work inside our clean architecture you see how it start from a user interaction then it go inside the business layer then the data layer and then it go back inside the visual of the application the presentation layer and this is why in most image of clean architecture you have the arrows coming towards the center this is the flow of how everything works do you want more visual do you want want to understand clean architecture if you like Alexa turn off the fan fan isn't responding your mom is at FL map we truly believe in Simplicity that's why in everything we do we strive to make it as simple as possible to understand

Channel: Flutter Mapp

Views: 22,738

Keywords: Flutter, flutter clean architecture, clean architecture, clean architecture flutter, flutter architecture

Id: DsvFOnemzsQ

Length: 6min 15sec (375 seconds)

Published: Thu Aug 31 2023