Flutter — Data Persistence with SharedPreferences (in JSON)

So you want to save your data permanently on your Flutter App but you don’t want to use a database?

That’s where the SharedPreferences package comes in. You can save key pair values in String format, but that’s not the only thing you can do. You can save data in JSON format, which is a lot more useful. How can I do that, you ask? Well, let’s find out.

Interested in more Flutter articles? https://morthor.medium.com/flutter-animatedlist-sizetransition-dismissible-dce49c11200d

Visit pub.dev to find the latest version of the SharedPreferences package and copy it into your pubspec.yaml. Don’t forget to run flutter pub get to install your new package. If you already had your app running, you may need to rebuild it:

Once you have it installed, you should make sure it’s imported in the file that you need it in:

You need to declare and instantiate SharedPreferences in the class you need to use it in. I would advise you to use a StatefulWidget to be able to instantiate it only once in the initState override and re-use it as needed.

Because SharedPreferences needs an async call to get it’s instance, you need use a separate method and call it from initState:

To keep your code properly separated, lets write a couple of methods to set and get strings from SharedPreferences.

Our first method, to save a String into SharedPreferences, will require two strings, key and value. It checks if those strings are not empty, and if so, call the setString method of SharedPreferences to save it permanently:

Our second method, to load a String from SharedPreferences, will only require the key of the value we want to retrieve, but we will do several checks to make sure we aren’t returning any null values:

Now that we know how to set and get Strings in SharedPreferences, let’s use JSON to save some more complex data. To do so, we will use jsonencode from the dart:convert library that comes in the Flutter SDK as part of Dart. We will be converting Dart Maps into Strings with jsonencode.

You can learn more about JSON serialization in Dart here.

To save a Map in SharedPreferences we just need to convert the Map into a String with jsonencode. Our method will take the Map we want to save and the String as the key we want to save it under:

Notice we are using our saveStringToSP method from before.

Now let’s load JSON data from SharedPreferences. Out method will take int the key we save our data under, retrieve it from SharedPreferences, check if the String is not null or empty, decode it from a String to a Map, and return it:

Take the following code in a theoretical Widget with text fields and a button as an example of how you can save data in JSON format in SharedPreferences. We are taking the first and last name from two TextFormFields, putting them in Map format, and saving them with our saveMapToSP method:

Full code

You can find all the code in this article on a GitHub gist: https://gist.github.com/Morthor/6f33ab8b7a2aac808ebf89181206dae3

Video with the same content as this article, as part of a Todo App tutorial:

Head of Software Engineering — Flutter Developer — StackOverflower http://tinyurl.com/joaosoares-so — Youtuber http://tinyurl.com/joaosoares-yt

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store