Your Second Flutter App

Heads up... You've reached locked video content where the transcript will be shown as obfuscated text.

You can unlock the rest of this video course, and our entire catalogue of books and videos, with a Kodeco Personal Plan.

Unlock now

Another key part of providing a solid user experience in your app is saving data that the user has entered, so that it survives between app restarts. In some cases you can just save the data locally in the app. In others, you may want to also send the data over a network to a backend server so that it gets associated to an account for your user. Now, when saving data locally, you have a number of different options. One is saving the data to files, by opening a file, writing data to the file, and then closing the file. For more complicated data, especially data that has some relational structure to it, you would want to save the data in a database. One example would be saving to a SQLite database. You'll see how to do that in a later course in our Flutter Learning Path. Now, another way to save data is useful when the data is relatively simple and has a key-value type structure. That is, you want to save pairs of data items, in which one item in the pair acts as a key and the other acts as a value. A typical use case for key-value pairs is the setting screens of an app, where the particular setting acts like a key and the value the user chooses for setting is the value. The Flutter package SharedPreferences lets you store key-value data and persist it in your app. Behind the scenes on iOS, this package uses user defaults, and on Android, the package uses a feature that goes by the name of SharedPreferences. To get started, open your project in progress, or download the sample project for this episode. Now run your app. Open the Filter page and select a filter. Now you'll see that when you return back to the Course page, you'll see all the courses, which is a definite bug. Don't worry, we'll fix that soon. If you return back to the Filter page, your selection is gone. We need to persist this, and SharedPreferences is a great way to do that. First look up the SharedPreferences documentation for Flutter. You can find it over here. Click on the Installing tab. There, you will get your installation instructions. Copy the installation command. Now switch back to Visual Studio Code and open up the Terminal tab. Copy the SharedPreferences installation command into the terminal. This will download the library and all the dependencies. Keep in mind, you can also manually update pubspec.yaml. Now to incorporate SharedPreferences, open up filter_page.dart in the Filter subfolder. Inside of FilterPageState, add a helper method, loadValue. This method is used to load the currently saved FilterValue when the FilterPage is first opened. Now call getInstance on the SharedPreferences class to set a prefs variable in the method. The call to getInstance is asynchronous, so we'll need to use the async await keywords. Make sure to import the SharedPreferences library. Once we have our preferences, we then want to call setState and set the FilterValue for the FilterPage. We will set it using the current value for the filter that is stored in SharedPreferences. We call getInt to get the value. Now we pass in a constants value for the key that we are accessing. Of course, if we find a null value, we simply set the value to 0. Add initState into call to loadValue. Update the handle radial value changed method to save the filter selected by a user. Here, again, we get the SharedPreferences instance and call setState to set the filterValue. We also save the selected value into SharedPreferences using setInt. Okay, let's try this out and see how it works. Build and run or hot reload your app. Head over to the Filter page, select an option, go back and then go to the Filter page. You'll see your filter option is selected, but of course, going back to the course listing, you'll see the courses without the filter applied. We will do that in the next episode.