✅📱 TO DO App • Flutter & BLoC Tutorial for Beginners

all right guys welcome back for a new video today the goal is to create this to-do app that you see on the screen right here this studio app is not only your usual to-do app but it's an app that will save the state of the block using hydrate block meaning that every change that you will do to the app if you close the app and come back to it later all the change will be saved I will go ahead and show you exactly what we are working with here so you can see different list Styles different cards uh representing every to do we can add a new to do by clicking here let's say make make the video as a title uh be clear as a subtitle I click on the button and it will add the new to do at the very top of the list which is very convenient and if I close the app and come back to it you will see that the to-do is still up there and I can as well different uh triggers the different text box on the screen and same if I leave and come back or as well delete by just sliding the cart I leave the app and come back thanks to hydrated lock sorry thanks to hydrated block all the state will be saved and I will have a fully functional app without using any outer services for the back end everything will be stored on the phone accessible offline or online it doesn't really matter let's get to it so I've created a new flutter project on the right side and invite you to do the same and I will directly run this app so we can start from here so our goal first is going to import all the libraries that will be needing in order to create this project so I invite you to go on the perspect.yaml file and basically we will need all those dependencies in order to make our app functional so you see flutter is slidable so flutter's lightable is exactly when we slide a lease style a card to delete it so we will need that hydrated block as I told you coming as well with pass provider very important to give the phone the location where we will store this local database in on in our phone and then flutter block block and all these basically are for hydrated block to work with it you can import it but they are already on the hydrated block as well dependencies I prefer to import them here so I don't have any problems then later on on the code once you have that you can either save the code or run the function flutter Pub get and we have imported all of the dependencies that we'll need to create the project in the meantime we can see that our app is fully running so let me go ahead and close this one and we will be working on our new app right now so the first step we are going to create all the different files that we'll need in order for us to then create the class the to-do class then the to do block and then we'll finish by the UI so let's go ahead and create all the different files so all the different files are going to be under the leap folder so first of all we'll create a home the dart file basically this file is going to host all of our UI and here we can directly type astl and make it a stateful already and create home screen so basically this is going to be the home screen of our to-do app basically displaying all of the UI as well as using blog provider to depending on the state uh show what's needed so once we have that we are going to under the leap folder create a new folder that is called data and under data we are going to create a new file that we're going to call to do the dart and basically this is where we are going to create our to-do class okay and lastly very small project here we'll need to create the block so since we have imported the different block packages and I have on my vs code the block extension I can simply right click here and block new block and I will name it to do and it will create automatically a new folder that's called block and under that I will have 2D block to do event and to do state I like to rename block here to make it more clear so I will name it to do block and once we have that we have all the different files that we need so I want to start by creating the data class so the to do class here so basically what do we want so basically a to-do is a title a subtitle as we've seen and as well is done kind of Boolean to say to the UI well did you already do this task or not so basically that's what we want to do right here so I'm going to go ahead and up create all that so you have that here so final string title final string a subtitle and is done is going to be able to change over time so we're not going to make it final we are going to create as well the Constructor of this and we want now to create to copy with method of this to do class so very straightforward so copy with methods takes all the parameters that we have if they are in null we are going to go and take the one that are already created in our object class so now very important we need a from Jason and a two Json method in our class because we are going to store our to Do's in a database a local database right but still a database so basically we are going to create first from Json method so the from Json method looks like that very simple it takes a Json so a map of string Dynamic here and then it would return a to-do object based on the different field inside our map very straightforward and we want now a two Json method which basically is going to do the contrary of what we want we are returning a map that represent our to-do object and lastly I like to always have a tostring method on my class so this is exactly what I do here note that is a very cool tip that you can by just doing this uh four stuff here sorry three stuff here create strings on multiple lines it's make it it's easier to read I believe so once you have this class so again is a very straightforward class I can close this terminal for now so very straightforward and very simple well we can start really going for it now so what I want next is to create our to do block so this is the main logic of the app and this is where everything will take place so let's start with the events so basically we have a different kind of events I'm gonna just replace this Shield by abstract for now because it's a new version and I prefer it like this yeah it's perfect so basically we have kind of three states that the app can be in but actually Four because we have every time that the app is started then when we added to do when we remove it to do and when we alter it to do it meaning we say that we've done it or not so let's go ahead and create those events so first to do started so when every time we launch the app we want to be able to retrieve all the to-do's that we already have stored and if we have none stored that well retrieve a state that we're ready to store some okay so very simple event here then we want the add to do event so basically it's the same it's a class called add to do that will take a to do as a parameter okay here and this is uh then uh will still be stored on our local database so I will go ahead and import the to do class that we just created okay and then in the same spirit I want to be able to remove the to do so I will add this remove to do event same taking the to-do that we want to remove in order for later to pass it to the block and late lastly we want to be able to uh change to do alter it to do saying that we've done it or that we've didn't done it so alter to do as a as an event here and this is a little different because basically we want to pass it past the the block so here as as a parameter in this altar to do event class we are passing it the index of the to do inside the list that we will be displayed so in the blog we'll be able to access the specific index of this to do inside our list of to-do's and modify the is done value which remember is the value that will say if you've done it or not so once we have that we have all the events that we need we can save that and we can go ahead and start the state the to do state that Dart file I will save this to do block we'll come back to it later so I want to do something a little different here than what's provided by default because I like it more when we're gonna play with this type of state so I will start with the in an enumeration of the status that the app can be in so basically we can be initial as a status meaning that we are for example launching the app and it's initial then loading meaning maybe when we create a to-do right when we add a to-do to the list we want to be able to well tell the UI it's loading it's currently making the effort of adding this to do to the list then if everything went right gives a state of success or a status of error if something bad happens so this is going to keep track of all that and then our to-do State class is going to be very straightforward as well so we have this kind of um of parameters here so our list of to-do's exactly very fair and our to-do stages that will keep track of the status of the app Remember yeah okay so now we want to be able to have a copy with method in order to change the state and update the list depending on the state of the app and the events that are coming in so very straightforward copy with method right here so now we need to add two more methods to our um two RM or to do state class which are methods that will be really uh really uh proper to dehydrated block meaning we want a from Json method and a two Json method those two method will be able to help us retrieve data from our database or put data in our local database so this is exactly what we'll do right now so the from Json method is a little tricky but I will walk you through it so the from Json method here takes a Json right so a map as a parameter and so firstly we want to retrieve all the to do so the list of to do right but they're stored as a map so we're gonna take this Json map and go inside the field which is called to do which is basically gonna be a list of all to-do's that we have but we didn't store them as to do class members we store them as map but it's we we parse them as a list of dynamic and then we map each one so map each one as a to-do object with the method that we've created inside the to-do class from Json that takes a map of string Dynamic and then all that we are parsing it to a list making us available and ready to have a list of to do and that's why it accepted here it's a bit the same here for the for the status meaning we are inside our enumeration to do stages here and we are just going through the enumeration and if the Json with the parameter status is equal to either this one this one this one or this one well it will return it the first time that it sees the same as it stores so it's exactly what it's done it's doing here and lastly the two Json method I talked to you about which is way more straightforward here really it's uh only two uh parameters here inside our map to do which is the list of our to-do's and the stages which we only stores the name right and late lastly because we are extended equalable here we'll need to have as well this override with our two parameters and here we are ready for using these to do state Dart a bit complex here I will I will give it to you but very straightforward to understand so now the last thing that we need to do for our blog is the block itself so firstly here you have an error but mostly what's important here to note is that you are still extending a block a normal block and you don't want to extend the normal block because we want to use hydrated blocks so here I will replace block with hydrated block and import hydrated block and he is not letting me do that for some weird reason let's see why maybe I will run a new pub.get here that's why that's why I rent another pep.get and it was ready to go so here we don't want to return to do initial because that makes no sense because we deleted it but we want to return well basically a constant but to do state that's what we want so that's what we will return perfect so here you'll see that he's mad about something basically we are missing two overrides which yeah we are missing two override and he will offer you uh to to create those two overrides you can tell him straightforward to create them for you but we'll come back to those methods a little bit later I don't want to confuse you so first we are gonna go ahead and deal with our four events remember up uh to do started add to do remove to do and alter to do okay so let's go ahead and start with on started and create this method so just under here I will create the unstarting method which takes an event of type to do started and an emitter which which we'll call emit so basically this line here is just gonna check every time that we launch the app for the first time well the app is closed and we launch it it's it's looking if there is already a status which is equal to success stored and if it's the case he will return the list of to do that is already stored in our local storage otherwise it will come here and emit this list of to-do which can be null and a state of success it's basically very straightforward and this is exactly the same principle that we'll apply on all the other methods which with a little tweak to it because I think it's very important to note that we are using only one block here we are only using one block for getting the to-do's and as well making operations on the to do and that's a bit tricky because if you have a block which is in a certain state let's say you have to get to the block which is in the success state right your app will display a list of to do okay if you alter this state by creating let's say a create a new to do event and this will trigger a new state your UI will respond accordingly and so you want to be able to be consistent here in order for you to have all the time what you want on your app let's go ahead and we can cover that in later videos no problem let's go ahead and create the on add to do method taking an add to do event here and same here I'm really trying to be as clear as possible and as close as possible as what you would be using if you were using Firebase services and all this kind of stuff for bigger apps right I'm trying to respect what you will try to be using so first you will go ahead and try to launch a loading status to the app to perhaps load a circular progress indicator to say that you're that you're doing some work and that the work is being done and that you will receive soon a new state so we do that and then we go inside our try catch method here so what we want to do is create a temporary list of to do here we don't want to directly make operation on the the list of to-do that is stored inside our state because the reason for that is there is a there is an error if you do not have any to-do stored in your database yet The Hive database local database which is based upon a hydrated block well figure some sort of error so you you'll need to pass through this temporary list of to do and so basically you add all this the state the list of to-do's that is stored inside the state to your temporary list and then you insert at the index zero the new to do that you just created and once that done you emit a new state which is Success coming from loading to success and the list of to do that you just made some operational and if there is a problem well it will load a status error state perfect very clear so that's the on add to do now let's move on the on remove on remove to do basically clearly the same not going to explain it so much here you load you you yell you emit the loading status you can make the operation directly on the list of to do stored in the state here because if you load the app for the first time and there is no to do uh displayed on the screen you can't remove so that implies that there is at least one to do created so Hive will have no problem uh making those operations there and then you emit the state of to do so the least up to do that is stored inside the state even though you just did the operation on it and a success status if there is a problem you log uh you emit an error status very straightforward lastly we need to create on on alter to do so basically every time that you trigger one to do to say that you've done it or not so same an alter to do event as a parameter as well as an emitter same you are displaying the loading stages and then well you go inside here and what you want to do is remember the event here stores the index of the to do inside the list not the to-do itself so that's very convenient because then we can access the list of to do that we have stored inside our state calcium the index that was given to the event and accessed the East done Boolean parameter of our to-do class and set it to the contrary of what it was at so basically that's what we want and then well we can directly emit a new state with the list of to do that is stored inside our state after having done this operation and a success status if there is an error will look the emit status error so now we have to tackle lately lastly the from Json and the two Json method very straightforward because well we've done them inside our uh to do state so basically here in the from Json you just want to return a to-do state that from jizen remember that's the one that we just created right here so that's what we want there and we want the two Json and here same we just created it inside our to-do state state that to Json will trigger this one inside that R to do state so well perfect everything is done right here so we can close everything and now we have we are pretty much done with let's say the back end of our app and now we want to focus on the main.dart so let's open up the main.dart and here we'll need to add some stuff in our main function because we are using hydrated block so we'll have to create a two uh two different uh stuff here so first make sure everything is loading properly and then uh open up a temporary directory for our hydrating hydrated storage sorry so here you'll need to import hydrated block and you'll need to import as well past provider it's all packages that we've imported in our perspect.aml file if you don't see the option of importing them here go inside your perspect.jaml file and save this file again that will run pub.get and then you'll be able to do it you'll see some errors here because they're saying that we're using a weight but we didn't put main asynchronous now we're done we've done it and everything works properly that's perfect we don't need to do anything else inside our main function now let's go inside our main app which is just under here so what you want to do you can remove this uh scaffold that was by default there as well as the cost here so first let's get our title running so our title basically is going to be to do app you can replace it with what you want this is just to remove this debug Banner at the very top and then I like to add some themes to our app which is very convenient for you because the app is going to be yellow greenish here but if you want to make it your own you can simply change the colors at this place inside this app and everything every screen will respond accordingly I'll show you later in the UI how you can access this thing this specific theme inside your UI and now we want to tackle the home parameter of our material app and this is where we're gonna use for the first time a block provider so here we want to use the blog Pro provider and then add a new state to it a new event to it so that will look something like this so you will import to do block and as well the block Library as well as the home screen so what do we do here we are creating a Blog provider of to do block type right so we are creating it here to do block and we are adding a new event to it which is the to do started event which remember we've created inside here and will be triggered every time that we launch the app for the first time and remember what it does if we go at the very top of our to-do Block it's here if there is something in the status which is equal to success meaning we have already some stuff we'll return that to to display on the screen what's already stored just so just so you know exactly and it takes a child parameter which is basically our on-screen and at this point I think we're pretty ready to refresh this app and you might think wow everything is broken but that's very normal because here if we navigate to our home screen it's only a placeholder and this is what a placeholder looks like but if you go ahead and replace that with a scaffold you will see that it's way better so now we are ready to create the UI and everything is going to happen inside this home screen and so it's pretty exciting now because it's only creation so we are first uh going to create let's say the background color here for our scaffold so we're going to put that equals to the theme the of context that color schemed up background and just so you know if you navigate to the main file here the background color is set to white but tomorrow let's say you want it to be red you just simply save that and this will turn to Red so that's pretty convenient for you if you create bigger apps to have a consistent theme all across your app and then we'll want to create a floating action button here that will be the button to create a new uh a new to do every time that we click on it so it takes an on-preth method right here and uh let me go ahead here and it takes as well a child parameter as well as a background color for us so we're gonna need to import as well cupertino's and save that um he is not recognizing this Cupertino icons because I will need to import them inside our perspect.yaml file so I will just do that right now and normally now he will be able missing implementation yeah that's okay because we need to rerun our app that's totally normal after adding this uh different lines you cannot just simply um you cannot just simply yeah hot reload your app you need to actually relaunch it so this is what we're gonna do right now so it's going to relaunch the app takes a couple of seconds to relaunch but we can continue working on our UI right here so this Floating Action button is the first step you see you have it here and you can click on it nothing happens so far because we didn't implemented the on press method but that will be our next step first let's let's give a little bit more inside the UI so now we'll need an up bar to our scaffold and so basically we're adding a background color which I set to primary and our primary color is this yellow no elevation and a title which is my to do app with some style to it a color black but here I could as well I wanted to show you you go ahead and team.off context dot colorskin dot on primary because this is the primary color and he's going to tell you wow there is a problem it's because you made your text constant here but if you save it well that's pretty convenient because now if I change on inside my main.dart on primary to for instance White it will change the text here so try to be consistent with your team you you will be saving a hell of a lot of a time later on when you're building bigger apps so let's go ahead and create the body of our our to-do app so we're going to start with some padding right here and we're going to set it to um all uh eight perfect and now this is where it's going to get a little tricky right here because we're gonna use our block Builder right so the block Builder will be able to display different stuff depending on the state of the block so let's go ahead and and create this from scratch so let's go create a block Builder perfect so this block Builder widget takes a builder right and the builder takes a context and a state so context okay and it needs to return a widget so depending on the state that what we said so if my state DOT status so here you see he doesn't recognize the stages because I didn't told him here that this is actually a block builder of a to-do block and to do state type so I go here and I Implement that he's gonna say I don't know import them you import that and now he knows if I delete that and status you will know it so is equal to well to do stages remember our enumeration and success for instance I will return some kind of widget let's just set it to a container for now and let's continue you see the little error here because you need to an else statement in order for it to uh to actually work so let's continue that I'll see if the status is equal to initial you'll display a circular progress indicator and if something else happen you can just load a container and if you want you can add a text widget saying something uh something bad happened or yeah something wrong happened so here we're pretty much done with our UI so you can hot reload that and save that and you'll say nothing's happening well it's pretty much normal because we didn't implemented those methods and we have nothing inside the success here except the container but before all that I want to cover the three method that we'll be using here so when we add a to do I want to create this method so I will create it right here so add to do taking a to-do as a parameter and accessing the to-do block which is inside our context and adding a new event which is the add to do event and giving him the to-do that we pasted here so that's the add to do method it's the same concept for the remove to do right here and a concept which is quite similar but the parameter is here it's different for R2 to do because it just takes the index the number where the the to-do hits inside the list that we have displayed on the screen so that's done that's perfect now let's cover what happens when we'll click on this button remember the demo we were showing a a a dialogue onto the app right here and you can directly go inside the on press here and click here and go for show dialog so it takes a context and a builder as well so that's exactly what we want up sorry yes like this and the Builder basically takes as well a context as a parameter but real will return a widget and in our case we want to return an alert dialog widget added dialogue like this yes perfect so the title of our other dialogue will be uh add a task well pretty straightforward and then in the content that's where it's gonna be a bit tricky we want two text field okay so first here title and then content parameter here so we're gonna do a column all right a column with some children parameter here and um we are I'm gonna take this text field right from here and I'm gonna paste it here so you have a little error that is normal so we have this first text field with the cursor color that is set to the secondary color of the app some decoration here so we have an in-text task title the focus border as well is a little tricky with some border ranges to it and a new color for the Border Side as well as a new border for when it's not focused and I will show you how it looks but first we need to create two controllers inside here before we return anything so it's for the two text field that we'll be creating so if we click now on our um our Floating Action button you'll see that and you'll say well that's pretty cool we have this text field right here but this is too big and you can simply change that by going under the column and go inside the main axis size main access dot mean you save that and you'll be well nothing happened because you're inside the show dialog so pop it and press it again and there you go you have exactly what you need so we have one text field here now we'll add some padding to it by using a size box very convenient right here and we'll add the second test field text field for the subtitle and this is basically they are the same you could take these widgets and create them in a new file that would make a lot of sense if you have a bigger app here we're not going to do it but definitely what you will want to do so inside this pretty much done for our two uh different text fields and we want a button for uh while creating the 2do in itself and so you will go here under the column and Trigger the action parameter which texts a list of widget and so basically what we want here is a button but I will create mine a little bit different so let's see how it is so I'm adding some padding every time every everywhere around it 15. let's save that so we can have a little display here exactly so it's a text button so then on the unpressed parameter of this text button I am triggering the add to do method that we just created on the top and when I'm triggering that I'm resetting the controller one text parameter as well the controller to text parameter to nothing right because if I would I was not doing that I will then pop the the show dialog here but then if I come back the first and second text field will be filled with what I've already put before and you don't want that so that's why you need to do it and then you have some styling for the buttons or a shape with these colors for the the radius um the foreground color as well when you click on it so that's pretty much done as well as a child with the check mark copertino icon which is as well set to Green here so I'm setting it to Green right here but I could as well use the team that we have I should probably be using the team more than anything else but let's say that for our example that's going to be enough so we can go ahead and try that right so we can go ahead and type test maybe just pop it first test test okay so nothing happened but that's very normal because we didn't implement the method when the to do stages is success in our UI and that's the next step and the last step that we'll do so what do you want here exactly so I will take that and I will walk you through it so we want a list view right that's what we want here so this is exactly what we are going to create so here we are here so you want to create a listview.builder you want to access the item count parameter and set it to the length of the list of to-do's that is stored inside your state parameter remember you can access this list of to do because we are inside the if statement where it's success and if it's success you have access to this list of to do so that's pretty much cool and then you want to access the item Builder parameter which takes the context and an integer here as the number of uh of the the items that you have inside your list and you want to return a card with a color if you want for your card an elevation and a shape to it fair enough here's lightable slideable remember is for deleting a to-do so I will import slideable and I can save that and you can see on the left it's happening so the slidable will be wrapped around our list style right here and slideable takes a key here we set it to zero because we know that we only that we only have one but if you have multiple you can set it something unique and then you well all that comes uh comes with the package uh slidable action well meaning that if I slide here I want to be able to uh access the remove method that we've created so that's what we're doing right here and I give him the the the the to do that I'm that I'm willing to uh to to delete I set the background color to this red here and the foreground color to this white so this is white and this is and this is red right here with an icon and a label so this is a package that I that I used right and a child parameter from this slideable which is the list style itself here which will display as a title a text widget with the title of our to-do and a subtitle widget with the subtitle of our specific to do so you access it like this and then I want a trailing icon right here a checked box and I want to set the value of the check box it it's a Boolean here so that's very convenient because Easton is as well a Boolean so I set it to this and every time that it changes I want to access the altar to do method that we've created and give him the number where the to-do is stored inside our list and that's pretty much it here if I refresh everything and for instance I tick this box and I refresh this box I'll refresh the app you'll see that it's still stored right here and even if I create a second one up well perfect everything works good if I re relaunch the app well it's still stored and if I delete this one and check this one and relaunch the app everything works as expected okay so there you have it guys a fully functional to do app created on flutter with hydrated block I hope you liked it if you liked it don't don't hesitate to subscribe and to give this video a like and please feel free to tell me in the comment section uh what kind of video you'd like to see next I'll be very happy to uh to provide you with uh with the necessary content all right guys bye

Channel: Romain Girou

Views: 17,259

Keywords:

Id: v2qsVmODAiQ

Length: 39min 38sec (2378 seconds)

Published: Sat Aug 12 2023