[Flutter] go_router と hooks_riverpod と BottomNavigationBar を使って画面遷移を実装する

go_router と BottomNavigationBar を使ったアプリを作りたい。Android でも iOS でもネイティブで作るのであればスッと作れるのだが、Flutter を触るのが初めてなので簡単な画面遷移にも詰まっているレベルだ。

以前に画面遷移で詰まっていたときの記録は「flutter で go_router を使って画面遷移する」に書いている。

作りたいもの画面遷移のイメージ図

とりあえず、スプラッシュ -> ウォークスルー -> ログイン -> タブ1ルート -> タブ1詳細 までの画面遷移を作った。

• ログイン情報の維持 (2回目の起動は タブから始める)
• BottomNavigationBar を導入する
• 画面スタックの永続化

go_router と BottomNavigationBar との組み合わせはこの方法を使えば対応できそう。

• https://stackoverflow.com/a/70999220

わいはこっちの記事を参考にした。

• https://codewithandrea.com/articles/flutter-bottom-navigation-bar-nested-routes-gorouter-beamer/

GlobalKey<NavigatorState> を使うが何のために使うかよくわかっていなかったので参考になった。

final _parentKey = GlobalKey<NavigatorState>();
final _shellKey = GlobalKey<NavigatorState>();

• https://stackoverflow.com/a/75000274

flutter のBottomNavigationBarで検索すると永続化(タブ切り替え時の画面スタック保持)についての対応Tipsがたくさん出てくるが、go_router のみの対応ではなくて Navigation 1.0 を併用して実装しているのが実態である。

ネストしたタブバーに対応すべく StatefulShellRoute の実装が https://github.com/flutter/packages/pull/2650 で議論されており、もうすぐマージされそうな雰囲気である。永続化についてはまた今度考えることにしてもよさそう。

StatefulShellRouteがマージされるのを我慢できない場合には https://github.com/g-30/flutter_nested_navigation を導入してもよさそう。

いくつかライブラリをインストールしておく。riverpodはあってもなくても良い。

flutter pub add go_router
flutter pub add riverpod
flutter pub add shared_preferences