Fluuter SharedPreferencesでローカル保存

Question

前提・実現したいこと

SharedPreferencesでローカルで保存したいのですが、保存できるのが最後に入力した文字のみで
入力した文字全て保存されてない

発生している問題・エラーメッセージ

最後に入力した文字しか保存されていない！

該当のソースコード

import 'package:flutter/foundation.dart';
import 'package:freezed_annotation/freezed_annotation.dart';
import 'package:state_notifier/state_notifier.dart';
import 'package:todo_app/todo.dart';
import 'package:uuid/uuid.dart';
import 'package:shared_preferences/shared_preferences.dart';

// import 'package:cloud_firestore/cloud_firestore.dart'; //cloud_firestoreのインポート

part 'todos_state.freezed.dart';

//ローディング中を示す
@freezed
abstract class TodosState with _$TodosState  {
  const factory TodosState( {//TodosStateのクラスをチェック
    @Default(<Todo>[]) List<Todo> todos,//すべてのTodoが入るtodos
  }) = TodosStateData;//TodosStateDataであればデータの読み込みが終わったという判断ができるように
  const factory TodosState.loading() = TodosStateLoading;//TodosStateLoadingであればまだ読み込み中
}

//ここにDB
class TodosController extends StateNotifier<TodosState> with LocatorMixin  { //LocatorMixinをmixinする事でcontextにあるproviderへのアクセスを容易する
  TodosController() : super(const TodosState.loading());
  final _uuid = Uuid();
  @override
  void initState() async {
    super.initState();
    await Future<void>.delayed(const Duration(seconds: 3));//initStateで3秒間ウエイトを入れ,初期データとしていくつかのTodoをstateへ設定
    // 初期データを設定、TodosStateLoadingからTodoStateDataへ変わるのでローディング完了の状態となる

    var prefs = await SharedPreferences.getInstance();
    state = TodosState(
      todos: [
        // Todo(id: _uuid.v4(), title: 'テスト'),
        Todo(id: prefs.getString('_uuid.v4()') , title: prefs.getString('title') ),//書き込む
      ],
    );
  }

  void add(String title) async {//追加機能
    final SharedPreferences prefs = await SharedPreferences.getInstance();
    final currentState =  state;
    if (currentState is TodosStateData) {
      // todosのクローンに新しいTodoを追加してstateを更新
      final todos = currentState.todos.toList()
        ..add(
          Todo(id: _uuid.v4(), title: title),
        );
      prefs.setString('id',_uuid.v4());//読み込み
      prefs.setString('title',title) ;
      state = currentState.copyWith(//stateはimmutableでメンバ変数を直接変更することはできないので、stateを更新するときは現在のstateからcopyWithでコピーするか、新規のstateで上書きする
        todos: todos,
      );

    }
  }

  void toggle(Todo todo) {
    final currentState = state;
    if (currentState is TodosStateData) {
      // Todoを検索してcomplatedをtoggleし、stateを更新
      final todos = currentState.todos.map((t) {
        if (t == todo) {
          return t.copyWith(
            completed: !t.completed,
          );
        }
        return t;
      }).toList();
      state = TodosState(
        todos: todos,
      );
    }
  }
}

試したこと

補足情報（FW/ツールのバージョンなど）

SQLiteが理解できずにこちらを使うようにしました。

Answer 1

複数のTodoデータを保存したいということでよろしいでしょうか？そうであれば、SharedPreferencesは、キーに対して、上書きすることしかできないので、データを追加するたびに、全体をjsonなどにシリアライズして保存する様にします。

import 'package:freezed_annotation/freezed_annotation.dart';

part 'todo.freezed.dart';
part 'todo.g.dart';

//Todoのモデルを実装
@freezed
abstract class Todo with _$Todo {
  //抽象的なクラス。インスタンス化できない

  const factory Todo({
    String id, // uuidで割りつける予定
    String title,
    @Default(false) bool completed, //@Defaultで初期値を与えるpage=0ではない
  }) = TodoData;

  factory Todo.fromJson(Map<String, dynamic> json) => _$TodoFromJson(json);
}

  @override
  void initState() async {
    super.initState();
    await Future<void>.delayed(const Duration(seconds: 3));//initStateで3秒間ウエイトを入れ,初期データとしていくつかのTodoをstateへ設定
    // 初期データを設定、TodosStateLoadingからTodoStateDataへ変わるのでローディング完了の状態となる

    var prefs = await SharedPreferences.getInstance();

    final todosJson = prefs.getString('todos');
    final todos = json.decode(todosJson).map<Todo>((json) => Todo.fromJson(json)).toList();

    state = TodosState(
      todos: todos
    );
  }

  void add(String title) async {//追加機能
    final SharedPreferences prefs = await SharedPreferences.getInstance();
    final currentState =  state;
    if (currentState is TodosStateData) {
      // todosのクローンに新しいTodoを追加してstateを更新
      final todos = currentState.todos.toList()
        ..add(
          Todo(id: _uuid.v4(), title: title),
        );

      final todosJson = json.encode(todos);
      prefs.setString('todos', todosJson);
      
      state = currentState.copyWith(//stateはimmutableでメンバ変数を直接変更することはできないので、stateを更新するときは現在のstateからcopyWithでコピーするか、新規のstateで上書きする
        todos: todos,
      );

    }
  }

Comments

[hiro.a]

回答いただきありがとうございます。
Todoクラスは以下のように実装しています。

これにJsonで保存するようにすればよろしいでしょうか？

[hiro.a]

import 'package:flutter/foundation.dart'; // *.freezed.dartで必要なのでimportしておく
import 'package:freezed_annotation/freezed_annotation.dart';
import 'package:uuid/uuid.dart';

part 'todo.freezed.dart';

//Todoのモデルを実装
@freezed
abstract class Todo with _$Todo {//抽象的なクラス。インスタンス化できない

const factory Todo({
String id, // uuidで割りつける予定
String title,
@Default(false) bool completed, //@Defaultで初期値を与えるpage=0ではない
}) = TodoData;
}

[f-miyu]

freezedを使っているのなら、pubspec.yamlにjson_serializableを追加して、更新した回答の様にすればいいです。