Flutter Tutorial - Hive NoSQL Database | Todo List (Create, Read, Delete)

[Music] hey what's up everybody so welcome back to another tutorial so in this video i'm gonna explain you about the flutter tutorial where we are gonna cover the hive so hive is basically the local storage database which help us to save the data and if i wanna i just make a very small video on it where you can learn about how we can add the data and this is the form which consists of only two fields title and the descriptions and once the data is uploaded successfully we can we can list them into inside the listings and as well as we can swipe the data we can delete the data and you see that the to-do listing is empty so i'm going to cover everything from the scribe so first see the demo how things are gonna work so let's uh go into the add to do listing i also apply here the validation and let's add here the title one so i'm gonna write only here title one and this is my description something that spellings are wrong so but it doesn't matter so you see here now the data is listed right on a screen and this is basically the permanent storage so if i just try to refresh this and the data remain the same inside our uh the emulator right so that's all guys and the last thing i forget is that yeah we can delete the data and there we see the to-do listing is empty all right so that's what we're gonna build right from the scratch from the installation so let's jump in and get started here all right guys so welcome back here let's create here the flutter project so all i need to do is do flutter create and the name of the project which in my case should be hive underscore test all right so this is going to create a very fresh copy of our flitter project so let's see into the hive project and i need to go and cd into hive underscore test and let's open up with the vs code and all i need is code and the space dot all right so now it's open up inside our vs code and let's uh first install the dependencies that are required so there are the dependencies that you need to do is to install let's go step by step here and i already open up the repository which is basically a static just the screens i'm gonna put that link in the description so you can follow along with that right so let's first start with the hive and what actually is hive and i actually need to type hi for flutter and let's go and hive is a basically a lightweight and uh very fast key value database all right so this this is a very basic example i'm gonna go all the steps that are there but i'm gonna explain things in the coding section but just for the brief that in order to initialize your hive box all you need to do is to define hive dot box and give it the name which is in that case which is my box and let's give it the key and the value by the help of box.put and in order to get the name all i need is if i print that name this is going to give me the dab all right so we can also work with the store objects which can you see here we can extend the hive object which includes the high field and also the hive die which in that case type id always have index zero and with the pa with the depending on the fields that we have the more the index value can be at up down to it all right so down down here you see we can also use the constructor and we can add it as a person and with the help of save we can save the data so that's all the steps that we can follow up down here and that's the benchmark you see here that it's it has a very significant performance in reading they're reading the data and as compared to the other sqlite right so that's it's very fast as far as the execution time is concerned all right so that's really much it let's go into the installation and we can follow all the steps down there right so first thing that i'm going to do is flutter pub add hive and let's grab this one and go into their terminal which already um i already opened up the dependency file that's where the dependencies are going to save and let's flutter above add hive next i need here hive underscore flutter all right so let's define here five underscore flirter i'm gonna go through with all and just for now let's just simply add the dependencies as simple as that let's grab this one and right up there and let's look for another dependency we are we also need something which is known as the hive underscore generator which can generate the hive a doctor file for us so we can see all in a while just high underscore generator um actually should be generator something like that all right so let's go into the hive underscore generator let's go into the installing and grab this one and paste it right into your terminal and let's look for the last which is basically build underscore runner which will help us to generate the files for us so build underscore runner and it's a very useful package for generating the files uh which can save a lot of time for us so we can see that as well so let's add the uh command for this one and into your terminal simply press enter and that's all all right so let's go inside your lib and the main dot dot file i need nothing here and inside lib i'm going to create here a folder with the name of screens and we are going to create the list as well so to do underscore list underscore screen dot dot and i'm going to create here another file which should be add underscore to do underscore screen dot dot all right so very very simple steps um so i'm going to go into my main dot file that's where you can see the entry point file so i'm going to create here a stateless widget and inside stateless widget let's give it the name of my app and basically this is the extension that i've installed i've i've gone through all the steps but just for now you could see here let me type here flutter and you see here the two extensions has been installed which is the flutter and awesome flutter snippets right so that's how useful they are and now i'm gonna import that with the help of material.doc and let's go into the material app so i'm going to define here material app and right into it i'm going to define some properties which is basically debug show uh check more banner should be false you see a banner on the top the right i'm going to show you so that's where is and now i need here a theme as well so let's define here team data and i need here primary swatch and let's give it here the color dot it should be d purple it looks good actually right so next we have to define here the home and actually i need my home screen to be the listing screen so let's create that a stateful widget i don't need to create here stateless widget that should be a stateful widget that will return the state uh so that's a major difference between the stateless stateless widget is something that will not change but staple widgets are widget which where the states changes right so that's the major the most basic difference of to do let's give it the name of to-do list screen all right just like that i need to import the material. file and into my home i'm going to give it the main screen to be to do list screen which must have the title which i haven't defined yet here so let's define the title i'm gonna define final string title and right up here i'm gonna define required this dot title all right so that's fine um let me check something here it shows something required string title yeah i need to define here as well so let's define the to-do and give it the name of to do listings all right so as simple as that right so uh let's go into your to-do listing screen and let me check what actually shows so required this dot title and um i i i just need to check why it's showing us the message yeah i need to actually bring here the parentheses right so that's it so let's go into the widget build and i'm going to create here an app bar and i'll just see how our ui looks so let's go into it and define here scaffold and let's go the scaffold and inside here i'm going to create here an app bar and inside app bar let's define here the very basic title so title and make sure it should be the it should be the stateful widget in order to access the widget.title and let's make things into the center so this is basically something which i'm creating a ui if you want to directly move into the hive i want to give that link in the description all the screens static screens are there you can follow along right after that if you want so that should be the center title and now right after here i need to create here the container so let's create here the body and inside body i'm going to create here a container widget and let me define here the child and inside child let's give it the list view let's let's be a doc builder and in stylesview.builder i'm going to define here some major properties so that should be item builder which should have uh the context and the index and contacts and the index right after there i'm going to define here the uh that's going to return the list title right so this list title should have the title for now i just want to give the title of title because this all is the static data and we need to give it a the subtitle as well and give it the description for now all right so that's looks fine and yes i i need to define here something which is known as the item count and the reason why because uh this should be there i just want to make the code indentated um that's fine and right after the item builder i need to define something which is known as the listview.builder right that's fine and let me give here the item count so that should be let's give it six results right so this is gonna display six times the title and the description which is basically the static data so all i need to do is to go inside my main dot dot file and i need to open up my emulator so let's open up the emulator i have two and i choose one of them so as long as it's open let's go into the main dot dot file and you can run the code either or you can start debugging right i just select the start debugging mode and if i go to my debug console you see here it's going to launching my lib main dot dot file right so that's fine so um it should yeah get or not found me okay so yeah i need to define here uh if i go to my main main dot file and i need to define here the main entry point file which is the void main and let's define here the uh the main file which is the my app so run the application and let's run the my app right that's it and i'm gonna refresh this again so let me stop the stop it and run that again all right so that's fine um so like add under sir to do dot dot screen this is basically the form that's you see that i already have explained the with the validation in my one of the video i want to give that link in the description so you guys could follow along so let me go to the repository just to save some time i'm still going to explain you but if you want to learn more you can watch that video so i'm going to go to my this hive static screen tutorial so let's go into add underscore to do so i just need to simply grab this all and i need to paste it right up here so basically this is all i have explained in in my one of the video um i've done nothing here know any hive concept all is just just the form and with the validation so you see here we have our we created here a stateable widget we define here the state of the form state like just like that and right after the form state we define here the form widget with the form key which is basically passed to the form state and right inside the text for a text form field we have the label we have the validator and if that value is null and the value length is zero we said that to be returned we return that it should be a required field same case right here and on the on pressed where we have defined the add to do button which is the elevated button widget so let's go into the validated what actually does so if the form key of the current state is now and and it's not validated um then if it's not null and if it's validated we'll just print that the form should be validated and on the other case it should that it should print that the form is not validated so that's basically the uh very basic uh the ui for my for the ad underscore to do which i have already created and i'm just waiting then it's taking a lot a lot much time yeah now i think so it's very much close close to the output all right so it's now launched and if i go to the screen you see here we have six required we have title in the description display six times with the listing right so down here i need to create here uh the button for where we can a floating action button where we click and it's gonna navigate is uh navigate us to the to the form which we just just added from the repository and now i also need to remove that like we have to create here a widget which is known as dismissible right after that let's first create here a floating action button so and all i need is to go to my to do list icon and let's create a floating action button so right after the body ending i need to create here a floating action button and let's give it a flow floating action button this should contain the tool tip let's define that and give it the name of add to do oops actually should be in the uh single quotes and i also need to find an icon so let's give it the icons dot add and right after here i need to give here uh oops i need to create here on pressed once i press this one let's add that one the navigator that dot push that should be navigator with the n capital navigator dot push and let's define the context and the route should be material page route and the builder should have the context and i'm going to define here the screen which name of add to-do screen all right as simple as that we define everything let's do that actually i i need to indent my code so you guys could see properly all right so that's how it looks let's let's hot reload it and see how it looks all right so now we have the way to do listing and let's go into right up here and you see now we have the form with the validations are working you see on down here the form not validated we haven't defined any value as long as i define something here and if i click add validated you see the form is now validated we can go back and forth uh and last thing that i need here is a dismissible widget so let's go to our to-do in underscore list which we are already in and here let's define here the dismissible widget so all i need here is uh let me indent my code first okay it looks better so right inside the listview.builder uh where i have returned the list title let me cut this out for now for this movement and i need to define here the dismissible widget for now so return dismissable and this dismissible should have the key and the child so let's first define here the unique key so basically this pertains to that if i need to delete a specific list so this is going to have the unique key to delete that and right inside the child i need to define here the list title right so what i have just copied i need to remove that return which we don't need it now and just remove this one and let's bring up right here and there we go all right so this is the dismissible and inside dismissable i need to give it a background which should be in the in the in the red color let's put that inside the container and i'm going to define it the color should be off red so colors dot actually should be colors dot red all right so it looks very fine so we define that and that should be the key that we define we also have something which is known as on dismiss so basically this is the direction that we need to delete so just make it simple let's give it the direction and make for now just make this empty and let's hot reload it and now if i just try to s to swipe left or right so this is going to remove it from the list but basically this is not the permanent we haven't stored it in the in the local storage um this is something which is basically if i just refresh this so all the listing will be appear again right so that's the uh very basic gist of the ui section and let's move into the next section where we will create the model and we define the hive and let's take a little break for now i'll i will be right back all right guys so let's up to the point let's create here a model so let's work with the models in order to interact with the hive all right so i'm going to create here a model with the name of to do dot dot so right now we have only title and the description so let's gonna define here the class of to do and we are working with the hive object so let's define here hive object and right inside here i'm going to define here the hive type as well so as i explained whenever we are working with the ids we have to define here something which is known as the hive type which is the type id and that should always be zero right and we need to define here the package for the hive so let's gonna import that right up here so import and package colon hive slash hive dot dot right and next we need to do it actually it should have no semicolon and if i go right inside here let's define the high field so first we have here the index of zero and i need to define here the string of id and same here i need to grab this one and let's paste two more times so this should be for one and let's define here the string final string title so that should be final string title and same case for here that should be final string description that should be two all right so that's fine and let's define here the constructor so required this dot title and same case for required this dot description right so we are done with the uh flutter uh model and the tutorial model is completed all is showing some error yeah i just need to bring here this semicolon and let's indent this code and looks fine right so we need to import something which is known as the generator file that's you see here the package that we imported inside my pubset pub spec.yml and when you're working with the hive you are working with the hive adapter so that's where the it will generate the file and this will generate the adapter first we need to uh encode or decode the hive into the binary object so that's why we use the hive generator so this is going to generate the adapter and with the help of build underscore runner we are going to generate the file so that's basically the two main purposes uh two main purpose of adding these two dependencies hive generator and the dev dependency which is the build underscore runner right so i hope you guys will understand further um let's create here the client to run to generate the file but first i need to here uh define the here the bot and let's give it the name of to do dot g for generator and let's give it a gen uh dot file right extension the um let's define the command flutter packages rob run let's define your hair build underscore runner and build so let's run this command and this gonna generate the file for us so just guys could see just now i don't think should they take so much much time and once it generate we have to also define here the box that's where we can um create the hive box so let's create that right inside the lib and i'm going to create here the file with the name of let's give it the name of boxes dot dot oops it should be boxes dot dot all right so you see here we have generate the file successfully and now if i go to the hive object and you see here this generate the file for us which include the box base and some save method the delete methods and you see here some kind of other objects are there which are very useful and let's go to the to-do.generate.file and that's where we can see here is the to adapter that's what i explained so this is gonna with the help of to do a doctor we are able to uh import that and use the high box so let's go inside the main dot dot file and that's where we have to define our adapter so let's uh right after the the void main that's where i have run the app and first make this async all right and right after that i'm going to define here await hive dot initialize flutter now you see here we have to import the hive let's import the hive and this initialize high initialize flirter with the help of hive underscore flutter you can import that so let's define here import so package hive underscore flutter and hive underscore flutter dot done all right so simple is that that's good and next i need to define here open box and before i should go direct to the open box that's you see here inside lib i have created here a file with the name of the um box boxes dot dot and that's where i'm gonna explain my box so let's define right here um so i need to create here class of hive boxes so static string oops actually should be right inside here static string to do and equal to you can give that directly into the main file but just to make things very much organized and i've created here a separate file for the box right so that's where we have defined our box name to do underscore box and i need to define right in here we need to register the adapter so just like we defined here hi boxes.to do and this is something which is basically um coming from the the boxes.file right so it should be hive and i actually i need to define here resistor adapter sorry about that that should be the uh the to do adopter that is just generated with the help of the flutter hive adapter right hive underscope letter next we have to define hive dot open the box which we just defined with the name of the hive boxes dot to do which is basically the file just that's what we just created you can directly give the name here or you can just access like that and i also need to define here the model which should be to do all right so that's fine for now and i think so this should be yeah this should be a weight async await all right so let's define that all set for now and we need to close the hive so let's define the disposed method inside the to-do list so right after the the uh widget widget build we need to define here dispose so far some memory leaks so let's define hive dot close and that's it and we need to import the hive package and there we are right so that's it for the initializing the hive and now let's go into the ad underscore to-do screen to add the to-do's so i need to go right here and just underneath that and define here the method with the name of white underscore on [Music] form submit and this form submit should have the box let's define here the to-do model and i need to import the hive and as well as i need to import the model right so box to do and let's give it the name of hive or to do box equal to the remember that should be the camel case and hive dot box and we have to define here the name which we just created which is the hive box dot to do and same here we need to finish define our model which is d2 alright so next we have to define that to-do box we need to add the data inside it so dot add and let's define here the to-do and that's pertains the title and the description that we need to add and remember on top i have command this one so just want to uncomment this out title and the description that's fine and next we have to pop it so the pop method will navigate there so navigator dot off contacts dot pop all right so if you just hover on it you could see that that the current route method is called first if the method returns fall then the route remains in the navigator history so that's the main purpose of using it just i need to call this function when the form is submitted so that's where i have defined and the last thing that we need to do is to set the state for each specific value whenever there is a change in the text field we have to uh we have to get the title and the description of each specific field so let's go inside the decoration and define here on change and let's give i get the value of it with the help of title equal to value and same here in case for the description i need to actually its description i'm already inside for changing for the description now i want to change for my title which should be after decoration and that is for the title all right so that's great and the last thing that i need i just want to print this out just to confirm that we get the box uh so let's to do box and i need to hot reload it and now if i go to back to the screen and let's press the navigator and let's give it here the title and test description something like that if i click on the add to do and you see it popped to the listing screen that is great and we get the instance of the box implementation and the form is very ready right so that means now we are able to um we are able to add the the data inside the local storage of hive and next thing that i'm going to do is to work with the to-do listing screen that once the data is successfully submitted it should show the data the real data that we enter it should display to the screen and let's take a break for a while and i will be right back all right guys so up to this point you see we have cover up how we can save the data and inside the local storage and now the next part is that how we can delete the data and display the data once the data is saved inside the local storage so we are left with the two major functionalities so let's jump into it so we have our to-do underscore list screen already open and here i'm going to define something which is known as value listenable builder so this value listenable builder help us to uh help us to notify whenever there is a change of data uh it will notify it to its listener so let's go into our body and i need to remove that container so now for now we don't need that so i'm gonna remove this widget and let's wrap with widget which is known as value listenable builder so this value listenable builder comprises of value listing navel which actually includes the hive so hive dot box and we have to define that name which is basically high boxes dot to do and let's define here dot listen label so this method will not access directly we need to define here high flutter on the top and also define that model right after the hive dot box so let's define here hive underscore letter so let's import that so import package hive underscore flutter slash hive underscore flutter dot dot all right now if i try to access the listen label method i'm able to call it right so that's fine and now next i need to go to the builder and this builder contains the context and as well as the box so i'm gonna define that into it box to do and we have to give it name of box and let's define the underscore all right so that's the major func that's the major uh parameters that we can pass inside the builder let's define the hive and now i need to go right into it if we have to apply here the condition if that is if the box value is empty so box dot values dot is empty that means that we have no data so let's return to the center when we're gonna use here a widget inside the center which contains child and let's give it the to-do listing is empty so to do listing is empty and on the other case right after the if condition you grab this listview.builder child and i need to cut this out i cut this out and once this condition ends here this if condition ends right here so i need to define right after it right now i don't need child we need to return the listview.builder so just define here listview and we have to add here we need to end the listviewbuilder all right now now we need to had here the data which is coming dynamic so rather we should have item count 3 i need to define here box dot values dot length so it should have some specific length for the item count and right inside the item count we already are getting context and the index so let's write lead define here to do if that response is coming so i need to define here our yes for response and we have to get the data with the help of box dot get at method and get the index of it means that we have the listing index and let's add in the title and the description so i need to remove this for now let's define if there's some title show that and just to add the title and same case for the description right so so for now we don't need that and let's hot reload it and if i just go back and see now you see that we are actually getting the data now if i go back here and if i add something let's add something here and something right here the description i click on the add to do and now you see we are actually getting the three results right so now we are able to see we were able to add the data and show results to the listings now we need to remove this data from here it's now very simple so all i need to do is to go on my on dismissed method and let's define a rest dot delete so this method will help us to remove the data from it so um and this unique key will help us to each list must have a unique key so we can delete it right so let's go and hot reload it and if i tries to delete the data let's delete the two results and if i refresh it and you see now we only have one result so let's add one more time so title of my test data and let's add test description and if i try to add the to do and there we are and if i tries to delete this and refresh my data and i hope everything is working fine right so that's it for this complete video i hope you guys learned something out of it yes we haven't defined any added functionality for now but we will define in the in the coming videos for the very basic i just explained things in a very cleaner way that how we can work with different widgets like value listenable bay widgets we learned about dismissible and we learned about how we can add the data with the help of hive so that's it guys i hope you like and love this video please share and subscribe my channel and i want to see you for the next time

Channel: AB Nation Programmers

Views: 610

Keywords: flutter, flutter_crash_course, flutter_hive, flutter database connection, Flutter Tutorial - Hive NoSQL Database & Hive CRUD, hive crud, Hive database flutter tutorial, CRUD, Flutter Tutorial - Hive NoSQL Database | Todo List (Create, Read, Delete), how to connect hive with flutter, flutter complete crud example, flutter tutorial

Id: 8W66pj9y8P4

Length: 39min 23sec (2363 seconds)

Published: Sun Sep 26 2021