Flutter shared preference :

Flutter shared preference is used to save the data in the application and can be retrieved later for usage.It is considered as the light weight storage option available in mobile apps both for android and iOS.

The most important usage of flutter shared preference is to store user login credential’s, almost every app use this mechanism so in this part of the tutorial on Flutter shared preference we will discuss a detailed implementation.

The pattern followed in storing is a key and value, there will be a key for every value and they are store and retrieved based on these keys, every key should be unique.

Sometimes in apps where there are forms to be filled and to store the data on inappropriate  app closure we may use flutter shared preference.

Flutter shared preference video tutorial :

Go through the below tutorial for more detailed explanation on shared preferences.

Project Structure :

This image depicts the project structure implementation of flutter shared preferences.

pubspec.yaml :

Add flutter shared preference dependency as below use the latest version for avoiding the code level issues.

dependencies:
  flutter:
    sdk: flutter
  shared_preferences: 0.5.8

main.dart :

Initialize with void main() and provide the default class MyApp()

void main() {
  runApp(MyApp());
}

Add shared preference

SharedPreferences localStorage;

Add TextEditingControllers using which we can handle / fetch the data from text views.

TextEditingController emailController = new TextEditingController();
TextEditingController pwdController = new TextEditingController();

Initialize shared preferences using async method and get instance.

static Future init() async {
  localStorage = await SharedPreferences.getInstance();
}

Design Field Email Id

Container(
  margin: EdgeInsets.symmetric(vertical: 10),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Text(
        "Email Id:",
        style:
            TextStyle(fontWeight: FontWeight.bold, fontSize: 15),
      ),
      SizedBox(
        height: 10,
      ),
      TextField(
          controller: emailController,
          obscureText: false,
          decoration: InputDecoration(
              border: InputBorder.none,
              fillColor: Color(0xfff3f3f4),
              filled: true))
    ],
  ),
),

Design Field Password

Container(
  margin: EdgeInsets.symmetric(vertical: 10),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Text(
        "Password :",
        style:
            TextStyle(fontWeight: FontWeight.bold, fontSize: 15),
      ),
      SizedBox(
        height: 10,
      ),
      TextField(
          controller: pwdController,
          obscureText: true,
          decoration: InputDecoration(
              border: InputBorder.none,
              fillColor: Color(0xfff3f3f4),
              filled: true))
    ],
  ),
),

Add a login button and provide save to the onPressed function and provide the title for Text widget.

RaisedButton(
  onPressed: save,
  child: Text('Login'),
),

Save data into shared preferences using async method save()

save() async {
  await MyApp.init();
  localStorage.setString('email', emailController.text.toString());
  localStorage.setString('password', pwdController.text.toString());

}

Display data from shared preferences is data is not null.

if (localStorage != null)
  Padding(
    padding: const EdgeInsets.all(15.0),
    child: Text("User Logged in!!! ->  Email Id: ${localStorage.get('email')}  Password: ${localStorage.get('password')}",style: TextStyle(fontSize: 20),),
  ),

Full Code :

Providing the full code for flutter shared preferences implementation.

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';

void main() {
  runApp(MyApp());
}

SharedPreferences localStorage;

TextEditingController emailController = new TextEditingController();
TextEditingController pwdController = new TextEditingController();

class MyApp extends StatelessWidget {
  static Future init() async {
    localStorage = await SharedPreferences.getInstance();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: MyHome(),
    );
  }
}

class MyHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(30.0),
        child: Center(
          child: Column(
            children: <Widget>[
              Padding(
                padding: EdgeInsets.only(top: 200),
              ),
              Container(
                margin: EdgeInsets.symmetric(vertical: 10),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      "Email Id:",
                      style:
                          TextStyle(fontWeight: FontWeight.bold, fontSize: 15),
                    ),
                    SizedBox(
                      height: 10,
                    ),
                    TextField(
                        controller: emailController,
                        obscureText: false,
                        decoration: InputDecoration(
                            border: InputBorder.none,
                            fillColor: Color(0xfff3f3f4),
                            filled: true))
                  ],
                ),
              ),
              Container(
                margin: EdgeInsets.symmetric(vertical: 10),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      "Password :",
                      style:
                          TextStyle(fontWeight: FontWeight.bold, fontSize: 15),
                    ),
                    SizedBox(
                      height: 10,
                    ),
                    TextField(
                        controller: pwdController,
                        obscureText: true,
                        decoration: InputDecoration(
                            border: InputBorder.none,
                            fillColor: Color(0xfff3f3f4),
                            filled: true))
                  ],
                ),
              ),
              Padding(
                padding: EdgeInsets.only(top: 50),
              ),
              RaisedButton(
                onPressed: save,
                child: Text('Login'),
              ),

              Padding(
                padding: EdgeInsets.only(top: 50),
              ),
              if (localStorage != null)
                Padding(
                  padding: const EdgeInsets.all(15.0),
                  child: Text("User Logged in!!! ->  Email Id: ${localStorage.get('email')}  Password: ${localStorage.get('password')}",style: TextStyle(fontSize: 20),),
                ),
            ],
          ),
        ),
      ),
    );
  }
}


save() async {
  await MyApp.init();
  localStorage.setString('email', emailController.text.toString());
  localStorage.setString('password', pwdController.text.toString());

}

Flutter shared preference Output :

This screen below depicts the usage of flutter shared preferences.

If you have any comments on this tutorial flutter shared preference do let us know in the comment section below.If you like this tutorial do like and share this tutorial for more interesting tutorials.