Flutter：登录表单弹出键盘时出现Bottom Overflow by 35 Pixels问题

我正在为学校开发一款笔记应用，在注册（Cadastro）表单中，当手机键盘弹出时，界面出现“Bottom Overflow by 35 Pixels”的溢出提示。已经尝试在Form和Expanded的Column中使用SingleChildScrollView，但问题仍存在或抛出异常；也尝试过设置resizeToAvoidBottomInset: false，效果基本相同。

方案一：用SingleChildScrollView包裹整个表单，调整布局结构 #

这种方法让整个表单可以滚动，适配键盘弹出后的屏幕高度，同时保持原有布局风格。

修改后的完整代码：

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('Cadastro'),
      centerTitle: true,
    ),
    body: SingleChildScrollView(
      padding: const EdgeInsets.symmetric(vertical: 24),
      child: Form(
        key: formKey,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 24),
              child: TextFormField(
                decoration: const InputDecoration(
                  border: OutlineInputBorder(),
                  labelText: "Primeiro nome",
                ),
                validator: (value) {
                  return value!.isEmpty ? "Informe seu primeiro nome!" : null;
                },
              ),
            ),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 24),
              child: TextFormField(
                decoration: const InputDecoration(
                  border: OutlineInputBorder(),
                  labelText: "Sobrenome",
                ),
                validator: (value) {
                  return value!.isEmpty ? "Informe seu sobrenome!" : null;
                },
              ),
            ),
            Padding(
              padding: EdgeInsets.all(24),
              child: TextFormField(
                decoration: const InputDecoration(
                  border: OutlineInputBorder(),
                  labelText: "E-mail",
                ),
                keyboardType: TextInputType.emailAddress,
                validator: (value) {
                  if (value!.isEmpty) {
                    return "Informe seu e-mail!";
                  } else if (!value.contains('@')) {
                    return "Insira um e-mail válido.";
                  }
                  return null; // 补充缺失的返回值，避免编译警告
                },
              ),
            ),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 24),
              child: TextFormField(
                obscureText: true,
                decoration: const InputDecoration(
                  border: OutlineInputBorder(),
                  labelText: "Senha",
                ),
                validator: (value) {
                  return value!.isEmpty ? "Informe sua senha!" : null;
                },
              ),
            ),
            const SizedBox(height: 48), // 用固定间距替代Expanded，避免ScrollView内报错
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                ElevatedButton(
                  onPressed: () {
                    formKey.currentState?.reset();
                  },
                  child: const Padding(
                    padding: EdgeInsets.all(16),
                    child: Text("Limpar"),
                  ),
                ),
                ElevatedButton(
                  onPressed: () {
                    if (formKey.currentState!.validate()) {
                      Navigator.pushAndRemoveUntil(
                        context,
                        MaterialPageRoute(builder: (context) => LoginPage()),
                        (Route<dynamic> route) => false,
                      );
                    }
                  },
                  child: const Padding(
                    padding: EdgeInsets.all(16),
                    child: Text("Cadastrar"),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    ),
  );
}

关键修改点：

• 将Form整体包裹在SingleChildScrollView中，确保键盘弹出时表单可滚动
• 移除原有的Expanded组件（ScrollView内无法使用Expanded，会因父容器高度无限报错），改用SizedBox为按钮区域设置固定间距
• 给Column设置mainAxisSize: MainAxisSize.min，让Column仅占用子组件所需高度，避免不必要的布局拉伸
• 修复邮箱输入框的validator方法，补充return null，消除编译警告

方案二：用Stack固定按钮在底部，表单区域可滚动 #

如果需要按钮始终固定在屏幕底部，不受滚动影响，可以采用Stack布局：

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('Cadastro'),
      centerTitle: true,
    ),
    body: Stack(
      children: [
        SingleChildScrollView(
          padding: const EdgeInsets.symmetric(vertical: 24, horizontal: 24),
          child: Form(
            key: formKey,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Padding(
                  padding: const EdgeInsets.symmetric(vertical: 12),
                  child: TextFormField(
                    decoration: const InputDecoration(
                      border: OutlineInputBorder(),
                      labelText: "Primeiro nome",
                    ),
                    validator: (value) {
                      return value!.isEmpty ? "Informe seu primeiro nome!" : null;
                    },
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.symmetric(vertical: 12),
                  child: TextFormField(
                    decoration: const InputDecoration(
                      border: OutlineInputBorder(),
                      labelText: "Sobrenome",
                    ),
                    validator: (value) {
                      return value!.isEmpty ? "Informe seu sobrenome!" : null;
                    },
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.symmetric(vertical: 12),
                  child: TextFormField(
                    decoration: const InputDecoration(
                      border: OutlineInputBorder(),
                      labelText: "E-mail",
                    ),
                    keyboardType: TextInputType.emailAddress,
                    validator: (value) {
                      if (value!.isEmpty) {
                        return "Informe seu e-mail!";
                      } else if (!value.contains('@')) {
                        return "Insira um e-mail válido.";
                      }
                      return null;
                    },
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.symmetric(vertical: 12),
                  child: TextFormField(
                    obscureText: true,
                    decoration: const InputDecoration(
                      border: OutlineInputBorder(),
                      labelText: "Senha",
                    ),
                    validator: (value) {
                      return value!.isEmpty ? "Informe sua senha!" : null;
                    },
                  ),
                ),
                const SizedBox(height: 120), // 避免输入框被底部按钮遮挡
              ],
            ),
          ),
        ),
        // 固定按钮在屏幕底部
        Positioned(
          left: 24,
          right: 24,
          bottom: 24,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              ElevatedButton(
                onPressed: () {
                  formKey.currentState?.reset();
                },
                child: const Padding(
                  padding: EdgeInsets.all(16),
                  child: Text("Limpar"),
                ),
              ),
              ElevatedButton(
                onPressed: () {
                  if (formKey.currentState!.validate()) {
                    Navigator.pushAndRemoveUntil(
                      context,
                      MaterialPageRoute(builder: (context) => LoginPage()),
                      (Route<dynamic> route) => false,
                    );
                  }
                },
                child: const Padding(
                  padding: EdgeInsets.all(16),
                  child: Text("Cadastrar"),
                ),
              ),
            ],
          ),
        ),
      ],
    ),
  );
}

关键修改点：

• 使用Stack将滚动的表单区域和固定按钮分层
• SingleChildScrollView承载输入框，确保键盘弹出时可滚动
• 用Positioned组件将按钮固定在屏幕底部，不随表单滚动
• 在表单最后添加足够大的SizedBox，防止输入框被底部按钮遮挡

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