[Flutter]AppBarのタイトルを中央に寄せる２つの方法

Flutter

2021.10.12

どうも、ちょげ(@chogetarou)です。

AppBarのタイトルを中央に寄せる２つの方法を紹介します。

方法
1. centerTitle
2. Row

方法

centerTitle

1つは、AppBarの引数「centerTitle」を使う方法です。

      appBar: AppBar(
        centerTitle: true,
      ),

centerTitleに「true」を指定すると中央に寄せられます。

Row

もう１つは、Rowウェジェットを使う方法です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.min,
            children: [Text("Title")]),
      ),
      body: Center(),
    );
  }

AppBarの引数「title」にRowを使い、mainAxisAlignmentに「MainAxisAlignment.center」を指定します。

そして、mainAxisSizeに「MainAxisSize.min」を指定すれば、ど真ん中に配置されます。