🙄

StatefulShellRoute classとは？

2023/07/27に公開

Flutter

go_router

tech

🔍わからないので調べてみた

公式を翻訳

UIシェルを表示するルートで、そのサブルートには個別のナビゲータがあります。

ShellRouteと同様に、このルートクラスはルートNavigatorとは異なるNavigatorにサブルートを配置します。しかし、このルートクラスはネストされたブランチ（つまり並列ナビゲーションツリー）ごとに別々のナビゲータを作成する点が異なり、ステートフルなネストされたナビゲーションを持つアプリを構築することができます。これは、例えばBottomNavigationBarを持つUIを実装し、各タブの永続的なナビゲーション状態を持つ場合に便利です。

StatefulShellRouteは、StatefulShellBranchアイテムのリストを指定することで作成されます。StatefulShellBranchは、ルートルートとブランチのナビゲータキー（GlobalKey）、およびオプションの初期位置を提供します。

ShellRouteと同様に、StatefulShellRouteを作成する際にはビルダーかpageBuilderのどちらかを提供する必要があります。ただし、これらのビルダーは子ウィジェットの代わりに StatefulNavigationShell パラメータを受け付ける点が若干異なります。StatefulNavigationShell は、ルートの状態に関する情報にアクセスしたり、アクティブなブランチを切り替える（別のブランチのナビゲーションスタックを復元する）ために使用できます。後者は、例えばStatefulNavigationShell.goBranchメソッドを使用することで実現できます：

void _onItemTapped(int index) {
  navigationShell.goBranch(index: index);
}

StatefulNavigationShellは、ブランチナビゲータの状態を管理・維持する役割も担っています。通常、シェルはこのWidgetを中心に構築されます。例えば、BottomNavigationBarを持つScaffoldのボディとして使用します。

StatefulShellRouteを作成する際には、navigatorContainerBuilder関数を提供する必要があります。この関数は、ブランチ・ナビゲータを表すウィジェットの実際のコンテナを構築します。通常、この関数によって返されるウィジェットは、ブランチ・ナビゲータのレイアウト（オフステージの処理などを含む）と、アクティブなブランチを切り替えるときに必要なアニメーションを処理します。

ほとんどのユースケースに適したnavigatorContainerBuilderのデフォルト実装としては、コンストラクタStatefulShellRoute.indexedStackの使用を検討してください。

StatefulShellRoute（およびそれ以下のルート）では、同じナビゲーションスタック内のルート間のアニメーション遷移は他のルートクラスと同じように動作し、pageBuilderを使用してカスタマイズできます。ただし、StatefulShellRouteは並列ナビゲーションスタックのセットを保持するため、ブランチ間の切り替え時のトランジションはブランチナビゲータコンテナ（つまりnavigatorContainerBuilder）の責任となります。デフォルトのIndexedStack実装（StatefulShellRoute.indexedStack）では、アニメーション遷移は使用しませんが、これを実現する方法の例が提供されています（以下のStatefulShellRouteのカスタム例へのリンクを参照）。

学習の参考にしたサイト

アンドレアさんが、新機能を使ってボトムナビゲーションバーの使い方を紹介していました。

まとめ

自分用のメモに日本語翻訳したものが欲しかったので、記事を書きました。以前はボトムナビゲーションバーの永続化ができなかったようなので、工夫が必要だったようです。新機能だと状態を持たせることができるから、以前のデメリットをカバーできるということだろうなと思いました。

新機能を試してみた記事も書いてみました。

🔍わからないので調べてみた

学習の参考にしたサイト

まとめ

Discussion