タブバー(上タブ) Tab Bar
画面上部にカテゴリ名が横に並び、押すか中身を左右にスワイプすると切り替わる。選択中の下線が付いてくる。
本物の Flutter ウィジェットが動きます(初回は数秒かかります)
どんなもの?
ニュースアプリのカテゴリや、プロフィールの「投稿 / いいね」の切り替えでよく見る形です。
TabBar(見出し)と TabBarView(中身)を DefaultTabController で囲むと、両方が自動で連動します。
isScrollable: true にすると、タブが多いとき横にスクロールできます。
ボトムナビゲーションが「アプリの主な画面」の切り替えなのに対し、上タブは「同じ画面の中の分類」の切り替えです。
こんなときに
- 同じ種類の内容を、分類ごとに切り替えて見せたい(ニュースのジャンルなど)
- 横スワイプで隣の分類へ移りたい
避けたい場面
- アプリの主要な画面の切り替え(ボトムナビゲーションにする)
最小コード
DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
title: const Text('ニュース'),
bottom: const TabBar(
tabs: [Tab(text: 'おすすめ'), Tab(text: '国内'), Tab(text: 'スポーツ')],
),
),
body: const TabBarView(
children: [RecommendList(), DomesticList(), SportsList()],
),
),
)使うウィジェット
TabBarTabBarViewDefaultTabController