FlutterQuickie - Basic Hive CRUD

hi everyone welcome to this video in this tutorial video we will be using hive hive is a alternate to sqlite sqlite is a database solution that is supported in all major platforms sqf lite allows us to access the device storage and save or purchase data inside it now in our case we will be going with hive hive is a database that has been completely written in dart and why hive if i go to this picture here you can see the traditional su of light in the blue bar and hive in this purplish bar just see the speed comparison that we have between the two also hive is much much easier to learn instead of going with sq flight now with that being said here in our project i have made a basic hive crowd project so you can just write flutter create basic underscore hive underscore cropped and in our pub spec.emo we have hive high flutter and path provider you could get all the three packages from dart packages here now i've already run my app what i want to do now is go to main.dar and remove everything here so we are only left with an import line and a main function now let's make a stateless widget and let's name it my app where i would like to return a material app in the material app let's pass a home as home and let's make it a stateful widget home now in the home widget i want to return a scaffold firstly and then pass an app bar where we have to pass an app bar widget with a title and let's pass a text there that says hive example or hive crud crud crowd stands for create read update and delete these four are the main operations that you can perform within the data storage to my knowledge there isn't any other that exist but if you know of something please let me know down in the comments below after that bar let's pass a body that has a column column takes a children now what i want to do is have a button here and have a button row button of row here i'm in a row of button so firstly let's pass and expand it where we want to pass a center that takes a child of elevated button the elevated button is a child that has a text that only says show and on pressed with an empty function all right now after the center or the expanded since we are on the column we can start putting things here so after the expanded before i do anything let's copy this elevated button firstly if i copy this elevated button and come after the expanded i can pass a row here that takes the children and let's just pause the button three times here now if i save it you see we have the button here now for the row let's pass a main axis alignment of main access alignment dot space evenly all right now everything is all right for the ui the only problem being you see that my buttons are actually cutting off into the unsafe territory to solve this let's go to body where we can wrap the column with the center and let's change the center to be a safe area all right much better now now it's final time that we get started with hive to get started with hive we have to edit this main function here now the operation that we want to do here is a is going to be unlike what we have done until now this is called asynchronous function to make this function into an asynchronous function firstly let's pass a future here future that is of type void and before the function body we have to pass async here why because what we are going to be doing here before run app will require some time to complete those are not instantaneous so let's start with flutter widget binding widgets flutter binding dot ensure initialized now it's time that we start working with hive firstly we need to make a directory object let's name it directory here it's going to take some time to find out so await get applications document directory so what this is going to do is it's going to get a appropriate document directory within the file system of our device and it's going to be saved in this directory folder now we have to open hive hive dot init here we are going to pass directory dot path so our uh files or our state that is going to be persisted will be persisted in this directory here now lastly let's open our hive to do that let's await because it's going to take some time await hive dot open box and this box will contain strings so a box of string and let's name it friends so this three were the line that you need for the hive this is the line that you must pass if you are going to do anything other than run up since we're opening up hive in the main function we have to pass this and then we open up hive and since this this work here is going to take some time that's why we are using the word await we have to turn our function into a future asynchronous function now with that let's go down what i want to do is let's change this to create this one to update and this one to delete what i want to do is whenever i click this create button i want a pop-up dialog to show up where we will have two text fields where we can pass an id and a name and then pass the values appropriately and then the values will be shown here whenever we click update i want to pass the key the identifier so that we can edit those values there and finally for delete whenever we click delete again a pop-up banner will come up where we can pass the key so that the primary key in for the that particular item is deleted now with that being said let's go to this create where we have show dialogue show dialogue takes a contest context and a builder for the builder let's pass a function where i want to return a dialog dialog has a child that should be a column or a container to begin with or perhaps a sized box of height 200 and then inside the side size box let's pass the child where i want to pass a column that has children now the children before we go further let's click here you see we have a dialog box of size 200 these children should have a text field a text field where we can pass a decoration of input decoration you can search google or play around with this input declaration you could really uh modify the text field that you will be shown here in a number of different ways now with that that being said i want a label where it should say key perhaps a text that takes a key see we have a key here also for this column let's pass a padding so we have some padding from both the sides after that let's pass another text field where i want to say value all right now we have a key and a value and then we need a button to submit so let's pass a const sized box of height 16 and then let's take another elevated button i'll just get this from here where i want to say submit now if i save it and click here you see we have the key and that's nice we have a value and a button now the question is we can write things here all right and if you press submit nothing is going to happen firstly because we haven't hooked anything up with submit secondly these text fields here are saving these strings nowhere right we don't have a variable that's saving this text field items to do that let's go up where we have our home state and usually for the text field variable we have a different sort of variable so let's name final underscore id controller it's just the name you can name it whatever you want id controller equals to text editing controller so this will be the value for our key and let's make a new one let's name it name controller or perhaps the value controller whatever it is now i can come to our text field here and after the decoration it has a controller property where i can pass id controller and for this text field here i can pass another controller that's a name controller all right all right now we have to start working with hive itself to start working with hive itself where we have our controllers we need to make a variable so let's make one it's going to come later it's going to be an uninitialized variable so we're going to use the keyword late and then call the box of string and let's name it friends box french box we are not initializing anything we are not putting equals to anything here so we are using this keyword here because the value is going to come later now after this we have init state init state runs before the screen is built so inside in its state what i want to do is i want to set up my friend's box variable that we have just made and we can say friends box equals to hive dot box where it should be the same name as our friends what we have created up here within the main function also this box should be a type of string box with that we are almost done now what we are going to do is come to our create button here where we have the submit button let's get our values first all right so now we have to get the values that we get inside here and to do so let's come to our submit button that we have and let's make two new variables the final key equals to this should be our id controller dot the text that stays inside it so idcontrol.txt lastly let's get the final value equals to name controller or was it a value controller it's a name controller and the text that is inside it now what i want to do is i want to called call my friends box dot put and you see we have the key going to the key the value going to the value now whatever what we are doing now is we are writing things here writing things here and then when we submit the values that we have are going inside the database what i want to do is i want this popup button pop-up dialog to go away so to do that we have to call navigator.pop lastly what i want to do is i want to clear the controller that we have because the controller is not automatically cleared i want it to be cleared so here i can call id controller dot clear and then also call the name controller dot clear so what this is going to do is it's going to clear the controller that we have the controllers here now if i save it and if we rerun this again let's create something here let's name it zero and let's name it let's say uh mickey and let's submit let's make one more one and let's name it mouse one thing you have to remember whenever you're creating make sure that you put the key as ah as a unique value so do not use zeros and once again and again if you do so the previous value will be updated you will not get a new value now what i want to do is instead of this button here it was just a placeholder there is no work for it i want here to i want all the names to come here to do so let's go up where we have our elevated button and instead of this elevated button what we want is we want a value rebuilder right or a value listenable builder so value listenable builder value listenablebuilder has three properties firstly the value listenable so the value listenable should be our friendsbox dot listenable secondly the builder takes the function like always and first it takes a context then it takes a box of string that i want to name friends and lastly it takes a child that we are not going to be using so we are just going to pass this under scroll now let's return a list view dot separated listview separated has three parameters that you are bound to pass so let's do so what i like to do is i like to take this item count before at the beginning and the item builder at the end now the item count should be friends dot keys dot length within the friends uh box we have unique key for each of the items so i want the length of total keys so that should be the length now the separator builder needs the divider so firstly let's pass a context and index the context is unimportant so since the underscore here a divider let's pass the cons divider now for the item builder we need a context and an index and a body within the body let's return a list tile for the list style we have a title for the title we have a text where i want to pass the name and for the subtitle i want to pass the key now to do so before we do anything here let's make a final key equals to should not give me an error my button alright and then the final value should be friend dot get that this get method is coming from the hive itself where we can just pass the key to get the value for that key right we have the unique key and for each unique key we have a value so we can just go to friends and get where where the key is equals to this key and so we can get the value now for the title let's pass the value dot to string and for the subtitle let's pass the text where we are going to pass the key now if i save it you see we have mickey that has a key of zero and mouse that has a key of one not we are not done yet we can add more let's add two let's make it donald duck and let's submit it see you have 0 1 2 we have all the keys here now to update we can come here where we have this show dialogue can get this entire show dialog and come to our update and pass it here why because create an update works the same we can just come to update pass the key for let's say uh 2 and we can name it deadpool and if i submit it you see it's changed so for creating and updating hive works the same way now lastly for delete for delete we can come here and pass the same thing but what we need to now do is we do not need this value text field anymore the only thing we need is the key text field also we do not need this value controller here we do not need to clear the name controller anymore and lastly this function here is going to be different so for this we are going to access the friends friend box dot delete and here we can only pass the key and it will delete everything now with that let's save it and if i come to delete here i can pass 2 for the key for deadpool and if i submit you see it's gone so with that we are done with this tutorial please practice at home to make things more clear i hope to see you guys in the next one peace

Channel: Fluttercraft

Views: 298

Keywords: Flutter, Hive, Flutter2.0

Id: M8USeX_aKFw

Length: 23min 35sec (1415 seconds)

Published: Tue Nov 16 2021