Zenn
🦔

【Flutter】todoが更新されたときにSnackBarにtodo名を表示する方法メモ

2022/03/02に公開
Flutter
tech

はじめに

この記事はKboyさんの以下動画の該当箇所からの内容を学習した際のメモになります。

コードは以下の動画を参考にしてください。（説明もこちらの方がわかりやすいです。）
(以下リンクは該当箇所から再生されます。)
YouTubeのvideoIDが不正ですhttps://youtu.be/BY4x8FIj0PY?t=1643
わかりづらい点等あるかと思いますが、どなたかの参考になればと思います。
また、誤っている点等ございまいたらご指摘いただけますと幸いです。

flutterDoctor

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.10.0, on macOS 12.1 21C52 darwin-arm, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2020.3)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

• No issues found!

ざっくりとしたtodoサンプルアプリの概要

todo管理のサンプルアプリ。Providerを使い、UIとロジック(model)を分離して管理。

関係するファイル

  • main.dart
    todo一覧をListView、ListTIleで表示。
  • main_model.dart
    main.dartの状態管理
  • edit_todo_page.dart
    todo編集画面
  • edit_todo_model.dart
    edit_todo_page.dartの状態管理
    update()でFirestoreのデータを更新する。

ざっくりとした処理の流れとやりたいこと

  • main.dartでtodoのListTileにある、編集ボタン(今回はSlidableを使用)をタップするとedit_todo_page.dartに画面遷移
  • edit_todo_page.dartでtodoを編集して編集ボタンをタップ
  • main.dartに戻り、todo一覧が更新され、SnackBarで「"編集したtodo"が更新されました!」
    と表示される。

上の処理でSnackBarの"編集したtodo"のところに、edit_todo_page.dart
で入力したtodoTitleを表示したい。
(SnackBarの表示と、Slidableの表示はできているとし、ここでは説明を省きます。)

やること

  1. todo編集画面 edti_todo_page.dartで
    Navigator.of(context).pop()の引数に渡したい値を入れる。
    ※関係ないところは消してますので、動画ないのコードとは違ってます。
edit_todo_page
                ElevatedButton(
                  onPressed: () async {
                    await model.update();
                    // popの引数に渡すための値を取得している。
                    String? updateTodoText = model.updateTodoText;
                    // 1. Navigatorのpopで戻る画面に引数で渡したい値を入れる。
                    Navigator.of(context).pop(updateTodoText);
                  },
                  child: const Text('編集'),
                )
  1. Navigator.of(context).pop()の引数を受け取るため、
    Navigator.push()を変数に代入する。
  2. Navigator.push()の後に、受け取った変数を使った処理をかく。
    今回は受け取った変数をnullじゃないかチェックして、SnackBarで表示している。
main.dart
                        SlidableAction(
                          onPressed: (BuildContext context) async {
                            // 2. Navigator.popの引数の値がここに返ってくるので、変数で受け取る。
                            final String? updateTodoText = await Navigator.push(
                              context,
                              MaterialPageRoute(
                                builder: (context) => EditTodoPage(todo),
                              ),
                            );
                            // 3. 上で受け取った値をif文を使って処理をしている。
                            if (updateTodoText != null) {
                              SnackBar snackBar = SnackBar(
                                backgroundColor: Colors.green,
                                content: Text('"$updateTodoText"を更新しました！'),
                              );
                              _scaffoldKey.currentState?.showSnackBar(snackBar);
                            }
                            model.getTodoListRealtime();
                          },
                          backgroundColor: Colors.grey,
                          foregroundColor: Colors.white,
                          icon: Icons.edit,
                          label: '編集',
                        )

おわりに

読んでいただきありがとうございました！

Discussion