📝

persistent_bottom_nav_bar_v2×TabBarで別BottomBarから別BottomBarのTabBarを操作する

2023/04/09に公開

Flutter

概要

persistent_bottom_nav_bar_v2で永続化したボトムナビゲーションに2つのスクリーンを用意し、1つのスクリーンに複数タブのページを用意します。

この構成で複数タブのページでないページから目的のタブに遷移する方法を紹介します

また、ボトムナビゲーションと選択されているタブの状態管理はriverpodで行います

前提条件

・Flutter(dart)の基本的な書き方が分かる
・riverpod、riverpod_generatorの基本的な書き方が分かる
・persistent_bottom_nav_bar_v2の基本的な書き方が分かる

バージョン

・Flutter 3.7.10

実装

PersistentTabControllerプロバイダを作成

ボトムナビゲーションバーの状態を管理するプロバイダです。
initialIndexを変えることで、最初にビルドされた際に選択されるボトムナビゲーションのタブが変わります。
※本記事でinitialIndexを1にするとDetailページが最初に表示されます

ボトムナビゲーションのUI構築

SelectTabBarプロバイダを作成

Detailスクリーンにおける、どのタブを選択しているかの状態を保持します。
riverpod_generatorを使用する場合、(keepAlive: true)を忘れないようにしてください。
(Detail2を選んでいたのに、HomePageに戻ると状態が破棄され、Detailスクリーンに戻ると、Detail1になってしまう)
changeTabForDetailNでそれぞれのDetailページに遷移する状態に変更されます

HomePageのUI構築

要点を解説します

bottomNavControllerProviderの状態をreadで取得

ボトムナビゲーションバーの状態は、今回の構成では監視する(watch)必要はありません。
readで取得し、PersistentTabControllerのjumpToTabを使用します。

Detail1・2・3のボタンを押下するとボトムナビゲーションのタブをDetailスクリーンが選択されるようにする

Detail1・2・3のボタンを押下するとDetailPageの各タブに合うをDetailNページが選択されるようにする

DetailPageのUI構築

TabControllerの作成

TabControllerクラスを使用したいので、
StatefulWidgetのStateにTickerProviderStateMixinを継承し、tabControllerを作成します

SelectTabBarプロバイダを監視

Detailスクリーンの選択されているタブを管理するSelectTabBarプロバイダを監視します。
また、変更されたらTabControllerのindex(どのタブが選択されているか)を変更します。

まとめ

以上が別スクリーンからタブを変化させる方法でした。

間違っている点や質問があれば、是非コメントいただきたいです！

概要