※完全に備忘録です。記事のクオリティには期待しないでください。笑
#Navigator.popで画面遷移した後に、SnackBarで完了を表示するには
これを作るときににはSnackBar
のコードはNavigator.push
のコード内に記述します。
「なんで前の画面に記述するの?」「Navigator.pop
の中じゃないの?」
って自分で思い、自分なりの理解をしたので備忘録として残しておきます。
なぜNavigator.push
の中に記載するのか
今回参考にさせて頂いたのはYouTubeチャンネル「Flutter大学」の中のコードです。
Navigator.pushが含まれているコード
return FloatingActionButton(
onPressed: () async {
final bool? added = await Navigator.push(
//画面遷移させる
context,
MaterialPageRoute(
builder: (context) => AddBookPage(),
//遷移先を指定
),
);
//▲ここで一旦処理が止まる
//▼Navigator.popで帰ってきた時に残りのコードが呼び出される
if(added != null && added){
final snackBar = SnackBar(
content: Text('本の入力を完了しました'),
backgroundColor: Colors.green,
);
ScaffoldMessenger.of(context).showSnackBar(snackBar);
}
model.fetchBookList();
},
tooltip: 'Increment',
child: Icon(Icons.add),
);
Navigator.pop(今回はNavigator.of(context).pop();のコード)
onPressed: () async {
try {
await model.addBook();
Navigator.of(context).pop(true);
} catch(e){
final snackBar = SnackBar(
content: Text(e.toString())
);
ScaffoldMessenger.of(context).showSnackBar(snackBar);
}
},
child: Text('追加する')
#なんでpushの中じゃないの?
※あくまで個人的な捉え方です。
Navigator.pushで画面遷移した時に、遷移する前のコードの処理はその場で1時的にストップします。なので、popで戻ってきた時に遷移前に処理した部分からまた処理が再開されるので、if(added != null, added)
のコードから再開されるというわけです。
popの中じゃダメなの?
1つの画面には1つのdartファイルが当てはめられているため、遷移前の画面のプログラムには書いても遷移後の画面に反映されないので、遷移後のDartファイルに記載することになります。
初投稿なので、文章の適当さ加減は勘弁してください。汗
これからもアウトプットとして書いていきたいと思います!!