Flutter Clean Architecture - How to Use Clean Architecture with Flutter

okay okay I got you let's build an app to learn more about clean architecture but first what is clear architecture so clean architecture is a software design philosophy described by Uncle Bob in his book a Craftsman guide to software structure and design based on this approach we should design application that keep the Core Business logic and the application domain at the center of the solution and at the same time separate from the delivery mechanism in the diagram the inner circle with entities and use cases represent the business and the application specific rules and you can think of this as the policies while the other circles are the mechanism so the implementation that enforce policies yes I know it sounds very abstract so think of the other Circle as the code that you use to connect with your databases convert the data into entities and prepare the user interface with Frameworks like flutter now the idea is that outer circles change often do to changes in external dependencies while the rules stored into your entities and your use cases are going to be more stable and only depends on business changes now keep in mind that in the diagram there are arrows pointing Inward and this is the dependency rule the state that the code dependencies only move from Outer Circle to the inner one therefore variables pluses and function from Outer Circle will not be imported into your entities and use cases the opposite is that is possible now before we move on I want to tell you the pros and cons of this software design philosophy so with key architecture it will be easy to test your project as most of the logic of your application can be tested independently from any external dependency like databases or apis also it will be easy to switch platform and framework as the layer of your applications will be Loosely coupled meaning that you can replace part of your router circles with minimum effort and without having to modify the inner circles for example you can change the database without changing anything in the rest of the application on the other side clean architecture comes with a few downsides too one of these is that there will be a lot of boilerplate code as your inner circle cannot impart from the Outer Circle you want to prepare a lot of abstract classes to overcome data and to respect the so-called dependency inversion principle also the increased complexity that is brought back in architecture might be unnecessary if you're just building a simple app that only perform crude operation on a database now that you know the pros and console it's time to build an app with clean architecture using flutter so I've prepared a cursor to show you how to build an app step by step using clean architecture and you can find the link to the course in the video description before you go and check it out let's take a look at the app that we will prepare during the course we will build the social media app with 8 different screens we will apply a feature first approach meaning that we will create a new folder for any feature and then we will create different layers required for clean architecture for each demo so we will have four features the authentication feature that will add user register login and log out via the sign up and the login screen the feed feature that enables users to browse through a list of vertical videos and a list of user profiles the content feature which is where users can create new posts and manage the resisting content and finally the chat feature the let users send and receive messages to and from other users of the app each one of these four feature is built in a way that respect the clean architecture prints also so we will look at the full architecture one of them soon but before we get there let's clarify one thing as you can see in the diagram we have four different layers I'll hover in the step-by-step tutorial we will divide the code over up into three folders or layer the domain the data and the presentation layer and this is similar to what there is a coder did a few years ago it is a clear architecture tutorial now each of these three layers will have multiple subfolder then we will use to break down our code into smaller pieces and yes you're probably thinking that it takes quite a bit of time to prepare all the folders and you can use this Visual Studio code extension to make it faster okay now that you know how to prepare the folders let's try to understand what are these different layers so let's start with the presentation layer so what is the presentation layer this is the layer that interacts directly with the user and typically it has two rules first it presents data to a screen where it shows them to the user via the widgets then it handles also the user interaction so we can split the content of the presentation layer into two pieces the views include all the widgets required to display something on the screen this is where you use heavily your framework choice and in our case it will be all made with flutter now what you see here as the login and the send off screen it's the output or the code that we prepare inside the news so inside the presentation layer of the authentication feature keep in mind that the widget here and holds for another task they dispatch events to the block and they listen for the new States from the Block to define whether the UI has to be updated and the widget have to be built then let's talk about the blocks this is the logic holder section of the presentation layer and in this course we create it using the block pattern however you could use different approaches with different state management techniques by creating blocks we can combine presenters and controller together in one single implementation I controller the block takes the user input and enter to The Domain layer and as a presenter you repeat package so that they work well into the widget inside the view now keep in mind that as we build the presentation layer of the social media we will create one block for each of the different screens of the iPad now let's talk about the Inner Circle so what is the domain layer so the domain layer is where we store the business and the application specific logic and it is the inner circle and should not be affected by any change in external dependencies or changes in the UI framework in fact it has to be independent from the other layers in our project domain layer is written purely in Dart and it does not have any flutter specific code the domain layer is made of entities use cases and repositories and now let's start to understand the components of the domain layer and let's also look at a few examples from the social media app that we will build throughout the cursor let's start with entities an entity can be Accord data structure necessary for the business rule or an object with methods that hold business logic in ETA entities are used application y side and are the least likely to change we are building a social media app so we have a feed where user browse a list of posts from other users and a post is a business object or the application it is used all across our app and it is less likely to change for example if our database changes the post object will still be the same and we can say that the class defining which data are required to create a post object belong to the domain layer of the app and it's an entity now let's move on to the use cases the use case refers to the class that contains the application business logic in these use cases orchestrate the flow of data to and from the entities in the application use case should not have dependencies from the UI or from any other external framework and their functionality might change according to the application specific logica now going back to our feed we need to display the list of posts to do so we have the get post use case that will be called by the presentation layer and in this situation the responsibility of the use case will be to retrieve the list of pasta to display to the user to complete this responsibility it might perform one or more action PR you will just invoke one method from the repository in order to retrieve the data finally we have also the repositories and we will use the repository to Define which is the right data source to send a request to retrieve the data in fact applications can have multiple remote data sources and the data might come from multiple databases in our app it's draw the repository to choose data so repositories are built across the data in the domain layer in the domain layer we only create an abstract class that works as a contract for the repository then the actual implementation will be done in the data layer following this approach we expect the dependency version principle that state that high level modules should not depend on low level modules and both should depend on abstractions which in practice means that we are Loosely coupling the domain and the data layer which make it easier to have multiple implementation or to make changes to the implementation of the repository now let's take a look at the post repository here as you can see we simply have an abstract class the interface of the post repository with the definition of the required methods including what are the input that they need and what is the expected output and for now that's all about the domain layer so we can continue so what is the data layer this is the part of our app that manages the application data by retrieving them from the external network or from a data cache within the app it is part of the Outer Circle of the clean architecture as most of the retrieval happens through an API call to a server a database and so on and so forth the data layer is made of repository models and data sources so let's try to understand each of these three components of the data layer by looking at a few examples from our social media app that we will build throughout the course so starting from the repository this helps us to Define which data source to use based on the internet connection and other criteria in the data layer is where we create the actual implementation of the methods and the logic for the repository so if we take a look at the app that we will build we have the implementation of the post repository this is where we apply the logic to decide whether to retrieve the pulse data from the local storage or from the remote data source then in the data layer we have also the model the role is to make sure that the data retrieved from the external platform is mapped to an entity and vice versa therefore they contain the conversion methods like from Json or from XML in fact from your databases you're likely to get data in Json or other formats and this has to be processed and converted into identity so we keep this separate from the end entity as the conversion logic might change if you change your database for example and these changes should not affect the inner layers of your application so if you take a look at the message model in our app as an example we have a few methods to parse the data from Json and to convert them into antidisa and we can use this in order to take the data and make sure that they are in a format that we can use to display them inside the UI now finally we also have the data sources and these are responsible for returning the data from the databases or any other storage platform now these are also responsible for any API call in data manipulation such as creating a new user document in a database or saving a file into a cloud storage platform for example and that's all for the course introduction channel members have access to the first 15 lessons on the course here on YouTube while the full course is available for sale on my website and you can find the link in the video description

Channel: Max on Flutter

Views: 36,386

Keywords: flutter clean architecture, flutter clean architecture with bloc, flutter clean code architecture, flutter clean architecture 2022, flutter clean code, flutter clean architecture with provider, clean architecture flutter, flutter domain layer, flutter crash course, flutter course, flutter bloc library, clean architecture, flutter tutorial, flutter clean ui, flutter clean architecture 2023

Id: ZNMz2hOrddo

Length: 11min 28sec (688 seconds)

Published: Thu Dec 01 2022