👻

Navigator.pop(context)で画面戻った際に、一覧を再取得する

2024/05/31に公開2

はじめに

Flutterでモバイルアプリを開発していて、更新画面で更新した値を、一覧画面で再描画したい、というシチュエーションに直面しました。
今回は更新画面でドキュメントを更新した後、Navigator.pop(context)で一覧画面に戻った際に、更新内容を取得し直し、画面を再描画する方法をまとめておきます。

前提

一覧ページと更新ページを準備します。
一覧ページ(listPage.dart)から更新ページ(updatePage.dart)へ遷移し、内容を更新して保存ボタンを押下すると、一覧ページに戻る、という建て付けです。
このままだと更新内容が変更されません。

listPage.dart
/// 変更・参照画面への画面遷移ファンクション
void _goToUpdatePage(Diary diary) async {
    await Navigator.push(
        context,
        MaterialPageRoute(
            builder: (context) => UpdatePage(diary)),
      );
}

updatePage.dart
TextButton.icon(
    onPressed: () async {
        // 保存ボタン押下時に、入力内容を更新
        await _updateToFirebase();
        Navigator.pop(context);
    },
    icon: const Icon(Icons.book),
    label:const Text('保存')
),

UpdatePageへの遷移後に一覧を再取得する

分かれば単純だったのですが、UpdatePageへNavigator.push()で遷移した後に、一覧取得を再実行することで、内容を更新することができました。

listPage.dart
/// 変更・参照画面への画面遷移ファンクション
void _goToUpdatePage(Diary diary) async {
    await Navigator.push(
        context,
        MaterialPageRoute(
            builder: (context) => UpdatePage(diary)),
      );
    _fetchFirebaseData(); // ← UpdatePageへの遷移後、ここで一覧を再取得する!!
}

/// 日記一覧取得ファンクション
void _fetchFirebaseData() async {
    final db = FirebaseFirestore.instance;
    final event = await db.collection("diary").where('user_id', isEqualTo: userId)
                    .orderBy('insert_date_time',descending: true).get();
    final docs = event.docs;
    final diaries = docs.map((docs) => Diary.fromFirestore(docs)).toList();
    setState(() {
        diaryList = diaries;
    });
}
updatePage.dart
TextButton.icon(
    onPressed: () async {
        // 保存ボタン押下時に、入力内容を更新
        await _updateToFirebase();
        Navigator.pop(context);
    },
    icon: const Icon(Icons.book),
    label:const Text('保存')
),

Discussion

DiegoDiego

今回の場合、どの画面から戻っても更新したいのかなーと思ったのですが、あってますでしょうか?
その場合、ModalRoute.of(context).isCurrentで現在のRouteの変更知れるので、
hookを使っている場合、useValueChangedで値のisCurrentがfalseからtrueになった時に更新する処理を入れると良いかもと思いました!

katoshikatoshi

コメントありがとうございます!
どの画面から戻っても更新したいので、おっしゃっていただいているやり方で試してみます!