Flutter中被Row包裹的AppBar title无法居中，该如何调整对齐？

问题原因 #

这是Flutter AppBar的默认布局规则导致的：AppBar的title区域宽度默认会自动扣除左侧leading（即使你没有显式设置leading，系统也会预留默认的16px起始边距/返回按钮占位宽度）和右侧actions的占用宽度，你在Row内部设置的居中只是在「扣除左右预留空间后的剩余区域」里居中，自然无法在整个AppBar宽度上对齐。

解决方案 #

方案1：调整布局参数（推荐，无侵入）

给AppBar新增titleSpacing: 0配置取消title左右的默认边距，同时给Row新增mainAxisSize: MainAxisSize.min让Row只包裹内容本身的宽度，配合你已经设置的centerTitle: true即可实现全AppBar居中：

appBar: AppBar(
  // 新增：取消title区域的默认左右边距
  titleSpacing: 0,
  centerTitle: true,
  title: Row(
    // 新增：让Row只包裹内容宽度，不占满父容器分配的剩余区域
    mainAxisSize: MainAxisSize.min,
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Lottie.asset(
        'assets/lottie/coin.json',
        width: 50,
      ),
      const Text('1000'),
    ],
  ),
  actions: <Widget>[
    Padding(
        padding: const EdgeInsets.only(right: 20.0),
        child: GestureDetector(
          onTap: () {
            // _showConfirmationDialog(pageContext);
          },
          child: const Icon(
            Icons.chat_bubble_outline,
            size: 26.0,
          ),
        )),
  ],
)

方案2：绝对居中（适用于右侧actions宽度较大的场景）

如果方案1仍有偏移，可以通过flexibleSpace实现完全不受leading和actions影响的绝对居中：

appBar: AppBar(
  centerTitle: true,
  // 原有title位置留空
  title: const SizedBox.shrink(),
  // 通过flexibleSpace在整个AppBar区域居中放置内容
  flexibleSpace: Center(
    child: Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Lottie.asset(
          'assets/lottie/coin.json',
          width: 50,
        ),
        const Text('1000'),
      ],
    ),
  ),
  actions: <Widget>[
    Padding(
        padding: const EdgeInsets.only(right: 20.0),
        child: GestureDetector(
          onTap: () {
            // _showConfirmationDialog(pageContext);
          },
          child: const Icon(
            Icons.chat_bubble_outline,
            size: 26.0,
          ),
        )),
  ],
)

如果页面存在默认返回按钮（即有leading元素），给中间的Row添加左侧padding即可避免和返回按钮重叠，默认leading宽度为56px。

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