top of page

[Flutter]Save data to shared preference in Redux

Overview


I'm making a smartphone app with flutter. Redux is used for state management. I want to write the data in the shared preference which I want to keep even if I turn off the app and start it again.



Method


  1. State to save


Save the class below.


class Item{
   String name;
   int id;
}
class AppState{
   List<Item> items;
}

2. Add write process to json to each class


class Item{
   String name;
   int id;
   
   Map toJson()=>{
      'name': name,
      'id': id as int,
   }
}

class AppState{
   List<Item> items;
      
   Map toJson()=>{
      'items': items,
   }
}

If a class member contains an instance of another class, that class will call the toJson () method, if any.


3. Added method to write to shared preference


To use sharedpreference, you need to add the following to pubspec.yaml. Please modify the version as appropriate according to the time.


dependencies:
  ・・・
  shared_preferences: ^0.4.2
import 'package:shared_preferences/shared_preferences.dart';

void saveToPrefs(AppState state) async{

  SharedPreferences prefs=await SharedPreferences.getInstance();
  var string=json.encode(state.toJson());
await prefs.setString('itemState', string);

Since writing to the shared preference is done asynchronously, make it an async method and wait for the end of writing with await.


4. Add action


Add AddItemAction that add new item.


class AddItemAction{

  final Item item;

  AddItemAction(this.item);

Add the item you want to add to the member variables of that class.


5. Add reducer


Add a reducer to add a new item.


List<Item> ItemsReducer(List<Item> items, action){
    
    if (action is AddItemAction){
      return []..addAll(items)
        ..add(action.item);
    }
    else{
      return items;
    }
}

6. Add middleware


After adding the item, add the middleware that saves the data in the shared preference.


void AppStateMiddleWare(Store<AppState> store, action, NextDispatcher next) async{

next(action);

if (action is AddItemAction){
  saveToPrefs(store.state);
}

next (action) adds item. After that, call the method added in 3.



Lastly


I will write how to call from shared preference next time.

Recent Posts

See All

[Flutter/Dart] Format string with TextField

What want to do I want to create an input form using TextField. For example, if the input content is a monetary amount, I would like to display it in 3-digit delimiters with a ¥ prefix. Rather than ha

コメント


Let's do our best with our partner:​ ChatReminder

iphone6.5p2.png

It is an application that achieves goals in a chat format with partners.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png

Let's do our best with our partner:​ ChatReminder

納品:iPhone6.5①.png

It is an application that achieves goals in a chat format with partners.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png

Theme diary: Decide the theme and record for each genre

It is a diary application that allows you to post and record with themes and sub-themes for each genre.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png
bottom of page