Modal Bottom Sheet内TextField被键盘遮挡，如何让弹窗上移至键盘顶部？

以下是两种实用的解决方法：

方法一：原生组件适配（推荐） #

只需要给Modal Bottom Sheet设置两个关键属性，再结合滚动组件和动态padding就能搞定：

• 设置isScrollControlled: true，允许BottomSheet根据内容和键盘高度调整自身位置
• 用MediaQuery.of(context).viewInsets.bottom获取键盘高度，作为内容区的底部padding
• 用SingleChildScrollView包裹输入框区域，确保内容过多时可以滚动查看

示例代码：

showModalBottomSheet(
  context: context,
  isScrollControlled: true, // 核心：让BottomSheet支持自适应高度
  builder: (context) {
    return Padding(
      // 动态添加底部padding，避开键盘
      padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
      child: SingleChildScrollView(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            TextField(decoration: InputDecoration(hintText: "输入框1")),
            TextField(decoration: InputDecoration(hintText: "输入框2")),
            TextField(decoration: InputDecoration(hintText: "输入框3")),
            SizedBox(height: 20), // 底部留白，避免输入框贴边
          ],
        ),
      ),
    );
  },
);

方法二：监听键盘状态（进阶场景） #

如果需要更精细的控制，可以借助flutter_keyboard_visibility包监听键盘的显示/隐藏状态，手动调整BottomSheet的位置：

1. 先在pubspec.yaml中添加依赖：

dependencies:
  flutter_keyboard_visibility: ^6.0.0

2. 使用KeyboardVisibilityBuilder包裹BottomSheet内容：

showModalBottomSheet(
  context: context,
  isScrollControlled: true,
  builder: (context) {
    return KeyboardVisibilityBuilder(
      builder: (context, isKeyboardVisible) {
        return Padding(
          padding: EdgeInsets.only(
            bottom: isKeyboardVisible ? MediaQuery.of(context).viewInsets.bottom : 0,
          ),
          child: SingleChildScrollView(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                TextField(decoration: InputDecoration(hintText: "输入框1")),
                TextField(decoration: InputDecoration(hintText: "输入框2")),
              ],
            ),
          ),
        );
      },
    );
  },
);

这个方法适合需要根据键盘状态做额外逻辑的场景，比如调整其他组件的显示状态。

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