Flutter中如何居中AppBar并保持背景与子组件同宽？

直接修改AppBar的title布局，通过Center组件包裹模糊背景容器，同时给内部内容添加内边距，即可实现居中且背景尺寸与子组件一致的效果：

return Scaffold(
  extendBodyBehindAppBar: true,
  backgroundColor: Colors.grey,
  appBar: AppBar(
    elevation: 0,
    backgroundColor: Colors.transparent,
    title: Center(
      child: ClipRRect(
        borderRadius: const BorderRadius.all(Radius.circular(FizzinConstants.radius)),
        child: BackdropFilter(
          filter: ImageFilter.blur(
            sigmaX: 15.0,
            sigmaY: 25.0,
          ),
          child: Padding(
            // 调整内边距控制背景的留白大小
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: [
                GestureDetector(
                  child: const Text("按钮1"),
                  onTap: () {},
                ),
                const SizedBox(width: 20), // 两个按钮间的间距
                GestureDetector(
                  child: const Text("按钮2"),
                  onTap: () {},
                ),
              ],
            ),
          ),
        ),
      ),
    ),
  ),
);

关键修改说明： #

• Center组件：让带模糊背景的容器在AppBar的title区域内居中，避免默认左对齐或撑满宽度的问题。
• Padding组件：给模糊背景添加合适的内边距，既让文字不贴边，也让背景尺寸刚好包裹住两个按钮的内容。
• mainAxisSize: MainAxisSize.min：确保Row仅占用子组件所需的宽度，不会强行扩展撑满屏幕。

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