TabBarの左側に空白ができる問題について

TabBarの左側に大きめの空白ができるようになっていた。
少し前から発生していた記憶だが、何が原因かはわからずそのままにしていた。

他のアップデートのついでに直せるなら直そうと思い立ち、いろいろいじってみることに。
すると、TabBarの引数のうち、isScrollableをtrueにしていると、この問題が発生することを確認した。

ググってみると、以下のissueを発見。

スクロール可能なタブの場合、デフォルトだとtabAlignmentがTabAlignment.startOffsetになっているので、TabAligmnent.startに変更すれば直るとのこと。

以下のように、TabBarにtabAlignment: TabAlignment.start,を追加すると、タブ左側の空白がなくなった。

TabBar(
  isScrollable: true
+ tabAlignment: TabAlignment.start,
//
)

この問題についての公式のドキュメント↓

今回の学び

Flutterアプデしてなんかおかしくなった～ってときは、まず公式ドキュメントのBreaking changes and migration guidesを見るといいかもしれないと思いました。

このスクラップは2024/03/05にクローズされました