Hi Guys, Welcome to Proto Coders Point.

In this Flutter tutorial, We will learn how to store a data model object data in sharedPreferences in flutter.

Note: Firstly you need to serialize data to JSON String before saving it & the de-serialize it after reading.

Read this flutter article on JSON and serialization in flutter
https://flutter.dev/docs/development/data-and-backend/json to learn more in details.

Let’s Serialize JSON inside model class ‘User’

In ‘User’ data model class you will find 3 fields: name, email, phone & it also has a constructor & a method as below:

User.fromJson(): A constructor used for constructing a user instance from a Map structure.

toJson(): A method, used to convert user instance into a map.

User.dart

class User {
  final String name;
  final String email;
  final String phone;

  User(this.name, this.email,this.phone);

  //constructor that convert json to object instance
  User.fromJson(Map<String, dynamic> json) : name = json['name'],  email = json['email'],phone = json['phone'];

  //a method that convert object to json
  Map<String, dynamic> toJson() => {
    'name': name,
    'email': email,
    'phone':phone
  };
}

Saving object data in sharedPreferences

To save data model object, we must first convert it into a JsonString.

After converting model object data into JSON String, we can easily store it a String datatype.

then, we are storing jsonString into a shared_Preferences with key-value pairs.

 void storeUserData(){

    //store the user entered data in user object
    User user1 = new User(_name.text, _email.text);

    // encode / convert object into json string
    String user = jsonEncode(user1);

    print(user);

    //save the data into sharedPreferences using key-value pairs
    sharedPreferences.setString('userdata', user);
    
  }

Reading the data from shared_preferences

Now, you need to get the data stored in sharedPreferences, so fetch the data from sharedPreferences & convert the JsonString into Map Structure using jsonDecode() method & then convert it back to User Instance Object.

& finally use object to get data from data model datatype
Eg: user.name, user.email, user.phone.

void initialGetSaved() async{
    sharedPreferences = await SharedPreferences.getInstance();
      
   // Read the data, decode it and store it in map structure
    Map<String,dynamic> jsondatais = jsonDecode(sharedPreferences.getString('userdata')!);

    //convert it into User object
    var user = User.fromJson(jsondatais);

    if(jsondatais.isNotEmpty){
      print(user.name);
      print(user.email);
      //set the sharedPreferences saved data to TextField
      _name.value =  TextEditingValue(text: user.name);
      _email.value =  TextEditingValue(text: user.email);
      _phone.value =  TextEditingValue(text: user.phone);
    }
    
  }

How to convert User object data to json string and store in shared Preferences

Complete App implementation starts here

Let’s create a form in flutter, where a user can enter his name, email & phone(this is just for a example i have took 3 field).

Start with creating a new flutter project in your favorite IDE, I use android studio to build flutter apps( you can use any IDE).

1. Add Shared Preferences dependencies

As we need to save user entered data from TextField in flutter, we will make use of sharedpreferences to save the users data in app.

add sharedpreferences package into your flutter project.

In project > pubspec.yaml file.

In pubspec.yaml, under dependencies section add shared_preferences package.

dependencies:
  shared_preferences: #any version else keep empty it will take latest version

& then hit pub get or run flutter pub get commend in IDE Terminal.

2. Create a Data Model class ‘ User’

User.dart

class User {
  final String name;
  final String email;
  final String phone;

  User(this.name, this.email,this.phone);

  //constructor that convert json to object instance
  User.fromJson(Map<String, dynamic> json) : name = json['name'],  email = json['email'],phone = json['phone'];

  //a method that convert object to json
  Map<String, dynamic> toJson() => {
    'name': name,
    'email': email,
    'phone':phone
  };
}

3. UI – TextField Form Entered data will be saved until final submission

In main.dart page, we have 3 textfield, a Save Button & a submit button

3 TextField: user can enter name, email, phone.

Save Button: Saves the data entered in textfield for future, suppose if user leaves the app before final submission, After save button is press, the entered data in TextField will get saved and still exist even if user re-visit app in future.

Submit button: The submit will simply erase all the data from TextField & sharedpreferences will get cleared.

main.dart complete code

import 'dart:convert';

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

void main() async{
  await GetStorage.init();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
      
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {


  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {


  late SharedPreferences sharedPreferences;
  
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    initialGetSaved();
  }

  void initialGetSaved() async{
    sharedPreferences = await SharedPreferences.getInstance();
    
    // Read the data, decode it and store it in map structure
    Map<String,dynamic> jsondatais = jsonDecode(sharedPreferences.getString('userdata')!);

    var user = User.fromJson(jsondatais);

    if(jsondatais.isNotEmpty){
      print(user.name);
      print(user.email);

      _name.value =  TextEditingValue(text: user.name);
      _email.value =  TextEditingValue(text: user.email);
      _phone.value =  TextEditingValue(text: user.phone);
    }

  }

  void storeUserData(){

    //store the user entered data in user object
    User user1 = new User(_name.text, _email.text,_phone.text);

    // encode / convert object into json string
    String user = jsonEncode(user1);

    print(user);

    //save the data into sharedPreferences using key-value pairs
    sharedPreferences.setString('userdata', user);

  }


  TextEditingController _name = new TextEditingController();
  TextEditingController _email = new TextEditingController();
  TextEditingController _phone = new TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Save DataModel Data JSON'),
      ),
      body: SingleChildScrollView(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Full Form',style: TextStyle(fontSize: 32,fontWeight: FontWeight.bold),),
              Padding(
                padding: const EdgeInsets.all(16.0),
                child: Container(
                  height: 50,
                  child: TextField(
                    controller: _name,
                    decoration: InputDecoration(
                      border: OutlineInputBorder(),
                      labelText: 'Enter name'
                    ),
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(16.0),
                child: Container(
                  height: 50,
                  child: TextField(
                    controller: _email,
                    decoration: InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: 'Enter Email'
                    ),
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(16.0),
                child: Container(
                  height: 50,
                  child: TextField(
                    controller: _phone,
                    decoration: InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: 'Enter Phone'
                    ),
                  ),
                ),
              ),
              ElevatedButton(onPressed: (){
                storeUserData();
              }, child: Text('SAVE')),
              ElevatedButton(onPressed: (){
                _name.value =  TextEditingValue(text: '');
                _email.value =  TextEditingValue(text: '');
                _phone.value =  TextEditingValue(text: '');
                sharedPreferences.remove('userdata');
              }, child: Text('SUBMIT'))
            ],
          ),
        ),
      ),
    );
  }
}

Shared Preferences alternative in flutter