個人開発者が勉強がてらまとめているだけのサイトです

タブバー(上タブ) Tab Bar

画面上部にカテゴリ名が横に並び、押すか中身を左右にスワイプすると切り替わる。選択中の下線が付いてくる。

別名
上タブトップタブスワイプタブカテゴリタブTabBarTop Tabs
動き
横にスワイプ下線が動くタップで切り替え
作り方
標準ウィジェット Flutter に入っているものだけで作れます

本物の 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

似ているもの・一緒に見たいもの

触ってみる ↗
ナビゲーション オンボーディングOnboarding

初回起動時に、アプリの特徴を数枚の画面で横スワイプしながら紹介する。下のドットで今何枚目かが分かる。

横にスワイプ