Flutter App Bar居中文字因左侧返回箭头右偏如何重新居中

方案1：启用AppBar内置居中属性 #

这是成本最低的修复方式，直接给AppBar配置centerTitle属性为true即可，框架会自动忽略左侧返回按钮的宽度影响，将标题调整到AppBar的水平居中位置：

AppBar(
  // 开启标题强制居中
  centerTitle: true,
  title: Text("页面标题"),
  // 左侧返回按钮无需额外修改
  leading: IconButton(
    icon: Icon(Icons.arrow_back),
    onPressed: () => Navigator.pop(context),
  ),
  // 右侧actions按钮也不会影响居中效果
  actions: [
    IconButton(onPressed: (){}, icon: Icon(Icons.more_vert))
  ],
)

方案2：自定义Stack布局实现绝对居中 #

如果部分场景下内置属性不生效（比如自定义了leading的宽度、或者嵌套了自定义AppBar组件），可以用Stack将标题强制固定在AppBar的居中位置，完全不受左右元素的布局影响：

AppBar(
  title: Stack(
    alignment: Alignment.center,
    children: [
      Text("绝对居中的页面标题"),
    ],
  ),
  leading: IconButton(
    icon: Icon(Icons.arrow_back),
    onPressed: () => Navigator.pop(context),
  ),
)

补充说明 #

• 部分旧版本Flutter中MaterialApp全局主题默认centerTitle为false，单独给需要的页面AppBar设置该属性即可，无需修改全局配置
• 如果标题过长可能和左右按钮出现重叠，可以给Text组件套一层Padding，左右预留足够的安全间距即可

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