Flutter Hive Database CRUD Operations

hello everyone assalamu alaikum here we'll see how to use high package to store data locally and do crowd operations so you'd be able to create data and save them locally on your local device even if you are offline and then you'd be able to delete any data or you want to be able to update any data so it works pretty much the same so let's update all the products like that so hype works better if you want to save data offline and it works pretty much like using dartmap so you don't have to write complex query like SQL so it's more user friendly especially beginners friendly so let's go ahead and get started okay so let's get started the first thing we need to do we need to go ahead and find our pubspec.whimal file and inside this make sure you have this two packages installed one is for hype flutter and the other is hype we need both of them and once you are done then come back to this main.dart and insert this main function make sure that you have this two lines where you want to initialize high and as well as a certain Hive that we are going to use now of course this this is a random name you can name it anything you want it doesn't really matter uh it's just a name but this also means that this is where we are going to save our data in the local storage once again the name is all up to you and also make sure that you are going to use this one because we want to initialize this widgets before our app runs all right so currently it looks like this so what we want to do we want to have a floating action button over here and as we click on the button then we'll have text editing controller or text box actually and then we'll submit data to The Hive over here once again this is something that you have to have in the main uh file main function and then once again later on we'll use this one to make a reference to this box so let's go ahead and work on this Floating Action button now to be able to do that over here I have this stateful class and inside this all I have right now is this ever so right after this over here we'll create a floating action button so here is our following action button and this is what we see and on the unpressed event actually we want to so actually on the unpressed event we want to show over here uh model bottom like that so let's go ahead and work on that so now we want to click on this and we want to show over here uh model bottom sheet so for this reason first we need to go ahead and declare text editing controller so here is our two of this text editing controller so we'll have two boxes for typing in and after that actually we want to go ahead and create a method over here so we'll call the method from here and inside the method we would be using this text editing controllers object the one we just created so right after this text editing controller we created a method which is called show form and it takes the context and an integer value we'll use it later and inside this method we have this show model bottom shed and the reason we are passing the context over here because we want to be able to use it and insert this build inside the bottom shade for the Builder we are using a simple container and then we have this bit of padding over here and right after this we have this column now inside this column actually we have two text Fields as you can see over here the first one and second one and others are pretty much all styling now here because previously we declared two text editing controller one is name controller and there is a quantity controller so we are assigning each of them to a text field as you can see over here yeah and for now that's it and at the end we also have an a button because we want to be able to create on the button and submit the form to Hype or high storage so before we do that we want to clear everything from the text box and we return so this is our elevated button with text filled at the top now this method show form we need to call from this event over here so for this reason we'll come down over here and we know that we have a floating action button now right from here we'll call it so here would say show form okay and we are passing context over here but the context should be this one the one we have already at the top and for now over here we're gonna pass null we don't need any value for that and there is gone let's save it and this is the time would be able to click on this and see the model bottom shift so as you can see it's already showed up over here name and quantity it's a test quantity four create item of course nothing happens because we are not actually submitting anything to this all right so now this part is the actual Hive part so as we click on this uh create new we want to submit the information to the hive storage and how to do that so as we click on this we need to invoke a method from this button so here we need to have a method that method would get called and submit data to Hive so here is our method which is called create item and over here we are passing so for each of them we have different controller text value so now we need to go ahead and create this method which is called create item at the top so we'll go at the top over here and right before this show form so we are passing the information in a map as you can see over here so as we are doing it like this it is also like a map over here so we are passing the information the text controller information in a map so the method itself at the top we have this create item which takes arguments or parameters as map as you can see we have tagged it now we want to send it or submit it to this shopping box now what is the shopping box actually we have created well we haven't really created that box like in Hive everything works as a box so this is where you want to save your data so you have to have a box so our box name was a shopping box but we just opened it so that app can access but actually we don't have any reference to it yet so we have to go ahead and create a reference to this box so that we can use in our classes like this from different classes home page or any kind of screen that you have so you can use them for this reason we need to create a reference to it so over here actually we are getting a reference for our shopping box over here as you can see so once again previously at the top we had this High box and then we get a reference from this box and then we add item to it like as you can see shopping.ed so it's more like a list sometimes because you know flutter dirt map has list and you can add item to the list using dot add operator or operator dot dot add like that so with this as this mattress gets cold we'll be able to save data inside this shopping box now of course at the top I have another list of maps So eventually everything would be stored over here so that our UI can use it but UI this list would get data from here so soon we'll see how we connect this two together so here we have this print method and this method would help us to get the amount of data that is being saved in this storage over here now you have to know that as we store data the data in general could be stored using certain key or if you use shopping if you use dot dot add method then it would give you key automatically so what I'm trying to say over here is that Hive stores data using key pair values now the key could be given on your own or you could also Auto generate so if we use dot add method to store data Hive will create keys for you automatically and it does it using like zero one two so the first one would be zero the second time if you add item that could be one the third time the Q would be two like that so once again if you use dot add method it does it like this automatically for you but you if you want you can also assign your own key but I think I would prefer like this for this example now anyway so what we are going to do we are going to restart everything and then we hope to see this information as we add item submit data to our Hive storage so let's go ahead and do that so now here we say product one quantity say for example two now let's submit it and you see that amount of data is a two well now let's try it one more time let's create a new one product to amount of data say four let's create one now here we do see so here we see that amount of data is a three so previously I have created one already so that's why it's keeping the reference okay so if you create one more time and you'll see that amount of data is for because it's adding at the top automatically on its own so you do product three and over here we would say Quantity maybe 10 it doesn't really matter and here we wait for it and we'll see that immediately we see over here amount of data is for so which means it's already working now since it's already working this is the time we need to show the data from here so we need to retrieve the data from hype storage and will be we want to use that in our UI so let's see how to do that now for this reason we'll come at the top and create a new method for this reason over here we'll create a new method the method name as you can see over here it says refresh items so what we're going to do we'll call this method right after over here so as we add data to Hive storage we'll call this method and then it take it will take everything from our shopping box remember shopping box is the one that where we add our data so each of the data it would get all the data from our shopping list now remember as a height adds data it adds data using Dart Maps style so that's why first we get keys and for that Keys we get a related object and then that object we get and save it in this local variable and because this is an object so you would be able to access the items like using item name item quantity but remember these are the things that refers to map object field that we have created and used earlier like over here so as you can see so every time we are adding we are assigning a field to it and for that field we are assigning certain values so that's why when you retrieve each of this item from your shopping box then you have to refer them get them and then eventually save over here then eventually return the item now this would go through like a loop but this doesn't return us the list because in the UI we want to access them as a list so that's why here we use a DOT to list method So eventually this one actually gets us a list now we can call it over here so instead of like that so here it's a refresh item that's all so we add items and then after that we call this method and this method would save data eventually in this item list the one we that created now you can see it over here so after doing everything getting all the data in a list format then we save it to this list and we immediately let the UI know that we have new data because we are using set state to do that anyway so we also do reverse because we want to get the latest one first like that now over here we could also do a print method so here we do items dot length so here it'll get us the length of the total items in this list so let's go ahead and submit a new data and we'll see how it goes so let's click on this and then here we'd say product five and maybe quantity 50. now this time we expect to see certain information over here so yes we see that we have five items so that means this method is getting colder right after submitting our data to Hive and we are able to print that now this is the time that we want to show the data in our UI not just from the console now to be able to do that we need to come over here so we need to create a body section so here we created a body section and inside this we have list view dot Builder and inside this as you can see we are getting reference to the items the items that we have created at the top anyway let me collapse this we don't need this for now so yes so this is the item that gets updated after each changes in our hive so we get that length and then we look through it and of course we are using index to do that and then because current item is an object so you can get the name and quantity things like that so let's restart our app and let's see how it goes now to be able to work with this that we don't see anything over here so we need to create and override another method which is called init state so right after this we'll have this method which we override called init State and over here as the app reloads so we refresh all the data using refresh items and we update our items which eventually the UI can use so let's go ahead and restart everything yes so these are the items that we have already added and now one thing we could do we could create another one and we'll see the changes immediately so let's create an item over here we'll call it product 6. and then quantity 100 yes product 6 quantity 100. so yes that's working now next we want to see how to edit one item over here well to edit item well to edit icons first we need to create icons over here so for this reason we'll come to our UI section and right inside this list tile will create another row insert this list tile we have this trailing where we have this row as you can see inside the row we have children two buttons over here the first one is added the second one is delete now for the edit button for now we have this unpressed event and we also want to invoke show form so let's go ahead and save it and here we see that we have these two icons they already showed up and now in this unpressed event actually we are calling show form the method that we created early which means that if we click on this we'll see we'll see the model bottom so let's go ahead and click on this so we already see that it already showed up but of course our information is empty we need to work on that yes okay so each time we click on this button we want to update our text controller and how to update it because you can see from here we are getting the current key now of course current key the item object that we created at the top and for that object we get the key remember earlier at the top when you reload everything we also load the key so that means that we can keep track of each of the key now we need to work on this show form method and over here based on that key the key that we are passing we need to retrieve information from The Hive object while actually retrieve information from The Hive object in fact actually it will just get the object information from items because remember refresh items always gets called regardless where you use it for example in its state or right after creating a method or even after updating as we click on this button we'll see how it works so anyway we'll come over here and then we'll have this uh conditional check so we are checking if it is null or not remember this method when we call from Floating Action button then it's null because we are trying to create one so as we create one it will not have any key but as we update it will have a key and we are passing the key to it so let's come over here and what happens at the top is that we check if this is null or not okay if this is not now that means it has item that also means that we are doing update operation and so from item list we look for that certain element and its objects so we are checking over here so if it's true then it will return us an object from this list and then we save it over here and then we get the name and quantity property or field so let's save it and better we start our app this time now let's click on this and we see that it's already working let's click on this it's already working so now we want to be able to submit this button and update the information so as we want to update the information we want to call a method from hive update method like for example as we create we eventually call a method from our Hive that is called dot add so as we want to update we need to call another new method that is called dot put so here is our method which is called update item so in this case we'll pass the key and as usual we'll pass the information is a map format and then for that key we'll update our item and over here you see we are calling dot put method and just like create item eventually we also call refresh items so that we get the updated list from our Hive now this is the method that we should call from our show model bottom shade so inside this elevated button over here actually we want to call them so here I have this conditional check where we are checking this if item key is null or not if it is not null that means that we are calling update method and we're passing the key as well as our related information in a map format now that also means that for this method at the top we also need to do a check so over here we'll just simply copy this put it here and then we'll put another curly braces and it looks good but of course we need to change the conditional check over here if this is null so when we are creating an object so we are just passing first time when you create an object we are just passing null to it otherwise we are passing item key and its values so we're gonna go ahead and restart our app and now we are going to change over here and instead of test one we'll call it product zero and we'll see how it works and we'll just remove that okay and we'll create item now as you can see we do see that immediate change but one thing we need to change over here this button text even if we update it it should be update not create so here we check if item K is null if item key is null that means we are creating new otherwise it's update let's save it now of course this model bottom sheet we need to restart or start everything so that we see the related update now let's click on this here we see that it's update and if you click on this here we'll say create so now our update information is working we need to go ahead and see how to delete them now deleting is actually relatively easy for this reason with this we'll come at the top and right after this update method update item will create a new method which is called delete item now for deleting all we need to do just get the key and invoke dot delete method and then refresh it and at the bottom you can also show this that an item has been deleted now all we need to do we need to go ahead and call this method from our UI now our UI is right over here here we are passing null but now we can just simply pass delete item okay and we are passing the key so we can grab that key from here let's remove this one and put it here and you are good to go all right so the first thing you could do remove this one and here we see that an item has been deleted we can also remove this one this one and right after this we can go ahead and well we can create a new one actually so let's restart your app and if you saw the weird effect that's gone because let's delete and now let's create one that we can create so here we could say product sex and the values say 44 and it we see it over here you can update it by 5 over here update and we see the updated one immediately and we can also create a new one if you want you can delete this let's go ahead and create a new one it would say product 7 and 1000 or 100 okay great so it's working thank you

Channel: dbestech

Views: 38,758

Keywords: flutter hive database, flutter hive crud, flutter hive tutorial, flutter hive app

Id: ee2RUDriM5g

Length: 24min 39sec (1479 seconds)

Published: Tue Nov 29 2022