This is a topic that many people are looking for. thevoltreport.com is a channel providing useful information about learning, life, digital marketing and online courses …. it will help you have an overview and solid multi-faceted knowledge . Today, thevoltreport.com would like to introduce to you Persist With Hive in Flutter. Following along are instructions in the video below:
welcome back to my channel so today in this episode I will be showing you how to save your theme data or app state which we created in my last second last video which was steaming in flutter so here I was using a file called app state so you can see that here I created a app state dot dot if you are not aware of of this project you can definitely go to my website and check around how this theming in fluid is done and where is the YouTube video and and its everything about this you can learn so here today I will be showing you that earlier what happened we were not able to save the state of our app whether last time the dart mode was used or the Lite mode was used right so now in this tutorial I am going to save the state which means that I am going to purchase this whole object in some type of storing scenario like we can use hi we can use shared preferences we can use database so all of these options options are there but I have chosen hive because this is the most exciting thing that is going on right now in the flutter community and everywhere so hive is really very fast and plus it is very easy to implement and it has options to be used on flutter web as well so to start with I will be going to my pub spec dot ml file and we will be using some more dependencies so lets add them here right so first of all we will need a provider we wont need now so I am going to remove this and before removing this I will remove it at the later stage because the app will not run and I will not be able to show you step by step proceeding of the app okay so we are going to use hive first of all so write I 1 dot 0 dot 0 then we are going to use hide flutter implementation is very easy so dont shy of trying this at your machine and we are going to use path provider so that we can allocate some files or some storage space to our hive storage okay thats why we need path providers so that we can access OS specific location when we have to store our Huayra storage you can say like that so we will use hydrogenerators so that we can use type adapters which will ensure that your f state becomes a type of hive model or hive box or something which can be stored in a hive box okay then we will use build runner which is which comes from flutter directly okay after doing this go to any of your file you can go to me just okay then go to main door dot in some moments it will show you that you have to run floater pub get so yes you can run it get dependencies here right okay once it is done well directly navigate to app state and try to use import right yeah so we dont have right now I think its not run properly so lets run it okay fine now its run so we will be
using import hi here so that we can annotate this class as a type of hive okay and just empty constructor no problem with that so that this type of model will be created for us okay with hives considerations then we are going to use height field and we are going to give index of that so indexing good here thats why we are using after this we will want to remove change modifier because we are not going to use change modifier we will be using watch box builder for that which generally means that this model then saved into a hives box will be watch it okay so its type of a replacement for your stream builder if you are using hi okay finds this we have done nothing we have to do in this except for that we have to add part and you have to be very careful with the naming of this file you cannot name it AB state dot G dot dot you have to name it F underscore state zero dot and then you have to run this command flutter packages per run build underscore run our build now once you run it we will see some changes here we will see some errors Queen and lets wait for some time for this to run probably it doesnt run because lets see how much time it takes yeah it is starting so this this is these are the steps that will be taken zero of three actions completed okay it took a lot of time okay fine so everything is done now if you go here you will see your auto-generated type adapter class right which is app state adapter we will require this and I dont know whether you should change it or not but we can change it since we are using two point one right now so its like this but never mind it will work okay fine I should so well close this file and we can close this app state dot dot plus pops back bottom is not any now what is remaining we have to do in main right so right now we are using consumer we are using material app and in the tasks page we are using provider off so first of all we will need to maybe just create another method right so that it is more clear for you right fine and this will be like this because we need to open to initialize hive to initialize the path where we have to store hive models so all these things have to be done which will take some time so we need to provide a sink for that right so we are going to write final document directory a dir and then we want to copy it before that we should import path provider as well you can do this like path provider right then but whether dot get application documents directory this will give you the directory of app which generally OS keeps it I brought in it then we will initialize hives so before that we should import hive also here so I brought in it and then you can give F documents directly dot path right then you have to register your adapter because its your own
register so its on your its your own class which is not primitive so you have to register app state adapter okay and you have to give type which you can give a zero so and this should be unique obviously now what we will do we will create a box which will be called as app state box this box can contain multiple objects but right now it will only contain app state thats it okay so we are going to write await because we are opening it for first time so we should use open box okay and you can name it as app state box okay or directly a box anything you can name it now this box will contain multiple objects it this will not give us the F state model right so when we start the app and we want to fetch this this will be null right no sorry this will not be known I mean to say AB straight box is the box which will contain app state okay so lets work in this way we have to initialize this box with like app straight box dot put we have to put a box inside we have to put a model inside it which is of which should have a key of anything that you think is relevant and then you just initialize this so this thing we were doing here right so we just moved it up we are going to actually comment it dont get confused AB straight was getting initially at the first time when the appearance so when the Apple on set is getting initially with the empty model right what happens okay that I will tell you later that is a little more hard to explain right now now we are going to use a watch builder watch box builder okay and inside this box watch box builder I am going to use box as I taught box and you can give C now AB straight box has this thing as AB straight right so we need to use AB straight box okay there can be multiple boxes in app so this is you can say this is a this is a table you power you can say yeah table which can contain multiple type of objects its its like no SQL right you can have any type of object in a form of JSON okay so in the Builder you can have a function which will have context and sorry context in the box right and then you can return Maya which is similar to this thing right now this part is done what will happen I will get that document directory I mean initialize the hive register this adapter this is required otherwise your adapter will not work you wont be able to save this type of object into your hive storage then you have to create a box put app state in the box and then in each then run your app its like this ok and then I will just come in this also just for the sake of freshness I will directly use material app here okay and on top of that I am going to yeah before this let me do one thing you need to make this stateless widget
as stateful the reason is very easy simple you can say you need to dispose your hive right otherwise system will do or otherwise hive will do so its better you do it beforehand okay fine so we have done this now I need to comment this out and then I have to use I have to fetch the app state now you guess it how to fetch it its very easy get the box at state box which is this name then get the element from this box which has key of AB state right now you know this is the type of AB state you are you getting this because see what we did this is the box and this is the element inside the box will I will tell in this way now okay so once you have got this app state you just need to take all this okay copy paste it and you have a break right this is what we needed now AB state by default has dark mode on as false so this will be called right now we need to go to this provider we are not using provider now so nothing will be used here so what you can do is same line you can right here you can use the final app state put it here and you will have AB straight now now what is the value of the switch it is nothing but AB state dot is dark mode and what is the value of when we change it so its like this right so this is how it is done and now I can completely delete it I can delete this all the commented parts are gone and lets just add here and this lets try to run this and I will show you the two things that are still needed in this code we are almost done guys just maybe 2 or 3 minutes more and it will be done this is a fairly smaller video and I just want to eat I want you to see as actually someone asked me in the comment section how to when how to preserve the state how to preserve the dark mode if he has already made it as dark mode okay so you will get this error this is a new mirror newest error you can say which is which comes with when you update or flutter with some latest version so you just have to do this and then it will be working fine for you okay so someone asked me in the comments that how can we preserve the state what he was doing is he was making the apps mood as dark and I you I was getting changed then he was clinging the app and when he opens the app again it shows you the what it showed you the light mode always the reason behind that was AB state was getting initialized every time and it has dark mode on as false okay so you cannot see hear anything while something is wrong oh I have not run this sorry okay so it was like when you close this app a state the AB state all always have dark mode on s false so it always gives you light theme
so now we are preserving it and when the app launches we are using that but there is also one more issue I will show you just now but before that I want to you to see this why its not running okay there are some errors okay no problem I probably have a shock okay fine I just copied it and did ad wasted two minutes of yours sorry lies okay so it will run in another half a minute be quick okay its installing now okay so now if he was doing this changing the mood this is not becoming black I dont know why I have to see it okay oh sorry so one more line here we need to add we need to update our box because you are watching the box so check other than that you can do this app state dot put sorry just go sorry not this you have to update the box as well so half State box you fetch like this and then put your app state model again with the updated of this provider order is a change notifier so it automatically updates but this time you have to write because you want this box to be watched right which we are using here in the watch builder right so whenever the book box value changes then only this will work now since we are not changing the box value it was not working I am totally loading it and then when I change it see the output it is black and it is fine now what he was saying is when he does this black and he closes the app like this and then he runs it again it is white why reason is very easy every time we open this main app state box dot put is inserting app state empty model right so this will always initialize AB state with dark mode on s false so what we need to check whether F state not box not get F state is null or not if it is null then initialize otherwise there is no harm right and then if we rerun it we will see the difference right so two things one this second in this null check otherwise everything is fine and this code you can find on my github I have already updated the code you can go to the github go to theming demo and go to this hive integration branch and see the changes whatever I have done I have already pushed the changes you can see all the packages updated in here and in the light Lib you can go to mean dot dot and every coat everything you will find here lets just run it so this is dark Im finishing the app completely and starting the app again and it is black right thats it this is the end of the video and I am thinking to create a post also so maybe in one or two days you might find a post on this but this is a fairly easy thing so I am not really interested in creating the article for this okay so I have already pushed the code you can check out the hive integration branch thank you guys bye and keep learning you
Flutter UI, Flutter SDK, Theming, Hive, Persistence, Storage
Thank you for watching all the articles on the topic Persist With Hive in Flutter. All shares of thevoltreport.com are very good. We hope you are satisfied with the article. For any questions, please leave a comment below. Hopefully you guys support our website even more.