Flutter使用Form与TextFormField时出现白屏问题求助

核心问题1：Flexible组件的错误使用 #

你最初的loginForm实现中，将Flexible作为Form的子组件，而Flexible只能用于Row、Column或Flex布局的直接子节点——它的作用是在弹性布局中分配剩余空间，放在非弹性布局组件（如Form）内部会直接导致布局约束冲突，进而引发白屏。

核心问题2：图片资源配置缺失（完整代码场景） #

你的完整代码里使用了Image.asset('assets/logo.png')，如果对应的图片文件不存在，或者pubspec.yaml中未正确声明assets路径，会导致图片加载失败，触发界面渲染异常，表现为白屏（部分场景下控制台可能无明显报错）。

解决方案 #

1. 修正Flexible的使用

如果需要保留弹性布局，应将Flexible移到Form外层，作为Row/Column的直接子组件：

Widget loginForm() {
  return Flexible( // Flexible作为Row的直接子组件
    child: Form(
      key: _loginFormKey,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          const SizedBox(height: 10),
          TextFormField(controller: _emailController, ...),
          const SizedBox(height: 10),
          TextFormField(controller: _passController, ...),
        ],
      ),
    ),
  );
}

// 使用时放在Row中
Row(
  children: [loginForm()],
)

或者直接移除Flexible（你的布局并不需要弹性分配空间）：

Widget loginForm() {
  return Form(
    key: _loginFormKey,
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        const SizedBox(height: 10),
        TextFormField(controller: _emailController, ...),
        const SizedBox(height: 10),
        TextFormField(controller: _passController, ...),
      ],
    ),
  );
}

2. 配置图片资源

在pubspec.yaml中添加assets声明：

flutter:
  uses-material-design: true
  assets:
    - assets/logo.png

确保assets文件夹下存在logo.png文件，路径与声明完全一致。

3. 优化布局约束

为登录容器添加明确的尺寸约束，避免因Stack层叠导致的渲染异常：

Padding(
  padding: const EdgeInsets.only(top: 175, left: 35, right: 35, bottom: 50),
  child: Container(
    height: MediaQuery.of(context).size.height - 175 - 50, // 明确高度
    decoration: BoxDecoration(
      color: Color(0xFFFCFBF4).withOpacity(0.5),
      borderRadius: BorderRadius.circular(20),
    ),
    child: SingleChildScrollView(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          SizedBox(height: 15),
          Text('Sign In', style: TextStyle(fontSize: 20, color: Color(0xFF6B6FAB))),
          loginForm()
        ],
      ),
    ),
  ),
)

验证步骤 #

1. 先移除loginForm，确认图片资源能正常显示；
2. 加入修正后的loginForm，测试布局是否正常；
3. 检查控制台日志，确认无布局错误或资源加载错误。

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