Flutter Shared Preferences

Mobile Apps Development A-Z Guide.

Give us a message if you’re interested in Blockchain and FinTech software development or just say Hi at Pharos Production Inc.

Or follow us on Youtube to know more about Software Architecture, Distributed Systems, Blockchain, High-load Systems, Microservices, and Enterprise Design Patterns.

Pharos Production Youtube channel

Absolutely any mobile application needs data storage. Information about the user, and so to say the main data such as posts, purchases, orders, and similar should be stored in a database.
But the application settings — it is best to store in the key-value storage. So let’s implement local storage in our Flutter application.

Step1. Create a new application. And add the following dependency to pubspec.yaml. The latest version on this moment is 0.5.1+1:

dependencies:   
  shared_preferences: ^0.5.1+2

Step2. Create a class that will contain the static functions of reading and writing to preference:

import 'dart:async';

import 'package:shared_preferences/shared_preferences.dart';

class PreferencesHelper {
  static Future<bool> getBool(String key) async {
    final p = await prefs;
    return p.getBool(key) ?? false;
  }

  static Future setBool(String key, bool value) async {
    final p = await prefs;
    return p.setBool(key, value);
  }

  static Future<int> getInt(String key) async {
    final p = await prefs;
    return p.getInt(key) ?? 0;
  }

  static Future setInt(String key, int value) async {
    final p = await prefs;
    return p.setInt(key, value);
  }

  static Future<String> getString(String key) async {
    final p = await prefs;
    return p.getString(key) ?? '';
  }

  static Future setString(String key, String value) async {
    final p = await prefs;
    return p.setString(key, value);
  }

  static Future<double> getDouble(String key) async {
    final p = await prefs;
    return p.getDouble(key) ?? 0.0;
  }

  static Future setDouble(String key, double value) async {
    final p = await prefs;
    return p.setDouble(key, value);
  }

  // helper

  static Future<SharedPreferences> get prefs => SharedPreferences.getInstance();
}

Step3. A little running ahead, let’s create a class that will consist of constant variables.

class Const {
  static const String TUTORIAL_STRING = 'TUTORIAL_STRING';

  // Default preferences
  static const String AUTHENTICATED = 'AUTHENTICATED';
  static const String PASSCODE = 'PASSCODE';
  static const String FINGERPRINT_ENABLED = 'FINGERPRINT_ENABLED';
}

Step 4. This class combines a class with constant variables and a helper class for writing and reading primitive data.

class Prefs {
  static Future<String> get tutorialString => PreferencesHelper.getString(Const.TUTORIAL_STRING);

  static Future setTutorialString(String value) => PreferencesHelper.setString(Const.TUTORIAL_STRING, value);

  static Future<bool> get authenticated => PreferencesHelper.getBool(Const.AUTHENTICATED);

  static Future setAuthenticated(bool value) => PreferencesHelper.setBool(Const.AUTHENTICATED, value);

  static Future<String> get passcode => PreferencesHelper.getString(Const.PASSCODE);

  static Future setPasscode(String value) => PreferencesHelper.setString(Const.PASSCODE, value);

  Future<void> clear() async {
    await Future.wait(<Future>[
      setAuthenticated(false),
      setTutorialString(''),
      setPasscode(''),
    ]);
  }
}

Step5. It remains the simplest. Making a simple screen with four widgets. Two buttons and text and text field:

Widget _buildTextField() {
  return Padding(
    padding: EdgeInsets.all(10.0),
    child: TextField(
      controller: _controller,
    ),
  );
}

Widget _buildTextFieldResult() {
  return Padding(
    padding: EdgeInsets.all(10.0),
    child: Text(tutorialValue),
  );
}

Widget _buildSaveButton() {
  return RaisedButton(
    child: Text('Save to Prefs'),
    onPressed: () async {
      Prefs.setTutorialString(_controller.text);
    },
  );
}

Widget _buildReadButton() {
  return RaisedButton(
    child: Text('Read from Prefs'),
    onPressed: () async {
      Prefs.tutorialString.then((value) {
        setState(() {
          tutorialValue = value;
        });
      });
    },
  );
}

An example of code you can find on the link below:

PharosProduction/tutorial-flutter-shared-preferences

Thanks for reading!