[Flutter]AppBarにタブバーを表示するには？

Flutter

2021.10.13

どうも、ちょげ(@chogetarou)です。

AppBarの代わりにTabBarを表示するには、どうしたら良いのでしょうか？

方法
全体のコード
おまけ

方法

          appBar: AppBar(
            flexibleSpace: Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                TabBar(
                  tabs: [
                    Icon(Icons.calendar_today),
                    Icon(Icons.note),
                    Icon(Icons.settings)
                ]),
              ],
            ),
          ),

AppBarの引数「flexibleSpace」を使います。

この引数に、ColumnウェジェットでラップしたTabBarを指定することで、AppBarの代わりにTabBarを表示することが出来ます。

flexibleSpaceは、AppBarの背景にウェジェットを配置する引数です。

Columnウェジェットを使うのは、重要なポイントとなります。

Columnを使い、引数「mainAxisAlignment」に「MainAxisAlignment.end」を指定することで、レイアウトを整えることが出来ます。

Column(
       mainAxisAlignment: MainAxisAlignment.end,
       children: [
                ・・・
      ],
),

これを指定しないとタブが上に寄り過ぎてしまいます。

全体のコード

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
          appBar: AppBar(
            flexibleSpace: TabBar(tabs: [
              Icon(Icons.calendar_today),
              Icon(Icons.note),
              Icon(Icons.settings)
            ]),
          ),
          body: TabBarView(children: [
            Icon(Icons.calendar_today),
            Icon(Icons.note),
            Icon(Icons.settings)
          ])),
    );
  }

おまけ

AppBarの型は、PreferredSizedになっています。

なので、「PreferredSizedを使っているTabBarも使えるんじゃないのか？」と思って試してみました。

          appBar: TabBar(
             tabs: [
              Icon(Icons.calendar_today),
              Icon(Icons.note),
              Icon(Icons.settings)
            ]),

結果は、エラーは出ません。

ですが、タブバーが表示されませんでした。

PreferredSizedで高さを変更してもダメでした。

なので、ここで紹介したように、AppBarを経由して、TabBarを表示するのが良いようです。