【Flutter】SharedPreferences로 List 데이터를 저장하는 방법 【도해 첨부】

이런 분들에게 추천 기사입니다.

터미널에 데이터를 저장할 수있는 SharedPreferences를 사용하는 방법은 어느 정도 이해합니다

List 형식의 데이터를 저장하고 싶습니다

SharedPreferences는 List 형식의 데이터를 저장하려는 경우 String 유형만 저장할 수 있습니다.

모든 유형의 List 데이터를 저장하고 싶다면 한 번 필요합니다.

솔루션: json 형식 활용

json 형식의 인코딩과 디코딩을 통해 실현할 수 있습니다.
내 앱 제작 실천 예보다 전합니다.

Provider의 사용법은 이쪽.

【Flutter】앱 제작에서 배우는 Provider의 사용법 【도해 첨부】

(아래 준비) Map 관련 처리 작성

아래의 ClockModel은

Map 형으로의 변환 ※ 보존시에 사용

Map 오브젝트를 대입하는 처리 ※읽을 때에 사용

에 대한 아래 준비입니다.
나중에 사용합니다.

clock.dart

class ClockModel {
  final String id;
  String clock;
  int currentSeconds;
  int plusSeconds;
  bool isMyTurn = false;
  Timer timer;

  ClockModel(
      {this.id,
      this.clock,
      this.currentSeconds,
      this.plusSeconds,
      this.isMyTurn,
      this.timer});

  /// Map型に変換
  Map toJson() => {
        'id': id,
        'clock': clock,
        'currentSeconds': currentSeconds,
        'plusSeconds': plusSeconds,
        'isMyTurn': isMyTurn,
        'timer': timer,
      };

  /// JSONオブジェクトを代入
  ClockModel.fromJson(Map json)
      : id = json['id'],
        clock = json['clock'],
        currentSeconds = json['currentSeconds'],
        plusSeconds = json['plusSeconds'],
        isMyTurn = json['isMyTurn'],
        timer = json['timer'];
}

SharedPreferences List 데이터 저장 방법

Map 형식으로 변환

Json 형식으로 변환 (인코딩)

String 형의리스트로 변환

setStringList로 저장

그림으로 나타내면 보시다시피 (정확하지 않습니다).

※아이콘은, 자 블로그( htps : // 코미라 rch. 이 m )로 사용하고 있는 코알라입니다.

이번에는 ClockModel에 정의한 데이터를 나열한 settingClocks라는 객체가 저장하고 싶은 데이터입니다.

clock.dart

class ClockProvider with ChangeNotifier {
  // 今回保存したいリスト
  List<ClockModel> settingClocks = [];

  ClockProvider() {
    syncDataWithProvider();
  }

  void initSettingClocks() {
    settingClocks = [
      ClockModel(
          id: '1',
          clock: '00:05:00',
          currentSeconds: 300,
          plusSeconds: 5,
          isMyTurn: false),
      ClockModel(
          id: '2',
          clock: '00:05:00',
          currentSeconds: 300,
          plusSeconds: 5,
          isMyTurn: false),
    ];
  }

  void setInitialSharedPrefrences() {
    // 設定初期化
    initSettingClocks();
    // sharedPreferencesに保存
    updateSharedPrefrences();
  }

  /// SharedPrefrences保存
  Future updateSharedPrefrences() async {
    // ①Map型変換→②Json形式にエンコード→③リスト化
    List<String> myClocks =
        settingClocks.map((f) => json.encode(f.toJson())).toList();

    SharedPreferences prefs = await SharedPreferences.getInstance();
    // ④保存
    await prefs.setStringList('settingClocks', myClocks);

    print('updateSharedPrefrences: $myClocks');

  }
}

async에서 비동기 처리화하여 SharedPreferences의 처리 자체는 await로 기다리게 하는 것을 잊지 마세요.

다음은 참고로 settingClocks에 대한 설정과 updateSharedPrefrences() 호출 부분의 코드입니다.
버튼 탭시의 처리로 설정 및 저장하고 있습니다.

settingsPage.dart

class SettingsPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () {
        Navigator.pop(context, '戻った');
        return Future.value(false);
      },
      child: Scaffold(
        appBar: AppBar(
          title: Text('設定'),
          actions: [
            FlatButton(
              child: Icon(Icons.refresh),
              onPressed: () {
                Provider.of<ClockProvider>(context, listen: false)
                    .setInitialSharedPrefrences();
              },
            ),
          ],
        ),
        body: SettingsPageHome(),
      ),
    );
  }
}


  void initSettingClocks() {
    settingClocks = [
      ClockModel(
          id: '1',
          clock: '00:05:00',
          currentSeconds: 300,
          plusSeconds: 5,
          isMyTurn: false),
      ClockModel(
          id: '2',
          clock: '00:05:00',
          currentSeconds: 300,
          plusSeconds: 5,
          isMyTurn: false),
    ];
  }

  void setInitialSharedPrefrences() {
    // 設定初期化
    initSettingClocks();
    // sharedPreferencesに保存
    updateSharedPrefrences();
  }

SharedPreferences List 데이터를 읽는 방법

getStringList로 읽어들입니다

Json 디코딩

Map 객체를 ClockModel에 대입

목록으로 변환

그림으로 나타내면 보시는 대로(이쪽도 어디까지나 이미지입니다).


보존 처리의 역으로부터 뒤따르는 느낌이군요.
코드는 다음과 같습니다.

clock.dart

/// SharedPrefrences読み出し
  Future syncDataWithProvider() async {
    print('syncDataWithProvider');

    SharedPreferences prefs = await SharedPreferences.getInstance();
    // ①読み出し
    var result = prefs.getStringList('settingClocks');

    print('result:$result');

    // 読み出し確認
    if (result != null) {
      // ②デコード→③MapオブジェクトをClockModelに代入→④リストに変換
      settingClocks =
          result.map((f) => ClockModel.fromJson(json.decode(f))).toList();
    } else {
      // 必要に応じて初期化
    }

  }

다음은 참고까지 읽기 처리의 실행 부분입니다.
ClockProvider의 생성자에서 읽습니다.

clock.dart

class ClockProvider with ChangeNotifier {
  List<ClockModel> settingClocks = [];

  ClockProvider() {
    syncDataWithProvider();
  }
}

SharedPreferences에서 목록을 저장하는 데 도움이 되길 바랍니다.

참고