Saving Data in Flutter

In the lib folder of our project, let’s add a new file, called settings_screen.dart.

This will be the screen that users will use to read and set the settings for this app, and in particular the name of the list of recipes, the maximum daily calories and an option to show or hide the file size of our files after we add them to this app.

In the new file, let’s import material.dart

Then create a stateful widget. You can type stful and press enter: this will add the boilerplate code for a new Stateful Widget, that’s what we need here. Let’s call it settingScreen.

At the top of the state class, let’s add a few variables: a String named _listName, and we’ll set it to be an empty string. An int named _calories, whose initial value is 0. Let’s also include a bool for _showFileSize, and set it to false, and finally a double for the fontSize, that we can set to 22.0.

String _listName = ''; 
int _calories = 0; 
bool _showFileSize = false; 
final double fontSize = 22.0;

Let’s also add two textEditingControllers, that will contain the values for the list name and calories fields:

Both are final. We can call the first one _listNameController, and it will be an instance of TextEditingController(). The second one we can call _caloriesController, and again it will be an instance of TextEditingController.

final _listNameController = TextEditingController(); 
final _caloriesController = TextEditingController(); 

Now, let’s create a function that will retrieve all the settings, leveraging the helper class that we’ve created previously. This returns a Future, and we can call it _loadSettings. Let’s also mark it as async.

Now let’s create a final, called prefs, that takes the instance of the SPHelper class retrieved by calling getInstance().

Next we’ll call the methods that will retrieve the data we want to show our users: the name of the list, the number of calories, and the boolean that contains the option to show the file size.

Let’s begin with the _listname variable, calling await, then prefs.getListName(): this will return a string, containing the name of the list of recipes we want to store.

Next let’s set the calories variable: _calories this calls the getCalories() method on our prefs instance.

Finally let’s deal with _showFileSize, and set it to take the result of prefs.getShowFileSize();

Now that we have retrieved the values that we need, let’s update the controllers: so _listNameController.text is equal to _listName, and _caloriesController.text is equal to _calories, transformed into a string with the .toString method.

This completes our _loadSettings method: this should be called once, when the widget is loaded, so in the initState method.
So let’s override the initState method, then, let’s override the initState method of the State class. Here, after the call to super.initState, let’s call our loadSettings method.

@override 
  void initState() { 
    super.initState(); 
    _loadSettings(); 
  } 

Now before doing anything else, let’s also override the dispose method, as all controllers, including textEditingControllers, should be disposed to avoid memory leaks. Here you want the call to super.dispose to be the last instruction, so before it let’s call _listNameController.dispose, and _caloriesController.dispose.

@override 
void dispose() { 
    _listNameController.dispose(); 
    _caloriesController.dispose(); 
    super.dispose(); 
  }  

OK, we are now ready to build the user interface. Let’s do that next.