Set Center-aligned TopAppBar on Root screen

[Anishishi]

Overview

Android端末でAppBarのタイトルが中央によるようにしました。全てのScaffoldのtitleをcenteringしました。 Figma をみました。

CheckList

• Android pixel 5aでタイトルがcenteringされることを確認しました。

  

• iOS

  

• Web

  

[github-actions[bot]]

PR: 134 preview link

[koji-1009]

@Anishishi PRありがとうございます！ こちら、figmaを利用した際には意図していなかったのですが、M3のドキュメントを読むとcenterにするのが良さそうです。

https://m3.material.io/components/top-app-bar/guidelines

ただ、現実装だと4パターンの全てに影響が出そうな気がしています🤔 下記flutterのplatform-adaptationsの件もあるので、少々方針確認とflutterの実装方針チェックのお時間をいただけないでしょうか🙏

https://docs.flutter.dev/platform-integration/platform-adaptations#top-app-bar-and-navigation-bar

[Anishishi]

なるほどです！実装方針確認ありがとうございます！ M3きちんと考慮できていなかったですが、ドキュメント見ると左寄せも中央寄せもどちらも良いような気がしました。Androidの他のアプリを見るとどちらのパターンもありそうです。（AppBar.actionsが複数あるとleftAlignしている気もします。）

FlutterKaigi2023はAppBar.leadingのみにアイコンがあり左によっているのでtitleは中央寄せするとバランス良さそうな気がしました！

[koji-1009]

@Anishishi M3のドキュメントを確認したところ、TopAppBarには以下の4パターンがありました。 https://m3.material.io/components/top-app-bar/overview

• Center-aligned
• Small
• Medium
• Large

このうち、今回スクリーンショットを取っていただいている画面ではCenter-alignedを採用するのが良さそうです。 (PRが修正している箇所は、M3の指定から外れていました……。修正いただきありがとうございます！)

https://m3.material.io/components/top-app-bar/guidelines#d24fc7db-88e9-4f47-9305-df623aed8eb4

For the main root page in an app. Used to display the app name or page headline.

---

ただ、appBarThemeを変更すると他のパターン(今回はSmall)にも影響が出てしまうように見えます。

conference-app内ではAbout us画面や、今後実装予定の各セッション詳細画面に影響がありそうです。 これらの画面は、Platformが左寄せとなる環境では、真ん中揃えではない方が良いのかなと。 (iOSでは、Flutterのadaptationに合わせて、真ん中揃えのままで良さそうです)

コード的には、下記の箇所でM3へのmigartionが行われていました。Platformごとの分岐も、こちらでなされているようです。 https://github.com/flutter/flutter/pull/103962/files#diff-20c19d254b0a82027625f1246ba51cb2264bfabf105fe91d532c19e6a6d77478R2225

---

以上より、Theme.appBarThemeではなく、root画面のAppBarに直接centerTitleを指定した方が良さそうに思っております。 こちら、いかがでしょうか……？

[Anishishi]

@koji-1009 ありがとうございます。よくわかりました！

Platformごとの分岐も、こちらでなされているようです。

ここでされているのですね（知らなかったです）

Root画面（top page）だけ中央揃えにして、about us等の詳細画面はそのままのalignmentになるようにしました。