Flutter Clean Architecture - Full Course

[Music] 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 redraw 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 in 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 a 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 will present for a phone alright 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 we'll 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 in 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 never-ending 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 a button when you click the button this will trigger the use cases inside the business layer in this use case we'll get the data that you want in order to get that 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 will use the models once we have used the bridge to pass between 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 that 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 starts from a user interaction then you 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 foreign foreign you will learn how to use clean architecture for your own project the goal is to make sure that you learn as fast as possible and as simple as possible so this course has been rewriting like maybe 15 time just because it was not simple enough so this is the latest version and it's probably one of the easiest way to learn so what we will do today is first we will need to download the code so the code is available on github.com and you can get yourself a copy so you can click there the link is in the description of this video and next what we'll need to do is open a comment prompt inside this I will create my project in my desktop so I will see the my desktop but you can create your project anywhere you want so what I will do is I will say git clone and I will put the HTTP address so now I have the project in my desktop okay so the next step is to open the project in Visual Studio code so you can see that my flutter map clean architecture I will select the one in the desktop this is the one we just downloaded together next you will click on ROM Pub get or you can go inside the public pubspec.com and click the get packages it's the same thing so what happened is this will download all the packages or the dependencies that is inside our clean architecture project but if you have a problem at this point it's because we don't have the same flutter version I have a noble disk version and maybe you have the newest one and it won't work so what you need to do in this case is give me a second I will just launch the application meanwhile I explain you how to do this what you have to do is you will need to create a brand new flutter project okay and inside this brand new flutter project you will need to add the things that are inside this one first you will need to go inside your pop spec.com and you will need to add these dependencies if you want you can update them for the latest version otherwise you can use the same version as I have next you will need to go and add the assets and the fonts inside your pubspec.com because inside this project we have some fonts and also some assets so make sure that you have this also in your new flutter project if your version is different of mine after this you will need to copy paste the library folder so in your new project you will delete the library and you will copy paste this one finally you will need to copy paste also the asset folder this is where we have the fonts and the image so this was in case you can't launch the application and at this point you should be able to launch the application and it should look something like this let me explain you what the application does currently and what we will do inside this course to add to this application in order to learn clean architecture together currently the application is a randomizer of Pokemon so if I click search this will give me the Pokemon 719 which is DNC okay we don't have the image yet and this is the next step we will do together we will create a new feature inside our clean architecture and the feature will be to retrieve the image from the internet coming from this URL so this page is the API that we retrieve from the internet okay and you can see that inside this API we also retrieve a URL which give us the image of the Pokemon so if we take a Pokemon because yes you can also select manually if we take the Pokemon 6 by example which is the coolest we click search this will give us Charizard and if we take the font shiny and we copy this URL we should be able to get the image of this Pokemon so I will open a new page paste this and enter this is the URL so our goal for the next feature of this clean architecture is to retrieve this image and show it inside the application by using the clean architecture next let me talk about the API that is currently inside the application so the API we use is the poke api.com you can go and click check out the documentation you can go on the Pokemon section and again Pokemon this is the HTTP address that we use in order to retrieve this information in the application by example the name chart reserved id6 the image which is the font the front default and the front shiny and the types name fire name flying okay so let's try this inside our URL so if I paste this and I put the number six because this is the one we have currently Charizard you will see that we have many things first thing first is you probably don't have the same visual as I do the reason is because I use an extension called the Json view this will convert the API into a Json so it's more readable I think so so you can download this Json view if you want next let's go and minimize these things and you will see that we have the name Charizard like this then we have the ID right there and we have also the Sprites which is this section and the types which is this section So currently we use only a couple of things inside this API you can see it's only the name the ID the Sprites and the types we don't need the rest of the API so that is what is currently inside the application using clean architecture and this is one feature inside the app we will create a new one what we will do next is we will talk about how this API work inside clean architecture in the code so we will look at this if we go inside the code but don't worry we'll go pretty fast the goal is just to give you an overview of the code of the first feature because after we will create another feature step by step together okay the goal is to make sure that at the end of this course you are able to implement clean architecture by yourself inside your applications in this video we will talk about clean architecture and how it works a little bit visually in the next video what we'll do is we'll go through the feature that is already inside the application and I will try to explain you an overview of how it works and after this in the next next video we will start coding together so now let's give you a quick explanation of how a feature works okay so when the user click a button inside the widget of a page for example this will trigger the provider and the provider will trigger a function either failure or entity this function will also trigger the use case inside the business layer and after this it will return either an entity or a failure I will explain you later what we will do with the entity and the failure when we trigger the use case inside we will put a repository implementation which is inside the data layer but this use case will go right there and it will trigger the repository of the business layer with the entity and the reason is because we want to receive something as an entity or a failure we don't want to receive a model because we use a bridge between the two repository this will trigger this data layer and it will go through a certain logic first we will say do we have any internet connection if it's the case then we will go inside the data source layer in the data source layer we will call the remote data source implementation because we have access to all this information and we will get the information from the API right after we will go inside the local data source and we will save all the data inside the application this will return a model or a failure and it will be automatically converted because we use the bridge of the repository which this one will return actually The Entity or failure okay so now let's go in the other route if we don't have any Internet connection then we will go inside the data source layer from this one we will go inside the local data source and we will call the last information saved inside the phone you remember the last time we had internet we saved the information so we will call this last information and this will return us either a model or a failure it will also go through the bridge of the repository to return us an entity or a failure okay so now let me explain you what we will do with the entity or the failure we will go inside the pages and the widgets and right there we have some sort of logic if we receive an entity then we will display the widget with all the information otherwise we will go through and we will say do we have any failure if it's the case then we will display an error message with the failure otherwise we know that this is currently loading because the either failure or entity just has been launched and we are waiting to receive either an entity or a failure so this was the visual representation of what actually happened inside the circle of clean architecture the user click a button which trigger a use case the use case will trigger the bridges and in the bridge we can use the data source the data source will go through a logic to get either the information from internet or locally and then it will update the provider which will also update the pages and the widgets so in the next video as I told you we will go through the first feature that is already inside the application and after this we will start coding together so let's go inside the code of the project just to have an overview first we have the core inside the core we have the connection to know if we are connected to Internet or not after this we have the constant we have the errors which exception and failures and we have parameters the parameters it's pretty simple it's the thing you put inside the API by example if I go back inside the API you can see that at the end I need to put the ID of the Pokemon so we have a Pokemon parameter and at the end we put the ID that's the goal of the parameters but don't worry if you don't really understand everything because we will go through step by step with the new feature next we have the features folder this is where we will put all our clean architecture features currently we have one of them which is Pokemon and inside Pokemon you can see that we have the same layer structure business data presentation and inside each of them we have all the subfolders which is entities repository use case and all the rest this is exactly what I showed you on the board okay so what we'll do is we can have a quick overview of each thing inside the entities what are the entities the entities is what we get from the API by example you can see that we get the IDE the name the Sprites and the types okay the type is a list of map and then you have the type and then stuff like this and you can see that we have a list of type entity if we go inside the type entity then we have the type and then the name okay this is all the structure already coded but we will do one entity together later great so this was the entities after this we have the repositories the repositories is the bridge between the business layer and the data layer So currently there is just this inside and usually you don't really need to change much things inside this after this we have the use case the use case is the action that you want to take from this feature by example is get the Pokemon we get the Pokemon information and also we push the parameters inside in this case it's the Pokemon parameters which have inside the ID again don't worry if you don't understand everything it's just an overview we will do everything together step by step in the next feature we have also the data layer inside we have the data source we have the Pokemon local data source so the goal of this is to get the data locally so we will have two things we have the get last Pokemon which this will go inside the shared preference get a string get the information and retrieve the information as a Json next this will save the data inside the Pokemon model it will return a Pokemon model we have also another thing which is the cache Pokemon the goal of this is to save the data locally so we'll give it a Pokemon model by example and then we will save the data so we will set the string inside the local database of the phone great we have also the Pokemon remote this one is to get the data from the API this one have the get Pokemon which is the use case inside we have the Pokemon parameter and what we do is we use diode to get the information from the API we have the API URL then as parameters we put the ID in this case it was the number six to get Charizard at the end this will return a Pokemon model from Json and if we have any problem then it will return a server exception okay next we have the models the models is pretty similar to the entities okay it's pretty much the same thing so what we do with the models is we have the same structure so the name the ID the Sprites the types but also we have the Pokemon model from Json and to Json the model also have the sub models and they are all the same so the Sprite model the other model the other artwork model and the type model everything so this is all the sub model of the Pokemon model next we have the Pokemon repository from the data layer this is the bridge between the data and the business layer so this is where all the magic happen you can see that we have a feature that will return either a failure or a Pokemon model this is called the get Pokemon so let's see how either work we will try to do something and if it fail then it will return the left side of the eater which is a failure a server failure but if the try works then it will return the right side of the eater and then it will return a Pokemon model okay this is the goal of the eater and this is used because we have the darts package great so what happened here is we try to get the Pokemon and what we say is if there is an internet connection then let's do this online so we will say get the Pokemon from the remote data source and after this we will cache the Pokemon so we will save all the information locally on the phone with the local data source and if there is any error obviously it will return the left side which we turn a server failure next we will say if there is no internet connection then what we'll do is we will get the last Pokemon saved from the local data source and if it work it will return the local Pokemon otherwise it will return an exception which will return the left side of the reader and it will be the cash failure so this was just a quick overview of how the code Works after this we have the presentation layer this is where we have all the UI so we have the pages inside this one we have the data page this is this page that you can see all the information of the API then we have the Pokemon page it's the first one after this we have the providers we have the Pokemon provider which provide either a failure or a Pokemon in this case it's returned to Pokemon because it worked after this we have the selected Pokemon item provider this is a simple counter okay so after this what we have is the widget the widgets is all the custom widgets that we will put inside our Pages because the goal of the pages is to be as clean as possible because we don't want too many code we want the code to be as most as possible inside the widgets finally if we minimize the Pokemon feature we have the skeleton this one is just like the skeleton of the application with the bottom navigation bar that allow us to navigate between pages and that's about it we have one provider and it's the selected page provider a simple end which is the selected page then the widget is the custom button navigation bar we have finally the template folder this is what you will copy paste every time you want to create a new feature you will see the template is very simple everything is already inside as much code as possible is already rotten for you and the only thing you have to do is to change a couple of things and just create your logic the goal is to make sure that you can use clean architecture as fast as possible and as simple as possible so what we will do is we will copy paste a template and create another feature together and I will show you step by step what to do when you create a new feature in your clean architecture project and that's about it so let me just show you a little bit the template we have the same folder structure the business layer data layer with all the subfolder inside and all the code then we have the presentation layer a checklist and an info feature the info feature is just an overview of the clean architecture layers the presentation which have the subfolder the business layer and the data layer okay this is what you could put inside each layers and this is the API we have already used for the first feature alright so for the checklist this is what we will need to do together when we use a template and we copy paste a template to create another feature you see the checklist is very small and this was the goal the goal was to make it as simple as possible and as fast as possible for you to implement it inside your own projects finally we have the main the dart in the main.dart we have all the multi providers okay keep in mind that if you don't want to use provider inside your project you can replace provider for anything you prefer for example block or riverpod or anything else I've used provider because I like it and it's pretty simple to use so if we return to domain next we have the team data very simple and basic we have the OM and in the home we will in a state when we start the application in this case what it will do it will either failure or Pokemon so it will run the provider either failure or Pokemon which will return the information you can see on the screen Charizard but if we restart the application it will return Bulbasaur because the Silicon item number is the first one though so the first Pokemon which is blood buzzer that's why and after this we just display the skeleton so this was a lot of information right off the bat but now you know and you have an overview of the entire project with the first feature already set up inside what we'll do now is together we will create another feature okay and this other feature will be to display the Pokemon visual so from the first feature we have the information of the image address URL and what we'll use is we will use this address we will get the image we will save the image locally and then we will display it on the first screen let's do this okay so the first thing to do is to copy paste the template so what I will do is I will right click I will say copy and then I will paste it inside my features so I will say paste great next we need to rename everything that is called template inside each files okay this will be probably the most boiling code that we will do inside this course we will do rename and we will say this will be the Pokemon image this will be the name of the feature okay after this we have the business layer data layer presentation layer this is all the thing we need to change also for the info feature we already have it in the template so we can delete this file next we have the checklist this is all we have to do to complete our feature so first convert the template into the feature okay so we go inside each folder so first the business then the entities then we rename this one we will do everything step by step we will call this one the Pokemon image entity and we'll go inside a good tips for you is to control F to select everything and to write the word template so this will allow you to know exactly where you need to change the names so you can see that I need to change these two for Pokemon image so I will select all of them and I will say Pokemon image entities now we need to know what we will put inside the entities in this case we only get the image from a new URL so by example if I do it again I will take the front like this copy and I will paste it inside the internet you see we have Bulbasaur okay this is the image URL so what we'll do is first we need to download this image save it inside locally in the phone and we need to find a way to save where the file has been saved so we need the path of the image inside the phone so this is what we need in the entities but if by example for the first feature we had to do something else because we had to save this information locally so every time it depends of what your feature need to accomplish great so for this time what we need to do is to put the path because we will save the local path where the image has been saved okay so now we have finished this first style we can close entities and now we go inside repositories we will rename this one so you need to make sure to rename each file and then rename each word template inside the file so it will always be the same name Pokemon image now Repository so what we'll do is we'll go inside and you will see that we have the template repository we need to change this for the Pokemon image repository so I will take this and I will say I will select all template so I will select this one this one this one this one and this one and I use the Ctrl D for that and next you will say Pokemon image Pokemon image repository and we need to just remove the capital letter of this one Pokemon image parents great so we need to create the Pokemon image Paramount if we go inside the core you see that we have the pattern readers in the parameters you will see that we have a Pokemon parameters of our first feature we have the template parameters this is just to make sure that the template don't have any errors and we have no params so for now what we'll do is we'll just create a simple class and it will be Pokemon image params okay we don't need to put anything inside for now but later we will add stuff so we can close the parameters and we can put the Pokemon image params and next we need to import the Pokemon image entity for this we can just replace the word template for Pokemon image and it should work great so we will do a search we'll do search for template and there is no more template so this file is done now we need to go in the use case so I will rename this for get Pokemon image so you see this is all the boiling code we need to do first next we will change the get template for get Pokemon [Music] image and we need to replace this word template for Pokemon image repository with this one both of them then we have this one template entity so I will select this the next one the next one and the next one and I will replace this four Pokemon image when you select multiple at the time just make sure that you reboot the lowercase letters because we don't want any problems later so for the Pokemon image entity we just replace this the template for Pokemon image that's great and we need to put also the template parameters for Pokemon Pokemon image params and also I will move this on the side and also this one for Pokemon image params great so let's do a little search right there we can see that we don't have the Pokemon image repository and we still have the word template right there so Pokemon image and now let's search for template there is no word template inside this file which is good and we can move to the next one so after the use case we have done all the business layer we are now inside the data so let's go inside the data source we will rename this one and it will be Pokemon image local data source we'll go inside and inside we will replace all the word template so we'll select this this I will see Pokemon image I select three of them right of the bat then I will replace this one and this one and all the one that start with the capital letter so we'll select this oops not this one this this this this this this this this this this this and paste great and I will so change all the small letters so all of this so we'll see Pokemon image you see it's very simple right now we just replace all the word template for Pokemon image Pokemon image okay after this we still have the word template so we'll select next select next select next select next and I will say Pokemon image what I have realized is this one the cache Pokemon image need a capital letter okay so that's pretty good next we have the Pokemon image model which is not working because we need to change in the models so this is normal for now let's find out if we still have any word template in this file I will press enter there is no more so that's good we can keep the file like this and it will auto solve itself when we will change the model so we can close we can go in the template remote data source rename this one and you can put Pokemon Image remote data source okay let's change the word template now so we'll say Pokemon image next I will put template like this I will select all of these I will say Pokemon image I'll put this on the side Pokemon image and we have the capital letter like this like this like this like this like this and I would say Pokemon image next the template params need to be called the Pokemon image params and do we have more stuff yes we have the template model C right there so Pokemon image model so this seems pretty good let's find out if I have forget any template like this it doesn't seems like I have so let's go let's close this file and now open the model okay you will see that right now if I go in model the data source still have a problem but when it will change the model everything will make sense after so we replace this for Pokemon image enter and we replace all the word Pokemon template model or you guessed it Pokemon image model then the template entities will now be Pokemon image entity okay for the import we need to put Pokemon image and then this would now be the path if you remember inside the entities we have put the name path so that's why we need to put path next I will replace template for Pat also and path like this these two blade place and replace this one for K path you see that we have a problem we need to fix this really soon you can click with the control like this and right click this will bring you to the constant we need to add one constant and this one will be called the K path like this and it's simply like that path okay after this we can close the constant and we can use the K path and you see that this one is now available next we need to replace template for path and this file is fine let's go back inside the data source just to see why we still have errors we don't have and if I click on this one we don't have any more so that's good so we have solve the data source the model we just need the repository right now so I'll say rename the template will now be Pokemon image repository implementation we go inside and yeah there is a couple of things to change I will go inside template and I will select all of them so this one this one this one next this one this one this one I will stay with like this so Pokemon image I just want to make sure to keep the lowercase letter and the capital letter so this one will be replaced for Pokemon image and then we have the template model so template I'll select next next oops so say Pokemon image and I just need to replace this for the lowercase okay so you get the point it's pretty simple it's just basic stuff right now template will replace these for Pokemon image now we can replace this one with Pokemon image Pokemon image I will copy this so I can paste it multiple times for all the lowercase letters this one and that's about it and for the capital letters this this one this one this one this one this one this one this one which would be Pokemon image great so this file is also perfect now I will close this and we can close the repository and the data layer I know this was this is a lot of boiling code but you will see after this it will be fine for the pages what we'll do is in this example we only need widgets for this feature so we don't need any page so we can actually delete this one great for the providers we will rename this one for the temp template provider it's Pokemon image provider so I click inside and we have a lot of things to change so there's this template Ctrl d control d control d control D and we'll say Pokemon image next I will replace the template entity for the Pokemon image entity Pokemon image entity after this we have the template Repository so I will select template Ctrl D Ctrl D Ctrl d and Ctrl d d and we'll see Pokemon image we have also this one to replace Ctrl D or Pokemon image I will copy this right there for the template and this template and after this we can rename this also template for Pokemon image and Pokemon image next we need to replace the future template for future or Pokemon image image great so this seems good we have still words template so I will replace these two four of these three template template we have still a lot of them so all of them I will replace this for Pokemon image great so let's search inside this for a template nothing is inside that's good after this we can go inside the widget in the widgets there is no widget but we need to create one okay so that was it we can close all and we will do one last verification so we'll say we will search everything in the entire project for template and you should be able to see a couple of them so we'll minimize stuff and it's okay if we find them inside the template folder but not in the Pokemon image so you see feature template template template template template template template and all of this is good we have checklist Pokemon image that's good checklist okay parameters core constant so everything is fine Okay so we've just finished to set up all the template together I know this was a lot of boiling code but now we have done the business layer the data layer and the presentation layer which is good we are now ready to start coding for the flow the flow is all kind of the logic we need to create together in order to make a feature work so what we'll do is we'll start with the provider the provider is we will go inside this section this is what we will set up and the most important will be to set up the either failure or entity after this in the next video we will go through the pages or the widget inside this example of the feature we don't have any page it will only be a widget so what we'll do is actually this section we will create all the logic to say do we have any entity then display the widget if we have a failure display this widget otherwise create a loading screen next we will go inside the data source remote so when we go through the logic of the clean architecture we say do we have any internet connection if it's the case we go inside the data source and we use the remote data source this is what we will set up and finally we will go through the provider again but now we will use the provider inside the application so we will go inside the widget and we will use the provider to trigger the either failure or entity this is how we will structure the next four videos okay so what is the next step let's go inside the checklist in the checklist you see that we have done the number one so this is done the next step to do is to add the flow okay if you remember we have seen inside the board uh flow okay so a never-ending cycle and we will start by doing the provider okay so we'll go inside the provider of the Pokemon Mage so this is inside the presentation layer providers provider SMH provider okay let's take the checklist and we need to add the required parameters also so let's do the providers let me explain you a little bit what happened inside this provider so when we call the provider image provider and we use the either failure or Pokemon image this will first create a repository using the repository image reposit the Pokemon image repository implementation okay it will implement it so we have the remote data source which use the Pokemon Image remote data source implementation inside we put the dial package then we have the local data source inside we put the shared preference package then we have the network info and inside we put the data connection check package great so now we have a repository and after this with this repository we can use the use case and the use case was to get the Pokemon image okay in the use case if we go inside you will see that the use case will return either a failure or a Pokemon entity okay so we will receive either a failure or a Pokemon image when we call this so our goal is to send through the Pokemon image parameters all the information that we will require for this case to get the Pokemon image first we will need to get the name of the Pokemon if we want to save it locally on the phone because we will create a file called the Pokemon image so we will be able to retrieve it later next inside this use case we also need to have the information about the URL because if you go right there in the you this is the URL but we need to get this information from somewhere right otherwise it won't make sense so this is how we will do this we will create some sort of logic we will create a string called the image URL and this one will use a constant that we'll create so we'll go inside the constant like this and we will create a Boolean called is shiny and we will say this as true but you can put false the is shiny is just to know if we will use this URL or this URL okay I prefer the shiny Pokemon so we'll use the Boolean as true I will close the constant and now what I would say is I will say is shiny then if it's the case we need to get the information of this path but how do we get this information the easiest way is to pass through the either failure Pokemon an argument so we'll say will require a Pokemon entity because in the Pokemon entity we have all this information so I will call this one the Pokemon entity so now we should be able to access this so right after the is shiny we'll see Pokemon entity dot will go inside the Sprites because this is the API you see we have the Sprite other official artwork and those two URLs so go inside Sprite then others then official artwork then because it's shiny from shiny otherwise we will say Pokemon entity dot Sprites dot other dot official artwork dot front default great let's move this on the side for the image URL we can pass this information inside the Pokemon image parameters because this is the use case so we will go inside the Pokemon image parameter we will add two things inside so I will copy this and I will paste it inside first we need the name of the Pokemon because we want to save the file in the local database as the name of the Pokemon next we need also the URL so it will be the image URL just like this so we can replace this for name and we can add the required this dot image URL like this and we have the error because we just need to rename this as Pokemon image params good so we will close the parameters and inside we are required to put the name and also the image URL so we will start with the name the name will use the Pokemon the Pokemon entity that we pass through this information and we say dot name because we have this information and for the image URL we will use this information so the image URL like this so once we call this use case which we'll need to modify a little bit we'll receive either a failure or a Pokemon image and then this will use the fold which is used because of the either and it will return either the left or the right side if it return the left side it will return a failure then the Pokemon image will be set as null and the failure will be set as the information received and we will notify the listener just to refresh the screen but if it's the right side then it will return the Pokemon image entity and it will set the failure as null and the Pokemon image as the information received and notify listeners to refresh a screen this is inside the provider don't forget about that because we have added the provider we can now add this one inside the mill T provider inside the main.dart we will go right there on the top and we will add one more provider this one is called the Pokemon image provider this one great so now it's added if we go back inside the checklist we will see what is the next step we need to set up the pages and the widgets to see on the screen so what we will do is we will take one widget that is already inside the Pokemon feature it's like presentation widgets there is one called the Pokemon image widget we'll take this one and we will drag it inside the widgets of the Pokemon image okay and I will see move I will say okay perfect so we have it right there after this what we'll need to do is we'll need to use the actual provider that we have created and for this what we'll say is Pokemon image entity and this will be called the Pokemon image entity is equal to now we need to use the actual provider so we'll say provider and if you don't understand how provider work I will put a simple video on YouTube how it works so you will at least understand this thing but if you want to use other stuff then provider it's up to you then you will see provider that of context again the link will be in the description of this video if you want to know how provider works and you will say so provider.off and the off will be which provider you want to use right now it's the one with the Pokemon image provider so we'll say Pokemon image provider and now because we have used this provider we can now see at the end Dot either the failure or the Pokemon image because you know that this provider will return either a Pokemon image or a failure so we'll say Pokemon image semicolon and we need to go at the beginning and just say that this can be null it's possible we need to do the same thing for the failure so we'll say failure it would call this failure and now we can go at the end and say failure great because either one or the other will be null and now we need to change a little bit how the widget will work we will create a logic we will say if the Pokemon image entity is not equal to null then we will display the widget and the widget is actually the one already created so I will put this inside then we'll say else if the failure is not equal to null then we will display the widget is equal to expanded inside we put the child we'll put a center and inside the center we'll put another child and put the text the text will be what is the error message so we'll say failure dot error message and now we can format document and you can see that we have one little problem I will remove this and it's fixed perfect let's format document and save again I will put this on the side I will also add a text style for this failure error so I will put my semicolon first I will put my comma and I will add a textile so I will say style text style and the font size will be 20. perfect let's save let's put this as a constant also and now we have a problem because this has not been set so we need to put another else and inside this other else we will put the widget which is equal to a next pendant again expanded and inside we will put the center widget and the center widget will have a child circular progress indicator so this will be loading if both of them are null and we need to put this as a constant great so now I will restart the application just to see what happened you can see that we have this circular progress indicator and this is absolutely normal for now because we have never run the code either Pokemon image or failure so that's why both of them are currently null this one and this one which will mean that it will only return this information so for now we will keep this like this until we use the actual either Pokemon image or failure let's go back inside the checklist the checklists tell us now to do the data source remote I will go inside the code and I will go inside Pokemon image feature inside the data and the data source Pokemon Image remote data source this is what we need to work on right now inside this section we need to create some logic so the logic we'll create inside this file is first we'll use the path provider package this will tell us the location where we can save the image locally on the phone so this is the step we'll do first we will delete all the files already saved on the phone then we will use the dial package and with the dial package we will get the new image if the answer that we receive is a status code 200 which mean it works then we will save the location of the image the path where the image is saved on the phone we will save it inside the database and so if one day we open the application and we don't have any Internet connection we will be able to retrieve the last Pokemon image saved so let's code all these things so right after the async what we'll do is we'll use the directory and the directory will be just called directory which is equal to the a weight of the get application directory and this get application directory is only available if we use the path provider so we'll say path provider this one will import the package so now we can use the get application directory document directory this will give us a location when we where we can save the actual image okay so now we have access to this the directory we need to Quick Fix and import the dart i o to have this information next we can use a command from the directory and we can say dot delete sync this will delete everything all the files already saved on the phone locally so all the image already saved and inside what you can put is a recursive as true and we need to put the recursive as true because we have it in the documentation if the recursive is false the directory must be empty and currently it will not be empty because we will have saved some information already next we need to define the actual path where we will save this image and for this we can create a final string and this one will be called The Path file this can be equal to the location where we'll save the actual image so for this we create a string and we will use the directory path so we'll say directory.path so next we will need to use the Pokemon image parameter to put the name of the image so I will say dollar sign again and I will say Pokemon image params dot name so this will be the name of the current Pokemons saved and we'll say dot PNG because this will be a PNG image so great now we have access to the path file what we'll do in the next step is we will use the dial package in order to download this image so instead of using the dial get we will say diode.download and the download if we go over you will see that we need to put the URL path so the internet path and we need also to put the save path where we will save the image so the internet path we can use this from the Pokemon image parameter dot image URL and for the other section we will need to delete this and put inside the path file that we have already created this is the path file so just like this if the response status code is 200 then it will do the Pokemon image model that from Json and so we need to save this information locally now we don't want to save the response that data in this case what we want to save on the phone is only the path of where we save the image so we'll create a map and on the right side the key will be the K path and this is the constant we created previously on the other side for the value it will be the path file like this so now we will save locally the information of where the file is located on the phone now that we have set up the Pokemon Image remote data source we can go back inside the checklist and we need for the last step to set up all the providers so everything is set up for our clean architecture now we just need to actually use it we need to use the either Pokemon image or failure so I will close everything I will say close all and then I will go inside all my files the first thing we can do so we can have at least one image on the phone is we can go inside the main the dark inside domain we have the home and in the home we have the init State this is where we set up the application and we trigger all the providers which trigger all the actions in this case it's currently only triggering the either failure or Pokemon which give us this the information of the API on the second page so what we can do is we can send the information of the Pokemon image provider inside the either failure or Pokemon so when we call this one it will automatically trigger both of them it will trigger the information of the Pokemon and the Pokemon image because both of them kind of work together so we'll go inside the either failure Pokemon and we will say that we also require the provider so it will be the Pokemon image provider this one and we'll call this Pokemon image provider so we will require also this information because when we will trigger the either failure of Pokemon we will receive either the failure or the document if it's the failure we will we will keep it like this we won't do anything else but if it worked and we receive a new Pokemon from the API then what we'll do is right after just before notifying The Listener we will use the actual Pokemon Pokemon image provider that we receive from the argument and now we can just say dot either failure or Park minimage inside this failure of Pokemon image we need to put the Pokemon entity so we'll say Pokemon just like this or we can just say new Pokemon because a new Pokemon will be a Pokemon entity great so now when we successfully trigger the either failure of Pokemon it will also trigger the either failure or Pokemon image that's the goal we can go back inside domain and we need to add the other argument Pokemon image provider so this one will create it as a variable so I will copy this and paste right under and then I will replace the selected Pokemon image E10 provider for the Pokemon image provider and then I will replace it right there also now we have access to the Pokemon image provider and I can take this copy it and paste it right under like this so now we send the Pokemon image provider inside the Pokemon provider okay so now if we go inside our file we seem to have one error inside the search Pokemon widget this search document widget will trigger the either failure of Pokemon when we click on it so we also need to put the argument right there and this argument will have the same logic so we can go back in domain just to copy paste I will copy this this provider image provider this Pokemon image provider and I will paste it just before so now we have access to this Pokemon image provider I will do Quick Fix and I will add this thing I will copy also the Pokemon image provider and add it inside the argument put my comma format document and now we can restart the application and see the magic happen here we go we have the Bulbasaur oh and we forget something we need to replace the actual image with the Pokemon image entity so what we'll do is we'll go back inside the widgets of the Pokemon image so we have Pokemon image widget and we need to replace the actual asset image for a file image because this is saved locally on the phone we will remove the constant and we will put inside a file and the path of this file will be coming from the Pokemon image entity so I will copy this I will paste the Pokemon image entity dot dot as simple as that so now if we restart you see that we have Bulbasaur but if I click on random and I click on search the number 19 it will return Rattata so you see that this is the shiny Pokemon you can select any Pokemon you want and click on search and it will work it will trigger the first API to get the Pokemon information this and then it will trigger the other API which will give you the image of the Pokemon if you want to change it and have the normal Pokemon and not the shiny one you can go back inside the constant and in the constant you can change shiny for false so if now you restart the application you will see that the Bulbasaur will not be shiny anymore it will be the normal version okay so if I click on random or yeah if I click on random and search I will have all the normal Pokemons okay so let's talk about the feature that we've just implemented together the Pokemon image when we click on the button to get the information of a Pokemon this will first trigger the first feature the feature number one and the feature number one will also trigger the feature number two that we have created together the get Pokemon image and let's talk about this one so when we click the button this trigger the provider after this it will trigger the use case and inside we put the repository implementation and because it triggered the use case it would go inside the business layer and it will go through the bridge to go inside the repository implementation use the function to get the information validate if we have any internet connection if it's the case then we will go inside the data source and we'll go inside the remote data source to get the image using the dial package and once we get the image we will save the location of the image locally using the local data source and we will just cache the path of the image but if we don't have any Internet connection then we'll go inside the data source and we'll go inside the local data source to get the path of the last image and this will return us either a model or a failure and since we use the bridge it will return us instead an NTT or a failure which then this will go back inside the use case that we have used and return us exactly what we want an entity or a failure so we will be able to display inside the application if we have any entity then we will display the image of the Pokemon otherwise it will display the error message or finally it will just display a loading screen if it's currently loading the either failure or Pokemon image in the next video we'll go through the same explanation but inside the actual code just to make sure that you really understand how we created it or feature So currently what happened in the application when we click on search when I click random and I click on search it will trigger and get the API information save it locally on the phone then it will get the image Pokemon and save the image locally on the phone okay all the information is right there so what happened is if by example I remove the internet connection and we restart the application this was the last Pokemon so if we restart the application even though we don't have any Internet connection it will still give us the last Pokemon image with the last Pokemon in formation and if you try to search for by example bubbles or you will have the no connection at this point we have done pretty much everything inside the application and it work super fine this was clean architecture let's do a quick overview again just to make sure that you understand how everything works and why is it so great so when we trigger the application and we go inside the main domain will trigger the providers so it will trigger the image provider and the Pokemon provider this will go inside the either failure or Pokemon so let's navigate inside this this one will trigger the use case get a Pokemon the use case get Pokemon you can find it inside the Pokemon feature in the data and in the repository this is what will be triggered okay so I will restart application because we have some bug my my phone just bugged so what happened is when we when you trigger the actual inside the business the use case get Pokemon this could trigger the repository okay and the repository inside the data layer which is the Pokemon repository implementation will be triggered and this will go inside the await Network information is connect it will validate if we have any internet connection if we have an internet connection then it will go inside the remote data source and get the Pokemon information then it will save the data locally that's why when we reset the application without any internet connection we still have the last information because does if we don't have any Internet connection instead it will go inside this section it will try to get the local Pokemon from the local data source get last Pokemon but at this point we don't have the image we only have the API information right so if we go back inside our Pokemon provider at the end when we know that it has been successful that we have a new Pokemon information we also trigger the either failure or Pokemon image now if we go inside this one I can right click you see that we'll do the same logic we will trigger the use case get Pokemon image and we put inside the parameters of the name and the image URL but the most important thing is we go inside the get Pokemon image use case let's go inside this one so if we minimize everything and we go inside the Pokemon image and we find inside the data in business layer the use case get document image this one will trigger the Pokemon image Repository okay which you can find inside the data layer and inside the repository you click inside and this will go through the same logic it will go do you have an internet connection if yes then it will get the Pokemon image from the remote data source which means from online and then it will save the image locally but if you don't have any connection it will go in the other side and it will get the information from the local database because we have saved the information previously and if by any chance or any problem happen we always have the section of the on server exception if we have any exception happening inside this process we always catch the information and we return a failure in this case it would be a server failure and in this case it will be a cash failure you can put your own custom message inside and the reason why we are able to catch the exception is if you go inside the server exception or the cache exception you can see that this implement the exception from Dart and that's the reason why we are able to catch it if the try doesn't work so this is the overall Arc of how clean architecture work this is one feature that we have done completely together if you have any question about this course feel free to ask them and I will try my best to answer everything and and if it's really not clear then I will make new video about it because the goal of flutter map is to make sure that you are able to use screen architecture inside your own project and this was the completion of the course thank you so much and I see you in the next one bye

Channel: Flutter Mapp

Views: 48,818

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

Id: SmJB8cy8emU

Length: 74min 7sec (4447 seconds)

Published: Tue Sep 26 2023