押すだけタイマー をつくる(2)

リストにアイテムを追加してみよう。

まずは、追加ボタンを表示しよう。とりあえず、新規のPresetのIDは、固定で済ます。

preset_list_view.dart

floatingActionButton: FloatingActionButton(
  onPressed: () {
    Navigator.restorablePushNamed(
      context,
      PresetDetailsView.routeName,
      arguments: {'itemid': 0},
    );
  },
  child: const Icon(Icons.add),
),

詳細画面には、保存ボタンを追加する。

preset_details_view.dart

ElevatedButton(
  onPressed: () {
    controller.addPreset(preset);
    Navigator.of(context).pop();
  },
  child: const Text('SAVE'),
),

最後に、コントローラーとサービスにもメソッドを追加する。

preset_controller.dart

Future<void> addPreset(Preset preset) async {
  _list.add(preset);
  await _presetService.add(preset);
}

preset_service.dart

Future<void> add(Preset preset) async {
  _list.add(preset);
}

SAVEボタンを押してからホットリロードすると、リストに項目が追加されたことを確認できた。しかし、すでにある項目をタップして保存ボタンを押すと、新しく追加される。 「追加」しか実装していないので、当然か。

---

これはヒドいので、上書きにも対応しよう。

Presetのidが同一であれば同じものとして扱えばよいので、presetをListではなくidをキーとしたMapで保持する、という方針にした。 idをUUIDにすれば、新規項目用のid取得も簡単になる。

1. Presetのプロパティidを、intからStringに変更する
2. コントローラーとサービスのListをMap<String, Preset>に変更する
3. addメソッドをupdateメソッドに名称変更、presetのidをキーにしてpresetを保存するように変更する
4. 新規項目を取得できるよう、コントローラーに以下のメソッドを追加する(pubspec.yamlで、uuidパッケージを追加しておく)

   Preset newPreset() {
     const uuid = Uuid();
     return Preset(uuid.v4());
   }
   

5. PresetListViewで追加ボタンを押したときの動作は、コントローラーから上記メソッドで新規項目を取得し、そのidを渡すようにする
6. PresetListViewでコントローラーからプロパティlistを参照している箇所を、listメソッドを呼び出すように変更する
7. コントローラーには、listメソッドを追加しておく

   List<Preset> list() {
     final List<Preset> _list = [];
     _presets.forEach((key, value) {
    _list.add(value);
     });
     return _list;
   }
   

これで、同じidの項目が増え続けることはなくなった。

---