Explorer
Content
videos
shared-preferences-flutter.md
videos take-5 shared-preferences-flutter.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
import SocialEmbed from "../../../../components/SocialEmbed.astro";


# Take 5 - Shared Preferences - Flutter

<SocialEmbed platform="youtube" id="U2jdTCMBTgE" />

## Description

Source Code: https://github.com/rodydavis/flutter_take_5

In this video I talk about how to get started with Shared Preferences in Flutter. We will setup dark mode, and a fresh install check for our application.

## Transcript

### Intro

**0:00** · hey guys my name is ruddy in today's video we're gonna be building an app with shared preferences and provider so this is useful if you want to store settings for the user if you want check to see if the device and application has not been run before or if you just want to store key value stores so first

**0:16** · things first if you want to get to where we are now make sure to watch the other videos in the series and otherwise let's dive in so what you want to do is go to your post by camel and add two packages we're going to be adding shared preferences and provider so go ahead and do that we're going to do share preferences this will work on Mac OS web iOS and Android and maybe Windows by the time you're watching this and we're gonna do provider this will be so we can have access to our settings object throughout the application wonderful so

**0:50** · once that is done getting the packages we can go to our main duct art and create this into a stateful widget great so let's get access to our shared preferences object so I can do that by using shared preferences and then press I like to use this for brevity and we can call our an it state where we update this value so I'm gonna share preferences dot Cadets 10 stop then

### Shared Preferences

**1:22** · preface is equal value cool and one last thing we can give a bowl so you say is fresh it's equal to false dismounted set state its fresh is equal to press dot get bowl is fresh installation install

**1:57** · okay there we go this rash let's do make it a unique he is fresh app install perfect and we just want to go to default value so for the first time we want to say true since if we grab this object and it is null it means we haven't said it before therefore it is a freshener solution we

**2:21** · can now update our debug check poke manner to say if it is fresh we want to show the banner otherwise we don't and we can go ahead and run this awesome so while that is loading I want to go ahead and work on the correct way to do this but real quick let's set our value so after we make sure that the app is fresh we want to set the value to false and that is because we never want to show

**2:52** · this code for example you may want to check to see if your applications fresh so you can send like a notification to welcome the user to ask for certain permissions and to set some certain default values so here we have our our application and we have our debug banner here on the top but now if we refresh the debug banner goes away and this is because now it is a fresh installation anymore awesome so let's find a way to

**3:21** · improve this what you want to do is create a new top-level folder called source inside there we create a folder called classes and inside there we create a file called settings wonderful radio class settings and this is just

### Setting up Shared Preferences

**3:40** · going to be some boilerplate I have a package that does this all for you but if you want to do that manually this is how we do it so let's create a shared preferences object so look familiar for what we just had we're gonna have a pool it is ready if this is not no

**4:02** · we're gonna have a future method that checks to see that actually initializes everything since we're going to call this once when the application launches we're going to say did this make this async and say prefs is equal to a weight shared preferences get instance and we're gonna return is ready looking good

**4:28** · so now we need to do a couple more things we also want to have a stream controller because we want to rebuild when new settings are updated so we can do this easily by adding a stream controller which the generic is settings just a controller is equal to let's make it a broadcast controller and can infer

**4:54** · the type here we can remove it here and let's also give it a dispose or a closed method it's up to you so we're gonna say void closed and we're gonna do closed

**5:17** · actually let's rename it to disposed because we're gonna be using a provider and it may make more sense for the object okay awesome and after this is done we can just quickly add a in event to our stream before and after since we're gonna be providing default values and looks great so now I can get into the settings themselves so let's consider the is fresh key for example we

### Setting up Settings

**5:47** · can go back into our settings and we can say let's do static cons string is fresh let's make this private is fresh key is equal to our key that we just added and now let's add our getter and setter so we can say Bogut is fresh is equal to preferences Hipple a turkey and our default value in

**6:21** · this case we want to be true and now we have our setters so we're gonna say bull is fresh the value and we're not going to do this yet we're going to come back to this we're going to now have a a new method called future update is fresh and

**6:45** · the reason why is sometimes we want to wait for this async function to complete so now we're just going to do some quick things we're going to check to see if it's not ready and if it's not we want to initialize it so we need to make this a sink here and then we say prefs dot

**7:07** · set pool we give it our key and our value we await it here and then we just add a new object to the string this will make more sense later and then what's cool is now we can just call this method update is fresh and pass our value wonderful it looks really good and now let's just refactor our main duck dart to use this new logic we can remove all of this and change this to settings can

**7:45** · import this we can have this equal to our object we need to dispose of it before we forget and now we check we initialize it so this will be settings dot in it we can

**8:09** · now wrap our material up with a stream builder the stream will be something we forgot to add so we can do stream of settings get stream controller dot

**8:25** · stream awesome let's go back in here we have our settings object stream and as you see part is fresh is no longer there so we can now we can just do settings dot not it's ready it is fresh wonderful

**8:46** · wonder the thing we want to do is have access to our settings object throughout our entire location so this is pretty easy we can just wrap this with a a multi provider or a single provider but in this case from these multi provider you can do provider value we're gonna pass in our settings and also give it

**9:11** · the generic wonderful and we're going to go so let's rerun our application make sure nothing broke we have an error and we're good ok that error was just from the restart so every time we update our settings now it's gonna update this class so let's take it a step further and let's add a dark mode toggle to our application so we can just you know copy this we can say is dark mode key is dark

### Dark Mode Toggle

**9:45** · you can now update this and we can update this it's dark I'll just fix this is dark is

**10:01** · dark wonderful and then the only difference this one being is this gonna have a default of false wonderful let's go into our settings and say our for a theme we're going to say if is dark we want to and our theme mode dark otherwise our theme mode dot light

**10:25** · wonderful that should fix that error and one last thing let's go to our settings let's grab our settings objects as these settings to provider it's important provider of settings

**10:53** · if either of settings and then let's do this and false changes to ListView awesome and let's just use a switch list i'll which is probably one of my favourite widgets that are so handy let me say is dark really give it the on

**11:19** · change what's cool is because we've already added that function we can just call this directly and we can give it the title text and say dark no wonderful now everything should be good let's go back to here and we see that we have a

**11:38** · stream builder around our material it should call this every time we call the dark mode let's go to our settings click it and look at that so every time we change this it will update our application what's cool is this is a stateless widget there's only one snake foliage it in the application and that is the made art we can remove this shirt preferences import and we have our settings object which then we can add settings however you want to this and

**12:08** · it's super easy to add new settings just as I was saying but you can also support different types to we can support list of strain integer and all different kinds so let's just change this real quick to be a custom type so let's support an enum so this could be theme mode key mode and we just say let's do this the milkey here

**12:50** · load load updates and load copy this here and right here it thinks is a bull so let's change it to the mode wonderful we need to import flutter services they're gonna say get int since it's an enum value and otherwise we're going to return let's do theme mode dot system index cool and here we can specify our enum

**13:25** · values we can say no values and let's do yeah wonderful so this will automatically fall back to the correct one let's see emo gets low type I think

**13:53** · we have a conflict there oh then we don't okay so theme mode yes we need to set it here so we'd say update theme mode update the mode or it's a set integer and we're going to do Value Index awesome and then now this is a

**14:09** · just a quick example of how you can support an enum value for share preferences and of course all the code will be in the description below you can look at the repo and go over this but just want to show you how easy it is to use shared preferences and especially provider thank you so much for watching be sure to stay tuned for next week's video and if you have any questions please reach out to me support me on patreon and follow me on github and Twitter thank you so much