Flutter键盘监听弹出收回解决顶起底部按钮且不遮挡输入框问题

解决输入框随软键盘高度自动调整且不顶起固定于底部的按钮问题

现象

输入框是随软件盘高度自动调整了，但是固定于底部的按钮却被顶起来

解决

使用WidgetsBinding添加WidgetsBindingObserver在didChangeMetrics监听页面变化，通过WidgetsBinding.instance.window.viewInsets.bottom获取根布局与屏幕底部的距离即软件盘弹起的高度

上代码

//1.实现WidgetsBindingObserver
class _PhoneLoginState extends State<PhoneLogin> with WidgetsBindingObserver {
  double _keyboardHeight = 0;

  @override
  void initState() {
    super.initState();
    //2.添加监听
    WidgetsBinding.instance.addObserver(this);
  }

  //3.覆盖监听方法
  @override
  void didChangeMetrics() {
    super.didChangeMetrics();
    //4.获取跟布局与底部的高度
    final double keyboardHeight = WidgetsBinding.instance.window.viewInsets.bottom;
    //5.更新高度
    setState(() {
      _keyboardHeight = keyboardHeight;
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        systemOverlayStyle: const SystemUiOverlayStyle(statusBarIconBrightness: Brightness.dark),
        backgroundColor: Colors.transparent,
      ),
      body: Stack(
        fit: StackFit.expand,
        children: [
      	  //隐藏无关代码
          ...
          //固定于底部的按钮
          Positioned(
          	  //6.底部按钮默认间距70，键盘高度越高底部监越小，达到软键盘不顶起底部按					钮目的
              bottom: 70 - _keyboardHeight,
              left: 0,
              right: 0,
              child: Stack(
                alignment: Alignment.center,
                children: [
                  Image.asset(
                    "assets/images/login/phone_login_next.png",
                    width: 90,
                    height: 90,
                  ),
                  ElevatedButton(
                      style: ElevatedButton.styleFrom(
                          shadowColor: Colors.transparent, padding: EdgeInsets.zero, backgroundColor: Colors.transparent),
                      onPressed: () {},
                      child: Container(
                        color: Colors.transparent,
                        width: 90,
                        height: 90,
                      ))
                ],
              ))
        ],
      ),
    );
  }
}

问题解决后效果