Flutter中用Center包裹后SignInButton消失问题求助

现象说明 #

给SignInButton外层添加Center组件后，按钮在界面上完全消失，但在Flutter Inspector的Widget树中仍能找到该组件。

相关截图 #

• Widget树截图：
  
• 添加Center前的效果：
  
• 添加Center后的效果：
  

复现代码 #

class SignInButton extends StatelessWidget {
  SignInButton({Key? key, required this.onPressed}) : super(key: key);

  final void Function() onPressed;

  @override
  Widget build(BuildContext context) {
    return ElevatedButton.icon(
        onPressed: onPressed,
        icon: Image(
          image: AssetImage("assets/images/google.png"),
          color: null,
          height: 20,
        ),
        style: ElevatedButton.styleFrom(
            primary: Colors.white, onPrimary: Colors.black),
        label: Text("Sign in with Google"));
  }
}


Scaffold(
  backgroundColor: Colors.indigo,
  body: Center(
    child: Wrap(
      alignment: WrapAlignment.center,
      direction: Axis.vertical,
      spacing: 5,
      children: [
        SizedBox(
          width: MediaQuery.of(context).size.width,
          child: Text(
            'Text',
            style: TextStyle(
              color: Colors.orange.shade400,
              fontSize: 26,
            ),
            textAlign: TextAlign.center,
          ),
        ),
        SizedBox(
          width: MediaQuery.of(context).size.width,
          child: Center(
            child: SignInButton(onPressed: () async {
              User? user =
                  await Authentication.signInWithGoogle(context: context);

              Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: ((context) => SignUpScreen())));
            }),
          ),
        ),
      ],
    ),
  ),
);

原因解析 #

问题出在垂直方向的Wrap组件与内部嵌套的SizedBox(width: 全屏)+Center的组合布局约束冲突：

1. 垂直方向的Wrap，其交叉轴（水平）的尺寸由子组件中最宽的固有宽度决定，这里第一个SizedBox设置了全屏宽度，因此Wrap的宽度被拉满屏幕；
2. 第二个SizedBox同样设置了全屏宽度，内部的Center组件会强制子组件（SignInButton）收缩到自身最小尺寸；
3. 叠加Wrap的布局约束后，SignInButton的尺寸被压缩至近乎0，导致肉眼不可见，但Widget树中组件依然存在。

解决方法 #

提供三种可行的修复方案：

方案1：移除多余的Center和全屏宽度SizedBox

外层Wrap已设置alignment: WrapAlignment.center，且整个Wrap被Center包裹，本身已具备居中效果，无需额外嵌套：

Scaffold(
  backgroundColor: Colors.indigo,
  body: Center(
    child: Wrap(
      alignment: WrapAlignment.center,
      direction: Axis.vertical,
      spacing: 5,
      children: [
        Text(
          'Text',
          style: TextStyle(
            color: Colors.orange.shade400,
            fontSize: 26,
          ),
        ),
        SignInButton(onPressed: () async {
          User? user = await Authentication.signInWithGoogle(context: context);
          Navigator.push(context, MaterialPageRoute(builder: ((context) => SignUpScreen())));
        }),
      ],
    ),
  ),
);

方案2：给SizedBox指定固定高度

通过给包裹Center的SizedBox设置高度，避免布局约束压缩按钮尺寸：

SizedBox(
  width: MediaQuery.of(context).size.width,
  height: 48, // 手动指定与按钮匹配的高度
  child: Center(
    child: SignInButton(onPressed: () async {
      // ... 原有逻辑
    }),
  ),
),

方案3：替换Wrap为Column组件

垂直布局场景下，Column的布局约束更直观，不会出现Wrap的异常压缩问题：

Scaffold(
  backgroundColor: Colors.indigo,
  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        SizedBox(
          width: MediaQuery.of(context).size.width,
          child: Text(
            'Text',
            style: TextStyle(
              color: Colors.orange.shade400,
              fontSize: 26,
            ),
            textAlign: TextAlign.center,
          ),
        ),
        SizedBox(height: 5), // 替换Wrap的spacing为SizedBox
        SizedBox(
          width: MediaQuery.of(context).size.width,
          child: Center(
            child: SignInButton(onPressed: () async {
              // ... 原有逻辑
            }),
          ),
        ),
      ],
    ),
  ),
);

内容的提问来源于stack exchange，提问作者Gajraj Singh Chouhan