🔗

TabBarとBottomBarの活性・非活性を同じ状態にしてみた

2023/04/29に公開

概要

Flutterのデフォルトで用意されているTabBar(上タブ)とBottomNavigationBar(下タブ)を使用し、
表示されているページによるTabBarとBottomNavigationBarの活性・非活性の状態を同じにしてみました
【完成イメージ】

※画像はTabBarのB→A、BottombarのB→A、B画面にスライド→A画面にスライドの順で動作しております。

前提条件

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

バージョン

・Flutter 3.7.10

実装

※全体のソース

StatefulWidgetのStateにSingleTickerProviderStateMixinを継承

状態はStatefulWidgetで管理しております。
TabControllerの動きに合わせて状態を変更する際、SingleTickerProviderStateMixinをStatefulWidgetのStateに継承しておくことでアニメーションに合わせて状態の変更が可能になります。

BottomNavigationBar(下タブ)のcurrentIndexを変数に

BottomNavigationBarのcurrentIndexを変数にすることで、この変数を変更することでBottomNavigationBarの選択を変更できるようになります

TabController(上タブのコントローラ)の初期値を宣言

　TabController(vsync: this, length: 2);

vsync: this はTabControllerを宣言する際のおまじないと考えてOKです。
length: 2 はタブの数に合わせて変更します

_tabController?.addListener(() {
　setState(() {
　　currentIndex = _tabController?.index ?? 0;
　});
});

addListenerはTabControllerに変更が入ると実行される関数です。
画面をスライドした際に上タブの状態は自動的に変更されますが、下タブの状態が変更されないため、currentIndexの値を変更されるようにします。

TabBar(上タブ)が押下された際の処理

下タブの状態を変更します

currentIndex = index;

上タブの状態をアニメーションを加えて変更します

_tabController?.animateTo(index);

BottomNavigationBar(下タブ)が押下された際の処理

「TabBar(上タブ)が押下された際の処理」と同じです

以上がTabBarとBottomNavigationBarの活性・非活性を同じ状態にする方法です

概要