👻
【Flutter】Navigator.pop(context)で画面戻った際に、一覧を再取得する
はじめに
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
今回の場合、どの画面から戻っても更新したいのかなーと思ったのですが、あってますでしょうか?
その場合、ModalRoute.of(context).isCurrentで現在のRouteの変更知れるので、
hookを使っている場合、useValueChangedで値のisCurrentがfalseからtrueになった時に更新する処理を入れると良いかもと思いました!
コメントありがとうございます!
どの画面から戻っても更新したいので、おっしゃっていただいているやり方で試してみます!