【Flutter】TODOリストをドラッグ&ドロップできるようにする

私が作っている禁酒アプリのOB-1にて、ドラッグ&ドロップでTODOリストの順番を入れ替えられるようにしたので、その方法をまとめます。

OB-1ダウンロードしてね

https://apps.apple.com/jp/app/id1666271955

ListViewからReorderableListViewへリプレイス

使ったWidgetはReorderableListViewです。

https://api.flutter.dev/flutter/material/ReorderableListView-class.html

もともとListViewだったものを、今回ReorderableListViewに入れ替えました。
そして、onReorderプロパティを追加します。

todo_list_container.dart

-   return ListView.builder(
+   return ReorderableListView.builder(
      itemCount: todayTodo.length,
      itemBuilder: (context, index) {
        final todo = todayTodo[index];
        return ListTile(
+         key: Key(index.toString()), // FIXME: zennのコメント参照。Key(todo.id)の方が良さそう
          title: Text(
            todo.title,
          ),
        );
      },
+     onReorder: (int oldIndex, int newIndex) async {
+       if (oldIndex < newIndex) {
+         newIndex -= 1;
+       }
+       final Todo todo = todayTodo.removeAt(oldIndex);
+       todayTodo.insert(newIndex, todo);
+
+       await todoRepo.updateIndex(
+         todos: todayTodo,
+       );
+     },
    );

onReorderはドラッグ&ドロップで入れ替えが起こった時に呼ばれるので、そこで入れ替えた時に行いたい処理を書いています。

ReorderableListViewのドキュメントを見ると、onReorderは以下のように書かれていると思います。

todo_list_container.dart

      onReorder: (int oldIndex, int newIndex) {
        setState(() {
          if (oldIndex < newIndex) {
            newIndex -= 1;
          }
          final int item = _items.removeAt(oldIndex);
          _items.insert(newIndex, item);
        });
      },

基本的には、この例のようにsetStateで画面更新するのがよくあるパターンです。

しかし、OB-1の場合は、Firestoreが更新されるとリアルタイムでTODOリストが更新されるような実装にしているので、setStateによる画面更新はせずにFirestoreのリアルタイムフェッチを発火させることで結果的に画面更新をしています。

参考までに、リアルタイムフェッチは以下のようなコードになっています。

todo_repositroy.dart

  Stream<List<Todo>> realTimeFetchTodoList() {
    final snapshots = FirebaseFirestore.instance
        .collection('users')
        .doc(uid)
        .collection('projects')
        .doc(projectId)
        .collection("todoList")
        .snapshots();
    final todoListStream = snapshots.map((snapshot) {
      final list = snapshot.docs.map((doc) {
        return Todo.fromDoc(doc);
      }).toList();
      list.sort((a, b) => a.index.compareTo(b.index)); // これでindex順に並べ替えてる
      return list;
    });
    return todoListStream;
  }

Firestoreのバッジ書き込みによる更新

OB-1の場合、以下のコードによりFirestoreを更新しています。

todo_list_container.dart

await todoRepo.updateIndex(
  todos: todayTodo,
);

これは、私が作った関数で、下記のようなコードになっています。

todo_repositroy.dart

  Future<void> updateIndex({
    required List<Todo> todos,
  }) async {
    final batch = FirebaseFirestore.instance.batch();

    todos.asMap().forEach((index, todo) {
      batch.update(
        todoListCollection.doc(todo.id),
        {
          "index": index,
          "updatedAt": Timestamp.now(),
        },
      );
    });
    await batch.commit();
  }

同時に複数のTODOオブジェクトを更新するので、バッジ書き込みを行っています。下記は公式ドキュメントなので細かい仕様を確認してみてください。

https://firebase.google.com/docs/firestore/manage-data/transactions?hl=ja

先ほど黄色いボックスの中で紹介しましたが、リストを表示する前に、以下のようなsortが入っているので、indexの数字の順番に表示されるというわけです。

todo_repositroy.dart

list.sort((a, b) => a.index.compareTo(b.index));

まとめ

という感じで、以下のような入れ替え機能をv1.4.0で実装できました！

OB-1ダウンロードしてね！

https://apps.apple.com/jp/app/id1666271955

GitHubリポジトリで全コード見れます。

Flutter大学に入っているかたはリポジトリが見れます。
https://github.com/flutteruniv/ob-1

Flutter大学はこちら
https://flutteruniv.com/