15
7

More than 1 year has passed since last update.

Flutter - AppBarのTitleを左寄せ、中央寄せにする

Last updated at Posted at 2020-12-25

AppBarの作成

まず、シンプルなAppBarを作成します。
コードは以下のとおりです。

appBar: AppBar(
  title: Text(
    "AppBar Sample",
  ),
),

次にその挙動を確認してみましょう。
機種は以下のとおりです。
iOS:iPhone12ProMax
Android:sdk gphone x86 arm

挙動(左:iOS 右:Android)

reios.pngreandroid.png

挙動の共通化

おわかり頂けましたか?
iOSではタイトルが中央揃いになっていて、Androidではタイトルが左寄せになっています。
このように、位置を指定していない初期の状態では、挙動に違いが生まれます。
これらの挙動を共通化するためにはcenterTitleというプロパティを設定します。
コードは以下のとおりです。

左寄せ

appBar: AppBar(
  centerTitle: false,  // 中央寄せを解除
  title: Text("AppBar Sample"),
),

中央寄せ

appBar: AppBar(
  centerTitle: true,  // 中央寄せを設定
  title: Text("AppBar Sample"),
),

まとめ

位置を指定していないAppBarのTitleは、iOS-Android間で挙動に違いが生まれる。
共通化するためには、AppBarにcenterTitleというプロバティを指定する。

最後に

ここまでご覧頂きありがとうございます。(^^)
もし記事の内容に不備がございましたら、ご指摘いただけると幸いです!

15
7
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15
7