解决 Flutter showModalBottomSheet 被键盘遮挡

4 min read

在使用 showModalBottomSheet 底部弹出内容时，如果唤起了键盘、输入法，showModalBottomSheet 中的内容往往会被挡住，给 showModalBottomSheet 设置 isScrollControlled，再套一个 SingleChildScrollView 以及 设定一个 padding 一般就能解决问题了。

示例：

showModalBottomSheet(
  isScrollControlled: true,
  builder: (BuildContext context) {
    return SingleChildScrollView(
      child: Container(
        padding: EdgeInsets.only(
            bottom: MediaQuery.of(context).viewInsets.bottom),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            TextField(
              keyboardType: TextInputType.text,
              autofocus: true,
            ),
          ],
        ),
      ),
    );
  },
);