flutter解决方案：软键盘可见性问题_flutter mediaquery.of(context).viewinsets.bottom无效

flutter键盘是否可见这个问题可以说是老大难了，尝试过MediaQuery.of(context).viewInsets.bottom获取键盘高度，此方式要求Scaffold(resizeToAvoidBottomInset: false)，否则获取的高度永远是0，但是一旦resizeToAvoidBottomInset: false键盘弹出时页面布局就不能被键盘顶起，导致页面底部的输入框被遮盖，这是不能接受的。从网上找到了解决方案，并简单封装了一下。

• 代码

资料：Get keyboard height in Flutter

mixin KeyboardLogic<T extends StatefulWidget> on State<T>,WidgetsBindingObserver {
  bool _keyboardVisible;
  
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangeMetrics() {
    super.didChangeMetrics();
    if (!mounted) return;
    final temp = keyboardVisible;
    if (_keyboardVisible == temp) return;
    _keyboardVisible = temp;
    onKeyboardChanged(keyboardVisible);
  }

  void onKeyboardChanged(bool visible);


  bool get keyboardVisible =>
      EdgeInsets.fromWindowPadding(
        WidgetsBinding.instance.window.viewInsets,
        WidgetsBinding.instance.window.devicePixelRatio,
      ).bottom >
      100;
}
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

• 使用方法

class DemoView extends StatefulWidget {

  const DemoView()

  @override
  _DemoViewState createState() => _DemoViewState();
}

class _DemoViewState extends State<DemoView> with WidgetsBindingObserver, KeyboardLogic {

  @override
  void onKeyboardChanged(bool visible) {
      // TODO deal with keyboard visibility change.
  }

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17