Flutter中如何将AppBar标题文本及两侧箭头按钮居中？

要实现'Today'文本与左右箭头IconButton整体居中，且避免生硬的padding或不合适的Spacer，可以通过调整Row的布局属性来实现，这是Flutter布局的规范做法：

修改核心代码 #

将AppBar的title对应的Row组件，添加两个关键属性：mainAxisSize: MainAxisSize.min 和 mainAxisAlignment: MainAxisAlignment.center，修改后的代码如下：

return Scaffold(
  appBar: AppBar(
    title: Row(
      mainAxisSize: MainAxisSize.min, // 让Row仅占用包裹内容的最小宽度
      mainAxisAlignment: MainAxisAlignment.center, // 内部元素水平居中对齐
      children: [
        IconButton(
          icon: Icon(Icons.arrow_back),
          onPressed: () {
            // do something when the back arrow button is tapped
          },
          color: Colors.black,
        ),
        Text(
          'Today',
          style: TextStyle(
            color: Colors.black, // set the color of the title text
          ),
        ),
        IconButton(
          icon: Icon(Icons.arrow_forward),
          onPressed: () {
            // do something when the forward arrow button is tapped
          },
          color: Colors.black,
        ),
      ],
    ),
    backgroundColor: Theme.of(context).scaffoldBackgroundColor,
    centerTitle: true, // 保持title区域整体居中
    leading: IconButton(
      icon: Icon(
        Icons.menu,
        color: Colors.black,
      ),
      onPressed: () {},
    ),
    actions: [
      Padding(
        padding: EdgeInsets.only(
            right: 12.0), // set the horizontal padding to 16.0
        child: IconButton(
          icon: Icon(
            Icons.settings,
            color: Colors
                .black, // set the color of the search icon button to white
          ),
          onPressed: () {},
        ),
      ),
    ],
    elevation: 0,
  ),
);

方案说明 #

• mainAxisSize: MainAxisSize.min：让Row不再占据title区域的全部宽度，仅包裹内部的箭头和文本，确保整个组合可以被AppBar的centerTitle: true属性居中。
• mainAxisAlignment: MainAxisAlignment.center：让Row内部的三个元素（左箭头、文本、右箭头）在Row的宽度范围内水平居中，保证文本在两个箭头的中间位置。

这种方式既适配不同屏幕尺寸，又符合Flutter的布局规范，完全不需要硬编码padding或使用Spacer组件。

内容的提问来源于stack exchange，提问作者Matthew Segura