🐕
【Flutter】TabBarとTabBarViewの画面切り替えを無効化する方法
TabBar
とTabBarView
の画面切り替えを無効にする方法の備忘録。
TabBarViewのスワイプの無効化
TabBarView
のphysics
プロパティにNeverScrollableScrollPhysics()
をセットする。
TabBarView(
physics: NeverScrollableScrollPhysics(), // ←これを追加する。
controller: controller,
children: [
Center(child: Text('Tab 1 Content')),
Center(child: Text('Tab 2 Content')),
Center(child: Text('Tab 3 Content')),
],
),
TabBarのタップの無効化
主に方法は2つ。
IgnorePointerを使う方法
TabBar
をIgnorePointer
で囲う。
※AppBar
のbottom
プロパティにTabBar
をセットしている場合は、この方法は使えない。
IgnorePointer(
ignoring: true,
child: TabBar(
controller: controller,
tabs: [
Tab(text: 'Tab 1'),
Tab(text: 'Tab 2'),
Tab(text: 'Tab 3'),
],
),
),
TabController.indexに固定したいTabのindexをセットする方法
※AppBar
のbottom
にTabBar
を実装する場合はこちらを使う。
Tab
のタップ時に実行されるonTap
内で、TabController.index
にTabController.previousIndex
(前回表示したタブのindex)を指定する。
TabBar(
tabs: [
controller: controller,
Tab(text: 'Tab 1'),
Tab(text: 'Tab 2'),
Tab(text: 'Tab 3'),
],
onTap: (index) {
if (controller.indexIsChanging) {
controller.index = controller.previousIndex; // 前回表示したタブのindexを代入。
} else {
return;
}
},
),
この記事を書き始めた時点では、以下のように操作すると画面切り替えができてしまっていた↓
- Tab 2をタップ → 切り替わらない
- Tab 1をタップ → Tab2に切り替わる
TabController.previousIndex
が「前回表示したタブ」ではなく 「前回タップしたタブ」 のindexだったため、↑のようなバグが生じた。
そのバグと解決方法をメインに記事を書く予定だったが、サンプルコードでは問題なくTabBar
のタップを無効化できたため、要調査。
ちなみに↑のような問題が生じる場合は、TabController.previousIndex
の代わりに、固定したいTab
のindexの数値を直接入れる。
状態によって固定するタブを変更したい場合は、Tab
のindexを状態管理オブジェクトに持たせて、それをTabController.index
に代入する。
Discussion