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

have you ever heard about clean architecture you must have heard it but do you know what it is exactly clean architecture is the blueprint for a modular system which strictly follows the design principle called separation of concerns more specifically this style of architecture focuses on dividing software into layers to simplify the development and maintenance of the system itself when layers are well separated individual pieces can be reused as well as developed and updated independently clean architecture is one of the most powerful solutions to build clean apps with independent data layers that multiple teams can work on the resulting app would also be scalable readable testable and can be easily maintained at any time as we can see in the diagram we have three main layers of the architecture data domain and the feature layer which is the same as the presentation layer we also have two additional supporting layers the resources in shared Library presentation layer this layer presents the app content and triggers events that modify the application State this layer has three parts Pages part which include application Pages State Management part which contains files related to State Management that we use such as block or riverpot or other state managements and the widgets Parts which includes all the specific widgets that we use on the pages domain layer domain layer is the innermost part of the layers and has no dependency on other layers it contains entities repository interfaces and use cases the domain layer would be written purely in Dart without any flutter elements the reason is that the domain should only be concerned with the business logic of the application not with the implementation details the entities must be our data types or classes that are used in different parts of our software or in other word we Define in our version of clean that our entities are the objects that can be returned to us or we can send to an API repositories and domain layer or abstract classes or contracts and define the properties and methods that our project will need in a specific feature use cases include application specific business rules each event is an interaction of the user with the system and we can call this a use case like sign up log in and other interactions use cases are nothing more than a bridge between layers it's a single call to business logic data layer the data module which is a part of the outermost layer is responsible for data retrieval this can be in the form of API calls to a server or a local database it also contains repository implementations this layer has three parts one of the parts is the repository part it includes actual implementations of the repositories in the domain layer repositories are responsible to coordinate data from the different data sources the other part is the data source it consists of remote and local data sources remote data source will perform HTTP requests on the API while local data source will cache our persist data and the last part is models which representation of Json structure and allows us to interact with our data sources now let's go to create the folder structure in the project the first folder that we need to create is the features folder every feature that the app has is placed inside this folder for example the auth feature every feature of the app will be divided into three main layers presentation the main and data layers so for each feature we have to create these three folders as we said before the presentation layer has three parts called Pages State Management for example block and the widgets part and also as I explained the domain layer has three parts called use cases entities and repository we will create these as well and finally we have to create folders for the data layer in the data layer we have three parts named repository data sources and models apart from the features folder we can have other folders in the project usually we have two folders config and core in the configs folder we put project related configurations such as theme or routes and in the core folder we usually pull anything which has to be shared between multiple features into the core folder such as Network they're util or use cases so in general the structure of the project with clean architecture will be like this but we may have other folders what the base structure is like this in the next videos we will do many projects with clean architecture so stay with us here we're going to be explaining and building a simple news app that gets its data from rest API and also caches the data locally in the devices it's a lot of work patience and focusing on how we will Implement each part of the app in a very pretty clean way and the final results will be awesome the first thing we need to do is to add the packages that we need to use in the project the first package we add is flutter block which we will use to manage the state we will also use the equatable package a flutter package that makes comparing Dart objects by equality is much easier we use this package in Block State's classes the next package is get it this is a simple service locator for Dart and flutter projects with some additional goodies highly inspired by splat it can be used instead of inherited widget or provider to access objects from our UI we also need the Intel package for the date format the next package is floor floor is a type safe reactive lightweight source code generator package that uses the sqlite to store its data locally it's again inspired by Android room to make requests to the API we use retrofit retrofit is a source code generator package that uses Theo as an HTTP client to generate the proper methods that we need to deal with rest apis based on abstraction it's inspired by the Android retrofit the next package is flutter hooks hooks are a new kind of object that manage the life cycle of a widget they exist for one reason increase the code sharing between widgets by removing duplicates then finally we should also use the cache Network image package this is a flutter library to show images from the internet and keep them in the cache directory also before we forget we must add retrofit and floor generators along with build Runner and Dev dependencies our work is almost finished in pubspec here at last we just have to define the fonts that we will use in the project now we go to the folder structure as we mentioned before we will use clean architecture in this project the first folder that we need to create is the features folder every feature that the app has is placed inside this folder for example display daily news is a feature every feature of the app will be divided into three main layers presentation domain and data layers so for each feature we have to create these three folders as we said before the presentation layer has three parts called Pages State Management for example block and the widgets part the domain layer has three parts called use cases entities and repository we will create these as well and finally we have to create folders for the data layer in the data layer we have three parts named repository data sources and models apart from the features folder we can have other folders in the project usually we have two folders config and core in the configs folder we put project related configurations such as theme or routes and in the core folder we usually pull anything which has to be shared between multiple features into the core folder such as noodle or use cases we may create some folders later in the next part we will go to the features folder and start implementing different parts of the features welcome to the second part in this part we will go to The Domain layer and then we will Define entities and create classes I'm going to be needing you to be focused because we have a lot of work to do so grab your coffee and let's get into it we need to prepare things before we start implementing the layers so the first thing we need is to write some resources required to implement our logic properly first we create a folder named resources in core then we create a file inside it named datastate which contains the following code this abstracted Base Class is very handy when we come to the fact that we're about to communicate with network calls but how in order to determine the state of the request being sent to the server and its response this wrapper class can be used to wrap our entire network call which is so important later on when we will have too many requests and logic you will see how minimized the code would become as you can see in the code we have two different states one when we get a successful response and the other is used when an error occurs while sending the request or receiving the response when you are going to start a project from scratch which part do you code first in my case I code the classes of the data that I'm going to use throughout my entire application I consider this to be a good practice as it helps us lay down the information that will flow through all of our logic this means that we have to start from the domain layer the main is the inner layer which shouldn't be susceptible to the whims of changing data sources it will contain only The Core Business logic and business objects it should be totally independent of every other layer in the domain layer we must first specify our entities what are the entities entities are business objects of an application or system now with this definition what are the entities of news app Define entity just answer this question what kind of data will the news app operate with as you probably understood the answer is article entity now to find out which Fields article class must have we have to take a look at the response from the news API if we pay attention to the response we can see that the article has Fields such as title description content and other fields that you can see we must Define the fields in the article entity class that the application needs now we go back to the entities folder and create a file called article and inside it we define a class called vertical entity then we Define the fields we need and also Define The Constructor of the class with these fields and finally the class must extend equatable it extends equatable to allow for easy value comparisons this will help us later in managing state in the block equatable comes with props property which has its own purpose and object comparison props property decides which objects we should consider for object comparison props is a getter method that will return lists of objects here object can be of any type we have to Simply return a list of all the objects that are available in our class welcome to the third part in this part we are going to work on the repository repository is the bridge between the data layer and the domain layer actual implementations of the repositories in the data layer repositories are responsible for coordinating data from the different data sources the repository of the domain layer is in the form of an abstract class in which there are functions that still need to be implemented so it is in the repository of the data layer that we will start implementing the abstract classes first we create a folder called repositories in the domain and then create a file inside it called article repository if you remember we said that the domain layer contains only the interfaces and the implementations will be in the data layer so now we Define an abstracted class named article Repository now here we have to Define our methods currently we have a method called get news articles that returns a future data of type article entity list which wrapped with the data state to determine the state of the response now we have to implement the repository we created as we said before the implementation should be done in the data layer but before we do the implementation we need to create the article model therefore first we create a file called article in the data layer and in the models folder then here we define a class called article model article model fields are the same as article entity fields and also has a from Json method so here we extend the article entity and then Define the fields and finally we create the from Json method in this way now you may have a question why do we need a model and not use entity because as we said before the domain layer must be independent and not depend on other layers and if we want to use entity instead model in the data layer we may change our database in the future or use XML instead of Json and have to change the entity which is against the rule of clean architecture now the next step is to implement the article repository in the repository folder we create a file called article repository and then define a class inside it called article repository implementation now for implementation it is enough to use the keyword implements in front of the class name and then type the class that we want to implement which is the article repository class in the domain folder if we look at the error we will find that the error says that you should implement the get news article function this is the same function that we Define in domain as abstract therefore in this way we create the Define method for implementation now here instead of returning a list of article entities the method should return a list of article model because we should not use entities in the data layer now here we have to get the list of Articles from the API and return it so stay with me in the next video things are getting a little bit interesting here as we all know we're talking about articles news and stuff like that but where is that service that provides us the data we need do I have to write everything myself absolutely no because we're going to using the retrofit package that uses the do as a network client the first thing we have to do is to create a folder called remote in the data source folder because later we want to work with the local database we will also create folder called local as we said we will use the retrofit package to request the server we already made a video about it please watch it first and then come back here now we create a file called news API service here we first Define an abstract class called news API service this class is responsible for handling all the network call methods because retrofit generates code we must specify the dot g file with part at the top of the file in our case it will be news API service.g.dart also we need to use rest API annotation and pass the API based URL to it so the generator will know it's a retrofit interface to set the base URL we create a folder called Constance in core and then create a new file called constants inside it now here we Define a string type variable named base URL and set the API URL now we go back to the news API service class and set the base URL then also we need create a factory Constructor that accepts deal the last thing we need to do is to define the method that we are going to make a request to the API therefore in the abstract class we Define a future method called get news articles which returns a list of article model the return type here is wrapped with class called HTTP response and this is because we need details about our response such as status and message this is very helpful for us to determine certain things once we get the response like whether that we get a successful response or some server errors we do not implement this method any of this supposed to be implemented by the retrofit generator now it is enough to determine what method this is that's why we have to use HTTP annotation therefore we must use retrofit annotations as you know the type of request we send to the apis get retrofit uses the base URL that we defined above and now we need to put the in and point and get which can be top headlines according to the API URL if we pay attention to the API URL we can see that there are parameters such as API key country and categories we must also set these parameters in our request for this in the get news articles method we set these parameters as input by using query annotation so that when calling this method we pass these three parameters to it in this abstracted method we're basically telling the retrofit to generate a method for us that can internally uses the do to make a get network call to an endpoint name top headlines with the base URL we provided at the top of the class and also takes multiple query parameters as defined in the function's parameters and that's it we don't need to write anything else to generate the code run the following command in your terminal in the next video we will use the news API service class in the repository and we will also go to the use case part so stay with me as you know in the previous video we discussed the implementation of sending requests to API using retrofit in this video we want to call the get news articles function and also go to the use case folder let's go back to the article repository implementation class here the first thing we have to do is to create an instance of the news API service which is accepted by the class Constructor Now using the news API service instance we call the get news articles method and set the return result in a field called HTTP response we also need to set API key country and category parameters for the get news articles function since we are not going to use variable values and the values are constant that is why we Define these values in the constants file and then we set here now in the next step we will check that if sending the request to the server was successful we will return data success along with the list of Articles which will be HTTP response.data this data success extends the data State class and we defined it in the resources folder and we use it when our request is successful and if the request to API is not successful we will return data fail to which we must pass the O error and we also set the value of do error parameters using HTTP response like this and finally in order to be safe from unknown and unexpected errors we put our request in the try catch and in catch we use do error and return date failed our work is finished here now we have to check the use cases but before checking let me briefly explain what is a use case use cases are where the business logic gets executed all a use case will do is getting data from a repository now we are going to have one of them like get article use case when it comes to use cases every single one of them should have a call method it doesn't matter if the logic inside the use case gets us article or sends a space shuttle to the moon the interface should be the same to prevent any confusion now let's go to create good article use case but as I said all use cases have a call method so for clean code we first create a basic use case so that the rest of the classes implement the basic use case therefore in core we create a folder called use case then inside it we create a file called use case here first we create an abstract class called use case which has two inputs type and params these are called generic types as I said all user cases have a method named call so we create the call method which Returns the type and also takes params in its input in the call method we get the data we need from the repository we are done here now we have to go to create the get our Google use case go to The Domain folder here in the use cases folder we create a file called get article now here we first define a class called get article use case now we use the implements keyword and implement the basic use case that we created a few minutes ago now we set the generic types here the value returned by the call function is the article entity that wrapped with the data state to determine the state of the response and in params since we don't need a parameter we just type a void the reason for this error is that we must Implement and override the call method we can do it this way as we showed in the data flow the use case gets the data from the repository and returns it so we Define an instance of the article repository and set it in the class Constructor then by calling the get news articles method we get the data from the repository and return it in the next video we will go to the presentation layer so stay with me in the previous videos we talked about the domain and data layers and worked on those layers in this video we want to go to the presentation layer and create blocks so stay with me the first thing we do is create a folder called article in block now inside this we will create another folder named remote because later we will create another block to display the article from the database which will be in the local folder as you probably know we should have three files in our block event State and block files so I create them I want start from the state file because many of you are familiar with block I don't want to explain too much as you know we have to Define States here the first thing we do is Define a basic state that the rest of the states must extend so I Define an abstract class called remote article state that extends equatable here we will have two parameters a list of article entity in do error we will pass the list of Articles when the request to the server is successful and we will pass the do error when the request to the server is not successful I also Define these parameters in the Constructor using the props method in equatable I determine that these two parameters are considered when comparing the states we will have three states the first case is that when we request the server and wait for the server to return the data in this case we must show loading so we have a state called remote articles loading the next state will be when the data has been received and we have to display it so we also Define a state called remote articles done which must have a list of articles in its Constructor and the last case is when we have a problem in receiving data from the server and we have to display an error therefore I will create a state called remote articles error which is Theo error in the Constructor the definition of the states is completed now we have to define the events the definition of events is the same as the definition of States first we Define an abstract class named remote articles event we will have only one event that we will call and receive data from the server so we will define an event called get our particles that extends remote articles event now we need to create the block class because many of you are familiar with block that's why I won't go into details and explain more deeply the first thing we need to do is define a class called remote articles block that extends block we must specify an initial state by passing it to the superclass Via super we can determine loading State as initial State as you know we have to register the get article event so we create a method called on get articles that has the event and state in its input now we register the get articles event in the event handler like this now we need to get the data from the server in the on get articles method using the get articles use case and then display them using the remote articles don't stay so first we need to create an instance of get article use case that the Constructor accepts in the next video we will register the get article use case class by injecting dependency in the Constructor now in the ungit article method we must call the get article use case did you know that in Dart a method name call can be run both by calling object.call and also by object that's the perfect method to use in the use cases so we call in this way and save the response returned by the call method in the data State the return value is the data state so we have to check if the data state is equal to success and the data is not empty we emit the remote articles then State and we also pass the data and if the data state is equal to data failed we emit the remote article's error State and pass the error the implementation of the block is finished in the next video we will go to dependency injection so stay with me the idea is simple we want a reliable way to register and access all objects inside our app for this we need to use service locator pattern yet it is the most used package to implement the service locator pattern in flutter get it allows us to register all objects and their dependencies at startup and access all registered objects from a single Source let's look at a simple example for example this API class contains the code necessary to communicate with the joke API used in the app the network calls me to the joke API is handled by the client class from the HTTP package if you pay attention the API class is dependent on the client class and the most basic way to inject this dependency would be to pass it through the Constructor this way when you need the API class somewhere else in your code base you would have to pass in the client class now in a situation where we also use dependency injection where the API class is needed to call home screen somewhere in the code base we would pass in the API class it depends on and also pass in the client class that the API class depends on I'm sure we can see how things can easily get out of hand when we try to access classes with multiple dependencies across across multiple places this is where Getty comes in with get it we simply register our Dart objects and the classes they depend on which can then be easily accessed from anywhere the first thing we have to do is create a file in the lib folder called injection container now here first we need to import the get it package then we need to find an instance of get it using get a DOT instance we must Define the instance globally so that we can access this instance in all files and anywhere this instance is going to hold all the dependencies we need next step is to create a method named initialize dependencies which would be called before run app it will be inside this function where all the classes and contracts will be registered and subsequently also injected using the Singleton instance of get it stored inside SL using getit classes can be registered in two ways Factory and Singleton with Factory registration when you request an instance of the class from get it you'll get a new instance every time good for registering view models that need to run the same logic on start or that has to be new when the view is open with Singleton yet it keeps a single instance of your registered type for the rest of the app's Lifetime and will always return you that instance when requested we're going to register everything as a Singleton which means that only one instance of a class will be created for the app's lifetime the first class that we can register is the news API service class the registration process is very straightforward to register we must use the register Singleton method now here we have to pass the class name is t parameter then we just instantiate the class as usual and pass in a Cell into every Constructor parameter like this because news API service accepts do in the Constructor and depends on deal we must register do before news API service in the same way then here pass assault to news API service the next step is to register the article's repository notice that they depend on the contract and not on the concrete implementation however we cannot instantiate a contract which is an abstract class instead we have to instantiate the implementation of the repository then we need to register the use cases so we register the get article use case and finally we have to register the blocks presentation logic holders such as block shouldn't be registered as Singleton because your block will return the new instance when the state was changed for now we are done here in the next video we will go to the presentation layer and display the news so stay with me in the previous video we implemented service locator and registered classes and dependencies finally in this video we want to show the news list on the home page but before doing anything we must call initialize dependency and run app so I go to the main file and before the run app method I call the function and also use away now in the presentation and inside Pages we create a folder called home and then create a file inside it called Daily News here we first create a stateless class called Daily News then we return a scaffold in the build method to show the changes we need to set daily news as the home and material app now first we have to set AP bar in the scaffold so we Define a widget called build app bar that returns app bar in the title we've set daily news text and then set its color to Black using Style in order to be able to use the fonts we have defined and set a theme for the app bar it is better to define a theme for this we create a file called app themes in the config and theme folder now here we Define a theme method name theme which Returns the theme data here we need to set the background color and also the font name we also need to define a theme for the app bar so we Define a method called app bar theme and inside it we return the app bar theme now here we determine the background color elevation Center title as well as the theme of the icons and the text style of the title and finally to apply the theme we must set the theme in the material app the next step is to display the news list for this we Define a widget called build body as you know we use block to display news so we return the block builder in the build body and set remote articles Block in remote article state now let's check the states in the Builder if the articles are being loaded we will display a circular progress indicator if there is a problem in fetching the Articles from the server we will display a refresh icon and if the fetching of the articles is successful we will return a list view Builder in the list view Builder we set the item count equal to the length of the Articles and in the item Builder we currently return a list tile to test the block to see if it works correctly or not now we set the build body in the scaffold in the body property and then refresh the app as you can see we ran into a problem this error tells us that we must provide the block for the desired context one way to fix this error is to wrap the material app inside the block provider and set the block we want that is the remote articles block now here in create we have to determine that when the block is created the get articles event should be called and executed and now we refresh again the origin of this error goes back to get article use case in remote article block because the value of get article use case is not determined to solve such problems we use serif's locator to solve this problem it is enough to use a cell instead of block provider and create the block problem is solved and our block is working well but we don't see any data there must be a problem in receiving data the best way to find out what the problem is is to print the error in remote articles block the first step to fix the error is to check the API response and let's compare it with the from Json method to see if it Maps correctly or not as we can see we have a list called articles in the API response but in from Json we did not map to this articles to fix this problem we need to change the file generated by retrofit therefore we open the file in where it Returns the result we determine that it also considers articles like this this error is due to the fact that the list cannot be mapped to solve this problem we just need to change list to map here and finally to solve this problem we have to change the value type from bar to article model list now we restart again finally we are succeeding now it is enough to specify the type of map we want to return in the map and we have to set the article model like this now restart again and see that the data fetching and display work correctly and in the last step we have to work on UI because we don't want to work on UI and our main goal is to teach clean architecture that's why I didn't Implement UI in this video I implemented it separately and placed it in the widgets folder in home now it is enough to return the article widget in the list view Builder and finally now we restart again you can see that the news is being displayed correctly in the next video we will go to the local database so stay with me in the previous videos we worked on the online part of the app and were able to make a request to the API and get the news from the API and finally display it in this video we want to start working on the offline part and create the local database we will use the floor package for the database the floor database is inspired by the room persistence Library it comes with automatic mapping between in-memory objects and database rows while still offering full control of the database with the use of SQL it is a layer that sits on top of an sqlite database and makes it easier to use the floor plugin uses the architecture pattern data access objects or Dao if you are working on a project then you might separate it into layers for example presentation layer contains UI then domain layer contains business logic then we have the data access layer which would be the layer communicating with the database therefore in that layer one can use the dial pattern the Dow is basically an interface or abstract class in which you declare different methods that will add delete update or read from the database without using the dial pattern you would have to manually write the code to perform those operations which could be error prone before creating the the abstract class we need to create an entity class The Entity class would represent a table in the database therefore the class name will be the table name and the fields will be the columns in the table we have the article entity right now and this class is supposed to be converted into a table in the database but as we said before we should not use entity in the data layer and we should use the model instead therefore we open the article model to convert a class into a table we must use entity annotation to Mark our classes in entity class we use The annotation at entity above the class declaration then we set the table name inside it since every table has a primary key therefore we set field ID as primary key like this after creating the entity class we now need to create the Dow or data access object abstract class to do this first we create a folder called now in data sources then we create a file called article down inside this now we Define an abstract class called article dial we need UC annotation a dow to Mark the abstract class as a data access object we will have three methods insert delete and get first we Define a method called insert article this method is supposed to insert the articles in the database to be able to insert articles in the database all we have to do is annotate the method with the add insert annotation we do exactly the same for the delete method we Define a method called delete article then use the delete annotation to fetch the inserted articles we first Define a method called get articles which returns a list of article models we don't have annotation to fetch and we have to write SQL query for this we can use Query annotation and write the desired query inside it the implementation of article Dao is finished and now we have to create the database of the application to do this we first create a file in the local folder called app database then inside it we Define an abstract class called app database which extends floor database now we need to annotate the class with the database annotation which we also provide a list of entities now to be able to access the methods declared in the articleletto abstract class we create an abstract getter method like this as you may know floor uses generator so we need to add this line above the class definition now open the terminal and run this command to generate the codes to fix these errors it is enough to import these libraries in the app database file the implementation of the database is finished now we have to call the method that creates the database somewhere as you guessed we have to do this in injection container therefore we open injection container file and build the database in this way we use the generated class floor app database to be able to create the database under the name app database.db and finally we have to register the app database class like this now we have delete the app and run it again to fix this error it is enough to call and sure initialized using widget's flutter binding before calling initialize dependencies now restart the app again we will see that the app runs without any problems in order to understand whether the database has been created correctly or not we must use the dbrowser software I will put the link of this software in the description to use this software we have to open Android studio and find the project package name from the device browser and Export the database in this way and import it in the DB browser as you can see the article table is displayed so everything is okay in the next video we will use the database so stay with me in the previous video we created app database using floor package then we Define the article Dow class in the methods we will need in this video we are going to use these methods and implement the repository and use cases the first thing we need to do is to add the database methods in the article repository class inside domain layer and then Implement them in the data layer therefore we open the article repository file in the domain layer as you know we have three methods in article dial get articles save article and delete article so we add the methods like this the reason for the error in the article repository implementation class is that we have to implement these three new methods that we added to implement the first thing we have to do is to Define an instance of the app database class that the class Constructor accepts Now using this we can access the article dial and use its methods in the implementation for example in the get saved articles method we can use the get articles method in article Dao and return the list of Articles just note that we should not use entity and data layer and we should change this to model we do the same in remove article and return the delete article using App database and finally in the save article method we call the insert article method like this the reason for these errors is that the insert and delete methods in the database accept the article model but what we send is the article entity to solve this problem we Define a fermentity method in the model which takes the entity and converts it to a model and now we use this method a last step is to define the use cases of the database the first use case we want to Define is get saved article so we will create a file called get saved article use case now let's do the same thing here exactly like the previous use case that we used to fetch news so I will copy the codes of that use case and paste it here now here first I change the name of the class to get saved article use case then I change the return value from data state to a list of article entity I do exactly the same thing in the call method and finally instead of get article we call the get saved article method we have to do these things for two other methods save article and remove article first we create a new file called save article use case then I copy the get saved article use case codes and paste it here now first I change the name of the class to save article use case when we want to save the article we don't return anything so here I put void instead of article entity and data and because we have to get an article and save it I set article entity in the parameter I also apply these changes in the call method and finally I call the save article method for the remove article method we have to do exactly the same thing only we have to use remove instead of save so I do it we are almost done with the database and finally we have to go to the injection container first let's fix this error this error is related to the fact that we set the app database in the article repository implementation Constructor and now we have to pass here and it is enough to pass a cell the last thing we need to do is to register the three cases we created like this in the next video which is the last part we will complete the presentation and implement the saving and deletion of news so stay with me in the previous video we added the database methods to the layers and created their use cases in this video we want to use these use cases and save the article in the database delete it and display the Articles we saved the first thing I want to do is to create the local block so I create a folder called local then we create block State and event files we have three events get saved article remove article and save article so we have defined these three events first we Define an abstract class called local articles event which has the article entity in the Constructor now to define the three events we need to extend the local articles event because many of you know the block I will not go into the details we have two states local articles loading which is for displaying the loading and local articles done after the articles are fetched we use this state and display the Articles like Events first we Define an abstract class called local article state which has a list of article entities in the Constructor now we Define classes by extending local articles state now we Define local articles block and set event and state here first we need to find instance of the use cases that we should use which are also accepted in the class Constructor now we must specify an initial state by passing it to the superclass Via super that we set the local articles loading the next step is to create methods and use use cases the first method we need to create is called on get saved article in this method we fetch the list of Saved articles using get saved article use case and emit local articles done state to display articles the next method we need to Define is remove article in this method we remove the article from the database using the remove article use case and finally I call the on get saved articles method to fetch the list of Articles from the database and display the updated list and finally we need to define the save method the save method is exactly like the remove method but instead of using remove we have to use Save now there is only one thing left and that is to register these methods in the event handler like this an event handler is responsible for converting any incoming events into zero or more outgoing States one thing we forgot in the save and remove methods we did not set the article we want to save or delete in the use cases parameter so we do this like this the block implementation is finished and now we have to go to the UI as we said in the previous videos our goal in this tutorial is not UI and we use Simple uis that no need to teach and you can check and understand the source code first of all we have to register created the Block in the injection container we do it exactly like the remote article block so we do it the same way and set a cell for the use cases that are in Constructor I created a new page called article detail which accepts article entity in its Constructor and displays article details such as image title and description then the daily news page I defined a method that when we click on the article we go to the article detail page in the article Details page I defined a method called on Floating Action button press which I call when the bookmark icon is click and using the save article event that we defined in the local article block I saved the article in the database and then show a snack bar and to display the saved articles I created a page called saved articles where we fetched the saved articles in the database using the get saved articles event and then display them this is so simple to access this page I created an icon in the app bar of the daily news page and when we click on it we go to the saved article page as you can see here we have a minus icon when we click on it we call the on remove article method and then in this method we delete the article from the database using the remove article event this was the last part of the news app project with clean architecture in this project I tried to teach clean architecture with a project we fetched and displayed the news from the API and then we were able to save the article in the database or delete it from the database I hope you enjoyed and thank you for supporting see you in the next project and make to sure hit the Subscribe button to get next video foreign [Music]

Channel: Flutter Guys

Views: 166,973

Keywords: flutter, flutter tutorial, flutter clean architecture, flutter tutorial for beginners, flutter clean code, clean architecture, clean architecture flutter, flutter bloc tutorial, flutter bloc, flutter local database, flutter database, flutter projects, flutter sloid, dart, dart solid

Id: 7V_P6dovixg

Length: 40min 53sec (2453 seconds)

Published: Fri Jun 30 2023