自作AppBarの高さを自動調整する方法

はじめに

Flutterアプリを作成する際、AppBarを複数画面に表示させることが多いので、

以下のように、別ファイルに切り分けてコンポーネント化するのは一般的かと思います。

class MyAppBar extends StatelessWidget implements PreferredSizeWidget {
  const MyAppBar({super.key});

  @override
  Widget build(BuildContext context) {
    return  AppBar(
      title: Text('My AppBar'),
      backgroundColor: Theme.of(context).colorScheme.inversePrimary,
    );
  }

  @override
  Size get preferredSize => Size.fromHeight(kToolbarHeight);
}

しかし、最近では一つの問題に遭遇したので、その内容と対処法をメモします。

トラブル

例でいうと、TabBarをAppBarのbottom入れたら、文字が見切れてしちゃいます。

その原因としては、自作AppBarの高さを（kToolbarHeightとかの値）固定しているからですね。

高さ固定のAppBarにTabBarを追加すると、本来タイトルの部分がTabBarに取られて、スクショのような状態になってしまいました。

対処法は？

すでに気づいているかもしれませんが、TabBarの高さを両方も表示できるように調整すれば問題なく解決できます。

本家のソースコードも同様の方法で実装しています。

TabBar、もしくはbottom以外のWidgetを追加する場合も、同じ対処法で解決できるかと思います。

class MyAppBar extends StatelessWidget implements PreferredSizeWidget {
  const MyAppBar({super.key});

  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: Text('My AppBar'),
      bottom: _tabBar,
      backgroundColor: Theme.of(context).colorScheme.inversePrimary,
    );
  }

  TabBar get _tabBar => TabBar(
        tabs: [
          Tab(text: 'TabA'),
          Tab(text: 'TabB'),
        ],
      );

  @override
  Size get preferredSize => Size.fromHeight(
        // 修正後：元の高さ＋TabBarの高さ
        kToolbarHeight + _tabBar.preferredSize.height,
      );
}

キレイに表示していますね。良かったです。