Zenn
🎄

Flutter3.16にしたら、レイアウトが崩れた

2023/12/25に公開
Flutter
Dart
Material-UI
tech

スマホアプリの画面下の表示するボトムナビゲーションメニューですが、Flutterのアップデートしたら急にレイアウトが変わったのでメモです。

ボトムナビゲーションメニューを実装するなら、BottomNavigationBarが多いかなと思いますが、デザインをあれこれしようとすると物足りなくなります。
凝ったデザインに実装するなら、BottomAppBarを使うことが多いかなと思います。

そのBottomAppBarを使っていたときのお話です。

起こったこと

Flutter3.13.9 で実装してたけど、3.16 がリリースされてるし、最新のバージョンにアップデートするかーとFlutterのバージョンを変更したら・・


Flutter3.13.9と3.16.0のレイアウト比較

え・・、急に余白が入ったんだが？？アップデートしたついでになんか変更したっけ？ってなりました。

ちなみに Material3 にしていた場合は、この現象は起きないので、その方はご安心を。

Metareal３ がデフォルトになりました

調べてみると、Flutter3.16.0 から Material3 がデフォルトで true になったらしく、BottomAppBar の padding の動作が変わったのが原因でした。

原因のbottom_app_bar.dartのコード

bottom_app_bar.dart
child: Padding(
  padding: widget.padding ?? babTheme.padding ?? (isMaterial3 ? const EdgeInsets.symmetric(vertical: 12.0, horizontal: 16.0) : EdgeInsets.zero),
  child: widget.child,
),

BottomAppBarに限らず、こういった処理が他にもありそうなので、影響度は高そうですね。。メジャーアップデート以外でこういうことをされると困るんですが（泣）

見積もり時に、マイナーバージョンアップ？あんまり変更ないと思うんで、そんなに工数かかんないっすよーと言って、いざ実装で青ざめるまでがセットです。

対応方法

対応方法1： useMaterial3 に false を設定する

 theme: ThemeData(
   colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
+  useMaterial3: false,
 ),

この現象が発生したということは、もとから Materia3 ではなかったはずなので、この対応で十分でしょう。

対応方法2： padding に EdgeInsets.zero を設定する

 bottomNavigationBar: BottomAppBar(
+  padding: EdgeInsets.zero

BottomAppBarに限っては、Material3 にすると、デフォルトの padding が設定されてしまうので、padding に zero を設定するのが有効です。自由にデザインしたい人が BottomAppBar を使ってると思うので、Material3 においてはこの設定が必要になるパターンは多いかもですね。

まとめ

Flutterが熟成してきたといっても、まだまだマイナーバージョンアップで痛い目をみる可能性があります。ちゃんとリリースノートを日々チェックしておけば把握できるかもしれませんが、なかなかできてないのが現状です。

Material3自体に賛否両論ありそうなので、また変わってくるかもですね。

Discussion