Zenn
📚

FlutterのAppBarにてTitleを中央寄せにする方法

2024/08/26に公開
Android
Flutter
iOS
Dart
tech

背景

  • FlutterのAppBarについて、titleの表示位置についてデフォルトだとOS間差異が発生することのメモ

開発環境

  • PC:MacBook Pro Apple M2 Max
  • OS:macOS Sonoma 14.6.1
  • Flutter SDKバージョン:3.24.0
  • Dartバージョン:3.5.0

AppBarのOS間差異について

下記のようにAppBarのtitleプロパティにWidgetを設定するとAndroid・iOSでWidgetの表示位置が異なってしまう

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('アプリバー')
    )
  );
}
  • Android:左寄せ(図.1-1参照)

図.1-1 Android左寄せtitle

  • iOS:中央寄せ(図1-2参照)
    図.1-2 iOS中央寄せtitle

修正方法

上記のようなOS間差異を出さないためには下記のような方法で修正できる。
各修正案にてAndroid・iOSともにtitleプロパティで中央寄せで表示される。

  • 修正後のAndroid:中央寄せ(図.2-1参照)

図.2-1 修正後のAndroid中央寄せtitle

  • 修正後のiOS:中央寄せ(図.2-2参照)

図.2-2 iOS中央寄せtitle

修正案1

AppBarのプロパティにcenterTitle = trueを設定

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      centerTitle: true,
      title: const Text('アプリバー'),
    )
  );
}

修正案2

左寄せとなっているtitleプロパティに設定したWidgetをCenter Widgetでwrapする

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Center(
        child: Text('アプリバー')
      )
    )
  );
}

修正案3

左寄せとなっているtitleプロパティに設定したWidgetをAlign Widgetでwrapし、alignmentをAlignment.centerに設定

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Align(
        alignment: Alignment.center,
        child: Text('アプリバー')
      )
    )
  );
}

補足

  • 修正案2については、Center WidgetがAlign Widgetを継承し、常にalignmentプロパティがAlignment.centerと設定されているWidgetであるため同一の挙動となるのかもしれない

Discussion