Saving Data in Flutter

Challenge

Welcome to the second challenge for this course. This time, it actually involves writing some code. But the good news is that if you’ve followed along, you should have no problem completing this.

Here is it then: just add a new field to the settings screen. It’s another boolean value, and in contains the option to show the date of the file, or not. On the screen you see how this should look into your screen.

So, add the widget, the methods to read from and write to SharedPreferences this value, and then wire everything out. This should take about 10 minutes. Stop the clip now, then start it again for the solution. Good luck!

Solution

So here is the solution for this challenge:

First, I’ve added a field at the top of the SPHelper class, calling it _showDate:

static const String _showDate = 'showDate';   

This contains the key that will be used in SharedPreferences to store the value.

Next, I’ve added the methods to get the value that shows the date: this returns a boolean, and it calls the getBool method passing the _showDate, the key value that I’ve just created,

bool getShowDate() { 
  return _preferences.getBool(_showDateKey) ?? true; 
} 

The setter is quite similar:

Future<bool> setShowDate(bool showDate) async { 
  final result = await _preferences.setBool(_showDateKey, showDate); 
  return result; 
} 

As it’s asynchronous it returns a Future, of type Bool in this case, and takes a showDate argument, that will be written to sharedPreferences with the setBool method: this takes the name of the key, again _showDateKey, and the value we want to write, the showDate parameter. Result contains true when the task is successful, and false when it’s not.

So, this completes the work in the SPHelper class. Now in the SettingsScreen, we need to add the widget to interact with the new methods that deal with the showDate value.

At the top of the state class, I’ve added a boolean field, and called it _showDate

bool _showDate = false; 

Then I’ve added a widget to deal with this new value: this is another SwitchListTile:

The title text contains “Show Date”, its value takes the _showDate field, and on the onChanged callback, we change the _showDate value based on the value of the SwitchListTile.

In the _loadSettings method, I’ve added the call to getShowDate, to update the showDate variable with the content of our SharedPreferences.

_showDate = prefs.getShowDate(); 

Finally in the _saveSettings method, I’ve added the call to setShowDate, passing the showDate value.

If you try this, you should see that everything works as expected.

Well done!

Next, let’s have a look at SecureStorage!