如何解决Flutter中showBottomModalSheet被键盘遮挡的问题

核心解决方法 #

给showModalBottomSheet添加isScrollControlled: true参数，该参数会让底部弹窗自适应键盘高度，从根本上避免遮挡问题。同时建议用SingleChildScrollView包裹弹窗内容，并配合MediaQuery获取键盘高度设置内边距，确保内容不会被键盘挤压或溢出。

修改后的代码示例 #

ElevatedButton(
  onPressed: () {
    showModalBottomSheet(
      context: context,
      isScrollControlled: true, // 开启自适应键盘高度
      builder: (context) => SingleChildScrollView(
        padding: EdgeInsets.only(
          bottom: MediaQuery.of(context).viewInsets.bottom, // 适配键盘高度
        ),
        child: withdrawSheet(),
      ),
    );
  },
  child: const Text('Withdraw')
)

补充说明 #

• 如果withdrawSheet内部已经包含滚动组件（如ListView、GridView），可以省略外层的SingleChildScrollView，但isScrollControlled: true参数必须保留。
• 若iOS端仍存在异常，检查页面的Scaffold是否设置了resizeToAvoidBottomInset: true（默认值为true），该属性会让页面主体内容自动避开键盘，与弹窗的设置形成互补。

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