Flutter bottomSheet 输入框 键盘遮挡解决：2种新思路_flutter bottomsheet 被键盘挡住

相信各位朋友做flutter开发的时候，在处理bottom sheet中输入框的时候，多少会有点不能满足需求。今天就来介绍三种思路，各有优劣，朋友们在工作中可以参考参考

网上普遍的解决方案：AnimatedPadding

这其实和 AnimatedPadding 并没有什么关系，其核心知识点还是利用了 MediaQuery.of(context).viewInsets.bottom 关于 viewInsets 这个属性，源码中的注释是这样说的

The parts of the display that are completely obscured by system UI, typically by the device’s keyboard. 意思就是被系统用户界面完全遮挡的部分，而这系统界面，一般也就是键盘。

因此，相信通过这，我们就明白了以下两点：

1. 我们可以通过 MediaQuery.of(context).viewInsets.bottom 来获取键盘的高度
2. 我们也可以通过它，来控制我们输入框显示的位置

使用 AnimatedPadding 的源码如下：

Future<T?> showSheet<T>(
  BuildContext context,
  Widget body, {
  bool scrollControlled = false,
}) {
  return showModalBottomSheet(
      context: context,
      elevation: 0,
      backgroundColor: Colors.transparent,
      barrierColor: Colors.black.withOpacity(0.25),
      isScrollControlled: scrollControlled,
      builder: (ctx) {
        return AnimatedPadding(
          padding: EdgeInsets.only(
            // 下面这一行是重点
            bottom: MediaQuery.of(context).viewInsets.bottom,
          ),
          duration: Duration.zero,
          child: Container(
            padding: const EdgeInsets.all(20),
            decoration: const BoxDecoration(
              borderRadius: BorderRadius.only(topLeft: Radius.circular(16), topRight: Radius.circular(16)),
              color: Colors.white,
            ),
            child: body,
          ),
        );
      });
}

// 弹窗内容
Widget _buildWidthColumn() {
  return Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      Container(
        height: 160,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(8),
          color: Colors.lightGreen,
        ),
      ),
      const TextField(),
      Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(8),
          color: Colors.teal,
        ),
        height: 160,
        margin: const EdgeInsets.only(top: 20),
      )
    ],
  );
} 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

显示弹窗：showSheet(con