Flutter页面底部按钮遮挡TextField求助：键盘唤起时输入框被覆盖

你当前使用FloatingActionButton并设置centerFloat位置，系统键盘唤起时，该按钮会默认悬浮在键盘顶部区域，而你的TextField位于页面内容下方，滚动时会被这个悬浮按钮遮挡。另外，固定设置的scrollPadding: EdgeInsets.only(bottom: 300)无法适配不同设备的键盘高度，导致滚动后TextField仍可能被遮挡。

方案1：将按钮整合到页面内容中（推荐） #

把Next按钮从FloatingActionButton移到SingleChildScrollView内部的Column末尾，键盘弹出时整个页面会自动调整滚动，按钮会被推到键盘上方，TextField也能正常滚动到可视区域。

修改后的核心代码：

ContainerImpl containerWidget = ContainerImpl(
    SingleChildScrollView(
      padding: const EdgeInsets.only(top: 120, bottom: 100), // 增加底部内边距避免按钮贴键盘
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: const <Widget> [
          TextImpl("Créer ton profil"),
          SizedBox(height: 100),
          CircleAvatar(
            radius: 120,
            backgroundImage:NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg') ,
          ),
          TextField(
            autofocus: false,
            scrollPadding: EdgeInsets.only(bottom: 120), // 适配按钮高度的内边距
            cursorColor: Color.fromRGBO(233, 165, 208, 1),
            maxLength: 15,
            textAlign: TextAlign.center,
            style: TextStyle(
                color: Color.fromRGBO(233, 165, 208, 0.9),
                fontSize: 40
            ),
            decoration: InputDecoration(
                counterText: ""
            ),
          ),
          SizedBox(height: 20),
          // 移入Next按钮
          SizedBox(
            height: 80,
            width: 350,
            child: ElevatedButtonImpl(onPressed: () => {}, text: "Next")
          ),
        ],
      ),
    )
);

// 移除Scaffold中的floatingActionButton相关配置
return Scaffold(
  extendBodyBehindAppBar: true,
  backgroundColor: const Color.fromRGBO(6, 24, 46, 1),
  appBar: appBar,
  body: containerWidget,
);

方案2：保留FloatingActionButton并优化滚动内边距 #

如果必须保留悬浮按钮，可通过MediaQuery动态获取键盘高度，设置适配的scrollPadding，确保TextField滚动后不被遮挡：

修改TextField的scrollPadding属性：

TextField(
  autofocus: false,
  scrollPadding: EdgeInsets.only(
    bottom: MediaQuery.of(context).viewInsets.bottom + 100, // 键盘高度+按钮高度的额外内边距
  ),
  // 其他属性保持不变
),

同时确保Scaffold的resizeToAvoidBottomInset属性为true（默认值即为true，无需额外设置），保证页面自动适配键盘高度。

方案1更贴合创建账号页面的交互逻辑，Next按钮作为流程核心部分，属于页面内容而非独立悬浮操作；方案2适合确实需要悬浮按钮的场景，但动态计算内边距需确保在build方法中可正常访问MediaQuery上下文。

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