【Flutter】TabBarで左余白が出るようになってしまったときの解決方法

2024年1月6日 2024年1月19日

nowork_flutter_tabbar_padding

TabBarでleft paddingがデフォルトで入る場合の対処法

TabBarの左側だけpaddingが入る問題を解決する方法

ヒーラー

元々余白がなかったアプリで、Flutterのバージョンを上げたら発覚した問題なので、バージョンが関係していそう。

問題

FlutterアプリのTabBarで表示を切り替えられる画面において、タブ部分の左側だけ余白が入るようになってしまいました。

以下の画像のとおり、左は正常に表示されていたもので、右がタブの左側だけ余白が入るようになったものです。「おひつじ座」の左にスペースがあるのが分かると思います。

おひつじ座のタブの領域がおかしい訳でなく、その親のTabBarのmargin or paddingの問題という感じです。

ちなみに、TabBarの右端は問題ありませんでした。

違いが出た原因として考えられるのは、Flutterのバージョンを上げたことです。
以前はv3.13系でしたが、v3.16系に上げたことで発生しました。

解決方法

結論としては、Flutterのバージョンアップに伴って、TabBarの仕様が変わったためでした。

以下のFlutter3.16のリリースノートにもあるとおり、TabBarにおいて、TabBar.tabAlignmentプロパティを使用してタブの配置をカスタマイズできるようになったようです。

https://docs.flutter.dev/release/breaking-changes#released-in-flutter-316

https://docs.flutter.dev/release/breaking-changes/tab-alignment

したがって、TabBar.tabAlignmentを使って修正する必要があります。

元々のデザインのとおりタブを左に寄せたい場合は、
TabBarのtabAlignmentプロパティにTabAlignment.startを設定します。

          TabBar(
            tabAlignment: TabAlignment.start, //<--追加
            isScrollable: true,
            controller: _tabController,
            onTap: (int index) {
              //TODO: タブ切り替え時の処理
            },
            tabs: _buildTabs(tabsMap),
          ),

これで、元のデザインどおりに修正することができました。