AppBarの作成
まず、シンプルなAppBarを作成します。
コードは以下のとおりです。
appBar: AppBar(
title: Text(
"AppBar Sample",
),
),
次にその挙動を確認してみましょう。
機種は以下のとおりです。
iOS:iPhone12ProMax
Android:sdk gphone x86 arm
挙動(左:iOS 右:Android)
挙動の共通化
おわかり頂けましたか?
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というプロバティを指定する。
最後に
ここまでご覧頂きありがとうございます。(^^)
もし記事の内容に不備がございましたら、ご指摘いただけると幸いです!