Flutter中BottomSheet内TextField被键盘遮挡的问题求助

核心解决方案 #

问题根源在于未正确处理键盘弹出时的底部空间预留，通过以下修改即可解决：

1. 保留isScrollControlled: true，确保BottomSheet可自适应高度
2. 用SingleChildScrollView包裹BottomSheet内容，支持滚动调整
3. 给SingleChildScrollView添加基于MediaQuery.viewInsets.bottom的底部内边距，动态匹配键盘高度

修改后的完整代码 #

showModalBottomSheet(
  context: context,
  isScrollControlled: true,
  builder: (BuildContext buildContext) {
    return SingleChildScrollView(
      // 关键：添加与键盘高度一致的底部内边距
      padding: EdgeInsets.only(
        bottom: MediaQuery.of(buildContext).viewInsets.bottom,
      ),
      child: Wrap(
        direction: Axis.vertical,
        crossAxisAlignment: WrapCrossAlignment.center,
        children: [
          //Email Input
          WidgetInputText(
            widgetShade: Theme.of(context).brightness != Brightness.dark
                ? Colors.purple
                : Colors.pink,
            inputHint: "Your Email",
            inputIcon: Icons.person,
          ),
          Container(
            padding: const EdgeInsets.only(top: 16, bottom: 16),
            width: MediaQuery.of(context).size.width * .8,
            child: Row(
              children: [
                RoundedButton(
                  btnText: "Raise Request",
                  btnColorShade: Theme.of(context).brightness != Brightness.dark
                      ? Colors.purple
                      : Colors.pink,
                ),
                const SizedBox(width: 16),
                RoundedButton(
                  clickAction: () {
                    print("CALLED");
                    Navigator.pop(context);
                  },
                  btnText: "Cancel",
                  btnColorShade: Theme.of(context).brightness != Brightness.dark
                      ? Colors.pink
                      : Colors.purple,
                ),
              ],
            ),
          ),
        ],
      ),
    );
  },
);

关键说明 #

• MediaQuery.of(buildContext).viewInsets.bottom会自动获取当前键盘高度，动态给BottomSheet底部添加对应内边距，避免输入框被遮挡
• SingleChildScrollView确保当BottomSheet内容较多时可滚动，配合内边距让输入框始终处于可见区域
• 移除页面级Scaffold的resizeToAvoidBottomInset: false设置，该属性会阻止页面布局调整，反而影响BottomSheet的自适应

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