Riverpod, Clean Architecture, Hive - Flutter Travel App

hello guys hello everyone I hope you are doing great I'm excellent today we are going to talk about Riverport and how to use it with clean architecture for this we are going to build our travel application which will look like this with three main functionalities the first one would be my trips the user can view the list of all the trips he want so display list of user trips the second will be to add trips so the user can add picture description date or set location and the third one he will be able to view the places he are already visited on maps so to create this application we will use Riverport for State Management and also hi for data storage and all of that with clean architecture I hope you are ready for this if yes let's do it reach one C members in our telegram communities with such amazing developers don't forget to join us and enjoy learning new thing going to add dependencies we need for this project but before that I just create an uor project so we can basically basically just start from scratch and yeah let's add the dependencies we need for this project so in your ppml we are going to add Hive and high floter uh for data storage Riverport for State Management and also the last one to convert data time or so we can have a good format for our date for example and all of these dependes if you want to just to copy past them directly you can just find the link in our description and you will find the keub link so yeah uh now let's just run pipg to make sure everything is good and if yes we are going to talk about our project structure yeah so there is it um I came across uh for this image that I believe it will be beneficial for our explanation and to describe the architecture we are going to use for our project so before we dive into the creation file within my editor let's just Begin by explaining the structure we are going to to use so in our case we are going to have I'm going to create like feature um folder and inside future folder I'm going to add trip folder but for example if you are building your own app and you want to add several um folder you you you can for example if you have I don't know like food or feature so you can add it and the structure are going to be the same but yeah uh let's begin by uh structuring our project so we are going to have three principles domain so the first one I we call it like domain layer and data layer and the last one will be presentation layer so the the domain layer this layer will house all the Cod logic so the code will be purely right in Dart and not flutter by ensuring um it doesn't communicate directly with the presentation you know like we want this domain to be really separated from our presentation layer so we can minimize potential errors yeah and we are going to have entities repository and use case inside this layer but I will explain it bit later uh during the the tutorial we also have data layers and data layer is where we enterface with data source or API service or any kind of external service you are going to use but in our scenario we will use high for local storage for example but however I will also get you to if you want to integrate with a remote API service so yeah and the last one is the presentation layer this is dedicated uh to our user interface component so uh I hope uh you understand bit clear what I want to say but let's just dve in the code then we are going to create those file directly yeah let's create those file and start writing our first line of code but uh we are going to create future folder first and inside future folder we are going to have our first feature which will be trip inside field trip we are going to have um the the domain layer then that folder and we will also have uh presentation layer presentation layer yeah of course we would have um a call feature letter to adding for example to catch up errors and some kind of um uh some kind of uh fer we can create also but now let's just focus on uh this three and inside domain layer we are going to have [Music] entities so reposit right and the last one will be our use cases here and then inside data folder we are going to have moders uh also data sources and then yeah rep race and in presentation L of course we are going to have uh provider uh in our case our provider will be um we be done with Riverport but uh if you are using blog for example or another state management you can just add it directly in your provider folder we will also have um widgets if you want to customize some widgets uh it will be there and the last one will be page pages so yeah great and now we have our main folder which we just have created and now we are going uh to coulon clean architecture with um DDD and DDD main domain D design which will help us to begin with uh the domain uh layer but the small difference between or the difference between clean architecture and DD clean architecture like Uncle Bob like to say is um the goal is to create a system that is independent from UI database and other external framework and DDD is just strategic approach uh to software design and development so we will use this uh to just uh begin with our domain logic yeah we are going to start with the domain layer because like I used to say we are going to use DDD so we are going to start first of all with entities uh for the inside entities folder we are going to create um trip do that and why because here is uh I'm going to create this file and write how we would like our structure to be for example if you got an API we can just create um a class trip class base on your API um response but in our case we are going to Define uh it ourself because we are not using like API no so uh our trip we have a dator so so I will just add title like this we going to have also a list of string and a list of string will be for our picture uh so we can just write picture there or photo if you want and yeah I I light photos and yeah we will also have um a description but a description will just be a string [Music] description so have a date with and the last one will be location for location you can use a top some kind of topper you know like um or enum if you want to use uh latitude and longitude so it will really depend but let's just use a string format for now and yeah all of these will be WR in a constrictor directly so I can generate yeah so in entity like I used to say in the our domain we are going to just have the logic so we won't uh use from gon part for passing so we will just uh passing our data letter uh in the model inside data layers so here so yeah now let's continue with our repository we are going to create a repository so for example I can just call this trip repository and inside our repository so yeah inside our repository it is going to be just an abstract class so it will Define the main functionality we want to have uh inside our application for example so we're going to have this uh so we will have get uh trips function for example which will help us to have um to get all the trips that user have and also add trips the user can also add the trips and the last one will be to delete uh trips if user want to just but if you want we can just add update function so as you want and based on your own project yeah you can complete this um add trips would be just aoid so yes we are going to have aoid and also it will be the same um with tiller trips and get trips can return us so we are going to have just uh it will return us a list of trips that we have just created and yeah I think we got something here in repository so in the domain ER repository is just an abstract class which uh we Define the main functionality we want to use the last one will be with use case and in use case we are going to to have uh to create uh all the use case we just Define in our repository and try just to implement it so let's just begin with uh uh get trips for example so yes and inside get trips we are going to have it will be like just a class which will return us all the the trip so uh there is some function we call in um that it is called function and this function by default when we will call letter in our code for example when you instantiate get trips it will call this function directly so it will execute it but inside this function uh we are going to just initialize our repository so yes and inside we are going to just call get trips and it return get trips so yeah we will have this for example so uh just ask me to create a Constructor so we are going to create a Constructor and this one also will be will return us uh uh trips so we cut an error yes he say yes we just need to add return so because it is an future and yeah so this one will return us uh all the trips that user will have inside this application so now we can just add uh add trips and delete trips also so let's just create a file called add trips add a tri and it will I will just copy this logic and I will modify I will ref right just let's just rename this and call it add trip and let's import our repository and also our entities and here we going to call adds and this one say yeah we just need to return a void because if you came here in the repository they say yeah it is not U uh there this we just need to return void so let's just add void here and remove our entities so we are going to do the same with delect trips so let just copy this one pass it and rename delect make our inut and call delay trip and this one will delete um our uh will delete so uh we have just create um uh three uh use case but in add trips for example we can say that uh in our repository we are going to add trips but we didn't add any parameter so if you want to add RPS of course you can just call an empty function uh you need to pass a parameter trip and uh then letter just call it so they can add in our database or just add the trip so here inside our repository we are going to Define um a parameter called trips so user are going and this almost the same if user want to delete specific uh trips he need to pass the trip index and we will find it directly in our um trip list so now we make some errors they say we need to pass three parameter so yeah there I will just directly trips and trips and there we just need to import this one and it will be almost the same with B difference we got here index and pass index in parameter so yeah now uh we have done with all the domain logic we are going to uh to deal with data layers and then later we are we are going to finish with the presentation layer yeah let's continue we are going in our data um layers but we are going to create uh our first model so we will create trip model and our model are going to be the implementation of the entities we just got here and in our domain layer and our model are going to provide us a structure and it will convert it will be the conversion between our entities and the model so yeah uh let's just create our file trip model and these are going to be just a class called D model I mean in most of case we can just extend this directly with our trip class which is in our domain layer but in our case today we are going to try to just um respect the CLE architectural code and then just separate everything uh in case to avoid some error letter I mean in if your app is just an small or medium app you can just extend it directly but in some case it will be preferable to just split them into Parts but yeah uh we are going to have it will be the same like TI I we just do this so I try to yes I'm going to create this and then now I can just use Hive to create hi type for those who didn't watch our tutorial on hive you will find in the description also the link to Hive tutorial and yeah you will understand how to set up 's just going to do things now we are going to add and this one I will call it trip model. g. and I'm going to generate this file directly with um a command in my terminal uh just letter yes but first of all let's just add we are going to add two function so the first one uh will be uh trip model from entities I just to like this so these are going to convert from entities to model so we will use it eror in our repository and also in our presentation layer so now we got some error it is normal we need to import trips and just call trips. Title yeah it will be almost the same so this one uh we have us to make the conversion from entities to model yeah and we are going to have also in the other direction so we can we need to convert also from the model to entity so for this one we will have trip parameter and this one will help us just to make the conversion yes fine now we just have this line which is right but we are going to just add some common in our terminal so we are going to past the command so let's just run the commands and it regenerates our file directly if everything is good yeah now we can see that it generates directly high five and yeah so now we this line is green yeah so we have done with model uh our model and it is almost the same if you are not using high for example and you just have your own API you just need to Define um all the you can just extend directly the trip or your entity class or just Define all of the field you want to use and yeah just make the conversion there so uh if you doesn't want to use Jon I don't know in your project ler you can also change the structure just here so it will be uh easy so yeah now we are going um through our data source but uh in this file uh these are going to H the tion with Hive uh if you were working with remote data for example it will be the place where the API will be called so uh let's just create um trip local data source for example yeah yes so in this we are going to initialize our class and we are going to have uh treatment functionality there like we used to say we are going to have get trips add trips and delete trips so if you are using API or this place will be called Pro sure the uh Tri premot data sources and it will make an API call with do or HTTP directly on our API but in our case we are going just to use Hive so yeah let's just create function get trips uh I just want so we are going to import our model so our trips are going to return us a list of all the trees we got inside our uh box but before that we are going let's just come on this line first and let initialize our [Music] books so this one so we we get trips we are going to return all uh the data inside our box so let's just call Trip box for those who want to understand box is uh we five b is just a contain which will return you the uh all the data is the place where your data uh is uh has been stored so yeah let's just return the list that here so we will also have uh add trips so if we want to add new trips so just need cut out model just here and we will have we got the function add we can use the function put if for example we just have a specific ID and you want to add your ID and add the value but in our case we are going to let Hive generate the ID directly so we are going to just use add to add a new trips so yeah and the last one will be to delete trip and to delete trip we are going to need just an index I'm going to call delete and pass the index of the trip we want to delete so yeah we have just finished with our uh data sources and now we are going to implement uh our repository by using data source so we are going to create trip repository Implement yes so uh for this we are just uh going to use the repository inside our domain layer and just extend uh our repository implementation uh I want to add that the difference between um data uh repository and data source is in data source we are going to fetch our datas and uh in the for example if you were using an API we can mix both uh three loal data source and three premote data source and just combine uh both of them in our repository directly to return the structure we want but in our case we just got this one so we are just going to create new class called trip repository and extend this with trip Repository so yeah he generates a file directly so yes now to use this one we are just going to use trip local sources and just call it local data source and going to create a Constructor so yeah in add uh trips for example we just need to define a model and if you remember in our model classes we just create uh we just add two main function so we are just going to use the first one so trip model from entities but we need to import this one so these are going to convert um our entities to the model and then later we can just call Thea source and call the function add trips and just add trip model inside this one so the B my because my so we got an error here [Music] and what this error saying is we need to add at Sun function because uh let just me remove this yeah they want us to convert the to finish the conversion between before adding this model in our storage so we just need to add i s keyword yeah let's just continue with delay trips it will also be the same but we just we are going to just call local thata Source generate and pass the index and this one also are going to be asynchron and the last one will be get trips and for get trips we are going to Tri model I'm going to call our TS and here here we can just return and now we see some error so we need to convert this to um a list of uh entities so we will just we are going to create a list of entities let's call it R for example so we are going to to map this one call model and we are just going to return yes value Le can be return from the method get TR because it has a return Je yeah okay so this one uh mean that uh we need to catch up an error if for example we got some error in um our uh our uh model for example so uh we are going uh to try to just um let me just think bit Yeah in our repository we are going to have our repository there and this one we are going to not just return a trips but we need to return a list of trips yes so feature list of trips and that is normal we just so now we got new error and this one is also normal because we need to return a list and not just [Music] um one trips so here so we have uh done with our repository now we can continue with the presentation uh layer let's continue now we are are going to dive into the presentation layer and we are going to start by initialize the provider so we can have access to it uh in all the app so before that let's just create um trip provider Yeah in our file um so we are going to have this one and in Tri provider we are going to start with um we are going to start uh by creating or all the we are going to use like some kind of injection dep um dependency injection but uh we are going to start with uh our different use case so for example let's just create at trips provider and for this one we are going to use um add trips yeah for example and this one we are going to add just the paramet ref let import provider I mean oh okay that is because he make some error there not let just a p provider and import our at trip use case s and yeah in this one we are going to just call our repository because this one in each Constructor take repository so you need to the C repository but to initialize this we are going to create repository provider to of course we didn't have it yet but we will just add it later and then return add trip with repository so they can just call our use case directly and we are going to just do the same with all our use case so get trips for example and get trips we also have get trips here and it will return get trips and we will have the last one which will be delete trip provider and let's just call delete trip I don't know if you call it like this yeah so let and yeah now we can see that we got an error and say and the find name name three provider repository but if you just go directly on uh our uh trip repository let just find here our three repository we are going to see that our repository also depend on some trip local data but let's just create our trip repository to and this one is going to be our trip repository but we are going to do it like this but this one it needs local data storage so in case to avoid to call it or every time wait I just he say because it a th try adding a point one name to yeah so we need to create um trip because we need trip local data source provider trip local data source provider and this one we also need to create it uh let's just create but this one need uh a parameter which would be box trip model so yeah let's just create trip box and in our case we are going to use hive. box and yeah here we can just pass the name of our box and import hi flter and also our model and here we are going to pass this say say three repository can be assign yes that is normal because we just miss to add Tri plal data sources here yes now we have intialized all our uh all the provider for our use case now we are going to create trip list Notifier provider which will help us to manage fting trips from uh the repository so let's just create it now and we are going to use State Notifier provider and this one let's just add some parameter because we need to specify that we are going to return list Notifier and this one will return return us a list of trips so yeah basically you're going to so now we got this we just need to return our c now look like we got on error yeah it is just because we are trying to [Music] use this one now we are going to create um the class list trip list Notifier and extend this class with state notifer and this state we return a list of trip basically basically yeah that is normal we just need to create a Constructor in but [Music] so let's just delete this Constructor and create it yeah no yes now we are going to add uh our last function so we are going to add Lo trips which will Lo trips from the repository directly and also the same with add new trips and remove let's just begin with the most simple add new trip and we are going to just got this one also going to have to remove some trip we are going to use in index let's re use to say and yeah and these are going to have a parameter which will be Tri right here because we just need yeah to pass a parameter and next here and it is almost the same with trip when we try to call add trips we just need need to pass also uh by calling the function our trips directly here we need to pass the parameter trips it is almost the same by we can just like doing this for example like delay trips. call but uh those are also the same with just calling directly the variable tribs by passing The Good parameters so we are going to do the last one which will be load trips and with load trips we are going to have as fun you just need to initialize we can try to call get trips like this so they will return us like a list of trips directly so yeah I think we just need to add feature in cases because we are going to we are using asynchron function just right now and we can just add them here so we have just finished with our trip repository and now uh we can just di in presentation layer and yeah we are going to run our app for the first time since we just beginning um but uh the good way to do this is to use tdd like test um domain um PR and uh it will help you to just test directly uh all the stuff we are just doing right now and to make sure like everything is good when you are just building your app but yeah uh let's just continue with the presentation layer and see what we are going through our in that so in AR that it is like default file when you just create a new flter project so I'm going to delete uh those Anor line and yeah I we just let's say that we are going to and let's call it D [Music] app and then then let's my homepage yeah doesn't have we don't have this screen again but we are going to create new one which we call main screen and before just create our main screen we are going to uh to add some line for example uh yeah widget p and here we are going to initialize U Hive and open our box um for those who doesn't understand why I mean uh open our our box uh here for example in um our provider we say hive. box but there is some difference between hive. boox And Hive do open box for example and the difference between uh hi. box is um high. box just are going to open some uh un existent box who has already been existed and uh if your bxs are not been EX your app are just going to be crashed so we just need uh to initialize or to create a box before calling all of your provider and uh this command uh which I'm going to just write like have do open box uh mean that if I don't have an existant box please just create some box which we will call trips and yeah we can just use this box in your application letter so we are going to just import Hive with Hive flutter and before that you also are going to use hive. init fter and this line are just going to say to have that hey please I ask you to just save uh all the um information I want in some specific path in my uh device so I it mean like you are not going to lose your um information if you just restart your app for example and it is also important to add register adapter so we can just declare our model adaptator and this model adaptator is those this file which has been generated when we just run our Command the first time so yeah and the last one will just be to wrap my app with provider scope and this component is provided by Rod so uh it can help us to have access to all the information and all um the function we just have initialized in our provider file during the application for example if you want to add uh some new trips or just removing it or load tws for example we are going to have access to all this function directly in the three of our app so yeah let's just create our main screen pages in here we are going to call it like main screen Dart L and I we create stat less and call it main screen first but because we are going to use provider so we need to use consumer widget yes and we are just going to material then here we can import mean one to have this so it will help us with this parameter ref we are going to have access to all the uh function that is provided by provider so yeah and basically we are just going to create our bottom navigation because we are going to have uh uh yeah a botom navigation for our three uh main folder so let's just create scarf there and in [Music] part so we need to have also a [Music] controller we are going to have [Music] uh three pages one two three example and here just after your body we can just have mot navigation and this uh we are going okay so we just need to have botom navigation [Music] okay so each of them [Music] [Music] we so each item we have it econs and label so let's just call it my trips and let's just duplicate this line and and trips and of course can have so we will need to when we we will click on some uh items it we need to change the page so um to doing this we are going first of all to initialize our controller and uh yeah let just think we can just remove this for now and declare so we are going to wrap all of this [Music] in [Music] and to [Music] [Music] H [Music] so inside our because take three parameter context PGE Onex and also the chart so we have this the child and then we will just return [Music] [Music] yes so with this code if we run this code uh we will have just um bottom navigation page so let's just run this and make sure that everything is going well I've just run um our project and uh we can see that we got three different um we got three different uh items um now let's just add uh um we are going to add uh some listener our page controller in in order to just switch when user try to change the page he's on so we are going just to change the value of our current Page by doing this because these are going to return us a double so yeah we just need to ground it in case they become um yeah so if I do this try I will add just some so I can say the number is changing so we just need to verify if everything is great and now we are going um uh we are going also to disable this Justice bner by doing the putting in first and now we got this so we are just going to add to customize our app bar so [Music] let just how we just start [Music] by add think some [Music] colons so yeah let's just have this I'm going to add start inside okay that's great now let's just copy past this one and we can just say traveling [Music] today so [Music] nice let's just add some background color let's just put y so we can just have this and elevation to zero and if you want to increase yeah we can basically just do this but now we want um to display when we click on uh some specific item we want the color to change so we are going just to add and to set the page andex and for example if you on the three so yeah it will change directly on the good page so yeah we are done now we are going to just um called uh we are going uh to uh we are going to create new screen for which we display our trip screen so yeah let's just create my trip screen for example and this one we just got an error but let yeah we are going to create my trip screen and my trip screen basically I just going to be to display a list view Builder so it will be just a list which will be [Music] displaying so let just add going to do the same and in this one I'm going to just call least few Builder because we are going to have to display a list so let's just call it trip list so these are going to be the list when you get from uh trip notify uh provider and we are using ref. watch and not def. read Because def. watch uh as his name mean uh it will continuously watch and if it will act like stream and if we just have some new update or new um information uh it will just rebuild our screen directly so yeah let's just trip list L and we are going to add yes okay now we are going to [Music] [Music] display I'm going to display the title of each items so um before that uh I'm just going to import this so it's normal if I'm trying to print this here we are going to just have empty list so we can't display anything here and that is I say it is normal we didn't add anything yet so uh in order to be able to just add uh something uh in our list let's just create add screen um I mean add trip screen first and then we will come back to display uh our uh list of um of travel as you want so [Music] [Music] [Music] yeah let just add the four Value First Title description location picture so we are just going come okay that's great so can just going to return fr [Music] let just add some placeholder they just duplicate the line and just this s okay so now I'm going to let just display this okay so we can just see directly what and this is our default value in our case we are going to just add one picture there but um if you want uh you can uh just change the screen dynamically I will add we are going to add in our description the link of our repository so for those who want to just put in star or just clone the project or if you want to contribute uh yeah feel free to add whatever you want and yeah let's continue by just [Music] adding on press we will have like a button and we just say and trips you know okay so here we are going to trust we got our list picture here and we are going to just add a network really so you probably we are going to suppose that uh we uh had already saved your picture so let's just add an URL image you know so yeah and now I going to make sure everything is good if yes let's just create [Music] [Music] for date we are going to just use date another time but [Music] now for [Music] location and now if everything is good we just are going to call our Notifier and add our new trip yeah so let's just add a new trip here so if we add new trip here and then let's make the test but to do that let's just change our default variable and put for example and here we are going to put par and I got some test where so by the for we are going to put this and if we click on ADD trips yeah okay yeah we need uh in our main screen to load the so we can load uh okay now he's creating an empty project so let's go these two here so if we add new one let's just make sure we are going new trips okay we got new as of trips Okay so now let just make sure that our provider are going to now we need to see let just [Music] okay we can see that it it display the least but yeah of course we need to return this um yes [Music] so okay then that is perfect we just need to just following DDD and H errors we are going just to modify a little uh load trip function which will be in there so we are just going to let avoid as we had to do and let's just make or yeah we can just call it like trips of fa [Music] and we are going to return let's just write it as you want so if you got error I just go to return on ontk and if not we are [Music] going yeah then they say that is pretty normal so we are just going in get trips to make like a small changes so in get trips we got because we just got some error there we are just going to return an error and also list of trip so this is normal just because just so have failure which game so we are just going to create a car F let just create C and inside this one we are going to have errors and yeah let's just create failure and inside failure we are just going to create an up class called failure let's define some string message I'm going to have our [Music] constrictor yeah so this one I'm just going to throw on error issue [Music] one yeah and there we just we can just import our figure directly and yeah know basically in our implementation tool we are going just to change our return from so yeah that's great and yeah let's just put all of these in some Tri catch so we can hand out the errors the return return it the left yes then here we are just going to so yeah now we have just fixed our error then we can continue so we we are loading all um the trips we just have ADD here previously and then in our add uh let's just make sure that we you don't miss anything in your add um add trip five it look like pretty clear so if you want just to change your U UI yeah you can and yeah and something so when you just add your trip we directly load it and it will uh directly call our like main trip so you can are going to just watch it and make an update on our main screen so yeah uh let's just add new composant I have some wiet uh here let create like let's call it custom we are going to call it like um Custom Custom uh search bar if you want and also have our travel card that C I got already a code for that so it is just like basically basically some yeah so it will display the description if you have one and yeah we are just going to use this travel card directly in our uh main so let's just move on and we are going to her place this oh yeah we just forgot to add our some search bar to let just import it of course and so here now we got our app if we want here we just add on delete function so it is almost the same we call the function remove trip and we can delete all the trip you want and years so I want to delete all of them so if I want to add new one I can just add it and yeah let just remove some unnecessary print we make before and we are going yeah to make sure everything is good in our main app we are just going to add some action and here here is go let just some action but we need to initialize some Str here so I will choose picture online so yeah now we have done uh we can decide to change uh the image if you want to change the image URL you can just change as you want and here now we got our clean architecture with r and for this uh I hope that you understand a bit how you can use Rod withk architecture if you have question feel free to join us in the telegram group and I will let you the last part like this one with maps and if you want to contribute to our GitHub you can just like pull the project and by using or for example Google flter Maps and yeah set location on Maps and then try to push it we are going to make a review and if your code is great we are going just to accept it in our GitHub I hope you really enjoy this tutorial if you have question or if you want us to work in on another topics feel free to tell us and yeah see you thanks

Channel: Flutter Guys

Views: 13,930

Keywords: flutter, flutter tutorial, flutter course, flutter clean, flutter clean architecture, flutter ddd, flutter hive, flutter riverpod, flutter riverpod tutorial, flutter bloc, hive flutter, flutter storage, flutter clean architecture course, learn flutter

Id: fT-eOgl_jhk

Length: 100min 26sec (6026 seconds)

Published: Thu Oct 26 2023