How To Save and Load Data In Flutter Using SharedPreferences

in this video I'll be showing you how to save and load data using shared preferences this is a very important video because you'll probably use this in any app that you make so I wanted to show you exactly how to do it to make it easier for you because you will be using it often anytime you need to save data from your user or if they've chosen some preferences in your app you're going to want to save that and and use it later that way they don't have to keep telling you what they would like so we've got a lot to do let's get started so normally you would already have an app that you would add this to so I just created a demo app to kind of show you how it works we can save different types of information and I'll show you how to do each of them so I have a main.dart file which essentially just returns our home screen and then inside of our home screen we have a stateful widget very important that you're using stateful widgets because we're going to be changing our data real time so we're going to update the state and then here I have a list of called ins which just gives us a random number through zero through five I have a list of words and it's just some random words and then here we do have some variables which are our actual data that we'll be using we have an INT which is number Boolean which is our understand and then a string which is our word and then I'm also using late late is very useful when you don't know what the data is going to be right away so you can just put late here and then that's just essentially telling your code like I need to use this but I won't use it until I set it so just let me use it and I'll set it before I use it I promise and then we also have a data one right here which is this section right here and then this is just going to map our string object which is our Json data that we're going to be creating and we call that data below that just in case you want to replicate this I have an app bar that's just called shared preferences and then we're essentially just have some padding in a column and then in the column I have custom rows that I created I created my own method to kind of it just takes in our data which is our variables we just talked about I have an unpressed function and then we have our button text which is number understand word Etc and then we kind of just set that up in case you want to recreate this but again you would use this in your own app and then we just pass in our number our our method that we're calling and then the word and then below that I also have our data structure kind of split up again normally you'd use models and stuff but just to make it easier to read we're just grabbing our number in our data object or understand and our word and then we have an on pressed button at the bottom called clear data and that's where we're really going to actually do all of the logic but here I have it where we can just randomly click number and get a random number I can click understand to be true or false and I can choose a random word and then if I click the data it takes all of this information up here and then turn to into essentially a string in this scenario but then also Json data however when we refresh the app this is actually going to delete everything which is what we're doing in this video so that it stays no matter when we close the app or open the app so let's go ahead and start doing that and then we'll kind of touch base on the functions in a moment so right away when you're using data you want to be able to load the data so what we can do here is we can actually create a function called load data and we're going to actually put that up here just so it's kind of near the top so we'll do load data and then this is actually not going to return anything so we can just do void load data and then we can return it so what we want to do is we want to actually load through our data and to do this we're going to need to use the shared preferences so we can hit Ctrl tilde on our keyboard do flutter Pub uh add and then shared underscore preferences and then this will install the shared preferences that we'll be using to share the data and it it's not good to use a lot of data I actually did another video where we can save data uh with a you know spreadsheets Google Sheets um but this is very good for smaller data but I don't really know what the limit is because really data in text is very small anyhow so you could probably get away with saving this but just keep in mind this is going to share to the user's device so you don't want to save too much but you could probably get away with a lot of data um just because it you know text is kilobits right so you probably get away with a lot but they always say don't use a lot in here so because we're going to use the shared preferences we actually want to make sure that we're using async in all of our functions or methods I mixes up because I use JavaScript um but we're going to get the shared preferences so we can do final which means it's not going to change and then we can do shared preferences prefs equals a weight and this is why we use the async because we need to wait for this to be ready and then we'll do shared oops uh we'll do shared preferences dot get instance and what this is saying is anytime we want to use this we're going to get the instance of our shared preferences make sure that it's current I believe is what it's doing and then we're going to save it as a variable called prefs now what we can do is we can actually use this and because we're going to be changing data within our state we're going to update that without it having to reload we're going to use set State and this is very important why we have the stateful widget rather than a stateless widget you can't set State and you need to use that plus we're going to be using it to call our load data at the very beginning so you need us stateful widget for that as well and then here we can just go ahead and change our data so our first variable that we're going to change is our number we can do number equals and now we're going to call in our prefs and we have a different way to get data and I'll show you most of them I think I go over most of them but there might be one or two that we don't use but it's all the same thing so for our number because we're going to get a number an integer in this scenario because we could get a double but we're going to get an integer we just call get int which is a number and then what we want to do is we want to pass in the key that we've saved it we haven't saved it yet but we'll get to that but you want to give it the name of what the data is that you're saving so for me it's just called number so I called it number you can call this whatever you want just make sure that you did you know what you're calling it and then you can reference it later we're going to save our data as a number with the key and then we're going to grab the data as our key number and hopefully that makes sense if not let me know in the comments but you'll see it when we save data we just need to make sure that they match now this could be null this could be null for many reasons one we haven't saved any data yet that's going to be the main thing this is going to load data right away if this is the very first time a person's ever using our app there's not going to be any data here so what we want to do is we want to make sure that we're aware of the null and we can do this by putting two question marks and what this says is I want you to use this information unless it's null if it's null then I want you to use something else and we can pass in zero so we're checking to see number better be what we saved if it's not what we saved then I want it to be zero and then what we can come up here because this is setting it from the beginning and we're passing it late which means I will set this later we can actually not call it right away and we can just have the variable there that way this is what it's going to be when we're done you can leave it if you want it's not a big deal but this is the better approach to take it so now when we load our data we're going to see hey have we saved this number before great let's use it if not we're just gonna pass in zero and we'll see that in a moment when we actually save the data next we're going to do the other one so we can do understand under scan again prefs dot this time we're going to get a bull because it is a Boolean that we're saving we're just going to call the key understand and then just like before if this is null we want to pass in something else and we're going to pass in false by default and then we can delete it out of our data perfect so hopefully you get the idea it's very easy to use these it's just a little complicated getting set up I read through the documentation I was like I don't know what I'm doing but this is what you do very straightforward next for a word we need to get a string so we can do press dot get string and the string list and string we're not going to do a string list we're just going to use the string and then in this one we'll just call it word and again we want to make sure that it's not null if it is null then we want to pass in and something else and we'll just pass in blank again it could be a blank string if you need to or just a default word that you want to use and then we can delete that app here perfect and then the last one is going to be our data now our data is going to be a little bit different because it's actually data by default it's going to be a string but we need to turn that string into Json data so to do that what we can do here is we can make a new variable this one we can call it whatever we want but we're going to call it data stream because that's what makes sense it's our data as a string and then we're going to do prefs Dot and then again we're going to use get string and you'll probably use this a lot because you can just save all of this data as a as a string and then decode it into Json and use it where you need to but again if there's little things that you need to then that's where the get in get Bull and get stream come in handy might as well just keep it simple if you don't need a big object right so that kind of how we do that and then for this we're going to call this data so this is the key that will pass when we save our data and then we're gonna grab it as a string and then we don't need to check null we're going to check null in a moment but we don't need the check null right here we don't want to pass in something else if it is null we want it to be null and the reason why we want it to be null is because then we can check to see if it is null and do something different so here what we want to do now is we have our data up here what we want to do is we want to now use our data string to change our data and we can do this by doing data equals and here we want to check to see if it's null and we can do that by doing data string is a exclamation point equal which means not equal to null and if it's not equal to null then we can use the question mark and then we can do something if it's not null and then if it is null then we want to do something else and here we can just pass in a blank object an empty object so what we want to do if it is not not in all we want to use that data and we can do that by mapping it just like we do up here we're going to map it with a string comma object that means we're going to pass in the string as our key and our value is going to be an object and then we're going to use the Dot from and the Dot from allows us to say hey where is this data coming from I'll grab that data and then I'll do what you told me to do I'm going to map it as a string and an object and here's where it gets a little tricky so we can't just pass data string we want to pass the data string but our data string is that it's a string of data and we can't turn that into a map because the system doesn't know you just gave me a bunch of letters right so what we need to do is we need to decode it into Json and we can do this by just calling Json to code it will automatically import it and then we can pass in our data string so I know this might be a little confusing so I'll try to explain it essentially we're grabbing all of our data objects everything and we're just putting it as a string when we save the data which we'll get to in a moment we're going to grab that data as a string just text you know and all of that stuff and then we can actually decode it into actual Json it's going to look for the object it's going to look for the keys it's going to look for the values and it's going to separate that actually as Json and now that we have that Json data as an actual bunch of information we can use that with the from we can then map it to our data so again if that doesn't make sense let me know in the comments and I'll try to explain a little bit better I think it makes sense but Maps took me forever so I I knew how to do Json data forever I never never understood how to map stuff so if it gets confusing just let me know but yeah so we now have our data so essentially we're getting our shared preferences we're loading it into prefs we're then grabbing out each piece of data just to kind of show you how you would do it you normally might not do it that way you would just grab in all of your data at once like we did here but this is how you can get individual data if you want to just do press and then get whatever you're trying to get most of the time you'll use the string though but if you need a Boolean or an integer you can do that and then if it's if any of this stuff is null we're using the double question marks to check if it's null and if not if it is null we'll pass in our own data now what we need to do here is we need to load our data we're not actually loading our data just because we made a method called load data we actually need to load our data so to do this we can use our init state which is built in for stateful widgets and what initstate does is it runs as soon as this screen is loaded as soon as the screen is loaded before anything else happens it's going to run in its date so what we can do is hey as soon as you're going to load I want you to load my data this way my data is there before you even start trying to fill stuff in or show anything I want my data to be there and then we can save it now if we do this even though we've loaded our data we can actually refresh and we're going to get an error because oh it has not been initialized okay so disregard what I said a you still need to initialize the data uh even though um it is late so I should have tested that out but that's fine I just don't delete your initialized data it's going to throw an error on you um and then no implementation okay if this pops up this is great learning experience if this pops up uh just close everything and reload that's just a weird issue that sometimes happens and I don't know why so we'll wait for it to reload and that issue should go away all right so we've reloaded our app the issue has gone away and then we can go ahead and refresh it now I'm getting an issue here that you won't have and it's because I've tested this already so this data is actually saving even though we're not saving the data as you can see it's too true like number two understand true for you this won't happen yet because we haven't saved any data but this is very important why we need to clear our data at some point in time because whatever data that was there would still be stored even if we were to reload this app later if we didn't clear it out before we you know ended the the app so for me it's it it's storing different data but at that point normally it should have been zero false blank and as you can see I do have stored data in there already so let's go ahead and move on to how we store the data now that we've successfully loaded the data that's in there let's go ahead and make it so we can actually save the data because it's kind of already working but that's because I was testing it so just like how easy hopefully you feel that it is to load data it's just as easy as it is to save data so the easiest way to do this is just by creating methods like we're doing right here here we have our update number method and we're going to call this when we update our mem our number so when we're updating our number what we can do is we can add in the ability to save our number as well again we do have our method as async because we're going to need that to await our shared preferences and we essentially just do the same thing we do final shared preferences uh prefs oops if I can type press equals a weight shared preferences dot get instance perfect so again just like we did at the above when we were loading the data we're going to do the same when we're setting the data we need to get a reference of our shared preferences which in this case we've called prefs but now what we can do is here's where we're changing our number so all we have to do is just do prefs instead of git enter get bull we can just set it so we can set the in since this is our number and here's what we want to do is pass in the key that we used earlier again these are our keys number understand word and data these are the keys that we're getting so when we save data we just have to save those keys so we can do a number and then we need to pass in the value for this it's going to be our actual number which we already have saved as a variable here it gives us a random number that's all it's really doing creating a random number between the list length and then setting it as choosing one of those random numbers and then we just pass in the number and it's that simple to actually save data and if we refresh this we can then click our number here our random number is now four was two remember when I refresh it and we refresh it it's now four we're already saving and loading data we were already loading the data now we've saved it same with the update understand we can save ourselves some time and copy this uh paste this in and then after we've set our understand here we're just switching it if it's true it's false if it's false it's true and then we'll do press dot sets Bull and then this time we'll pass in our understand and then for the value it can be whatever we want but in this case we want it to be the value of our understand and then we can save that let's go ahead and do the update word real quick we're setting the word and then just like before we do prefs dot set string and then we're going to pass in the key which in this case is word and then the value we already have a variable for it it is word and that is how easy it is to update data setting your data and loading your data which is really awesome now the trickiest part is when you're using Json data which we've done with our data just like it was a little bit different with our data it's going to be a little bit different when setting the data but still not difficult at all so here we're going to come under our update data again this could be whatever wherever you're saving data but this is what I'm using we're going to set our prefs and then right here we can actually just do it at the very bottom this is essentially just grabbing all of our data that we've already set and turning it into an object right and then we're setting that we're essentially just seeing if the data that we have right here matches our new updated data if it doesn't then data equals our updated data so very simple a very easy way to hey if my data is the same why waste your time changing it if it's different if my current data is different than my updated data then please set that state and change it so now we have the data here but what we can do now is we can save this just like we saved it earlier as a string we can actually save it now so press set string and then this is going to take in our data as the key and then for the value we need to encode our Json data into a string when we were loading the data we were taking our string of Json data and decoding it into actual Json data so we need to do the opposite when we're saving it and this is very easy we just do Json and code and then we pass in our data and all this says is hey data is an object that looks like this this is our actual object of our data number number understand understand word word and it's grabbing in those values and then we're going to encode that into an actual string and then setting that string as data I hope that makes sense again it's very easy when you get the hang of it and I'm hoping that's coming across in the video but that's it that's all we have to do and then we can actually refresh our app and then we can save the data as well so if we do number random number is 2 true is now false our word is common if we hit data we now have number two understand equals false word is common that's kind of what our string looks like and then this is how we get the data and then if we refresh that data all of that data is going to stay the same I did refresh the app and it's staying the same and then the last thing like I said earlier in the video is you want to make sure that you save your data clear your data at some point in times if you want to if someone's deleting the app you could clear the data there stuff like that you don't necessarily have to if they want to stay the same but you might get some weird area errors if you're not clearing the data and then later change how your app works you always want to have the ability for you to clear the data and the user to clear the data and this is very easy as well we're just going to get our prefs again and then we can just do press dot clear press dot clear will clear every will clear um all of them if you don't pass in a an actual uh one to clear so just keep that in mind so if you need to clear an individual one you can do press dot remove and then that would remove all the data with that but we're just going to clear all the ones that we have so let's press dot clear I just wanted to make sure that I mentioned that press dot clear clears all of them press dot remove would remove the data of the actual key so if we just wanted to remove the data in number we would do press dot remove number pass in the key but for this scenario we're just going to clear all of them so we can save that and now if we click clear data nothing looks like it happens but when we refresh the app all of our data is back to the defaults so I hope this was very helpful for you it did take me a while to figure out how to get shared preference properly the easiest way is is really just clean your code up and make meth methods and then just use that when you need it set the string or the other data is very easy just pass in a key and a value and then loading the data if you keep it very clean and separate is very easy as well I'll load the data check if it's null if it's null set other data and it can be whatever you want so I hope you guys enjoyed this video and uh let me know what you create and what you're saving data for and loading data for and I hope you enjoyed the video and I'll see you in the next one

Channel: Spellthorn

Views: 4,619

Keywords: Spellthorn, Flutter, SharedPreferences, Data Management, Persistence, App Development, State Management, Mobile, Cross-Platform, Packages, Tips, Tricks, Data Storage, User Preferences, Optimization, Beginners, Intermediate, Best Practices, Settings, Data Handling, Stateful Widgets, Storage, Efficient Management, Loading, Example, Guide, SharedPreferences Tutorial, Flutter Data Management, Flutter App Development, Flutter State Management, Data Loading in Flutter

Id: aIirO4sId60

Length: 23min 38sec (1418 seconds)

Published: Wed Jun 07 2023