Flutter 模态框dialog方式弹出键盘不遮挡输入框

PS: 接触Flutter已经有一段时间了，默默的撸app也快接近尾声了，其中遇到了蛮多坑（或许也不叫做坑，只是功夫不够深^^），不过感觉都有惊无险的度过了。然鹅，小白的开拓之路注定是坎坷的，这不又遇到难题了。。。“在模态框里有输入框弹出键盘”，首先想的是用系统提供的showModalBottomSheet，然而，因为高度的限制，输入框注定被键盘挡住， 那肿么办呢。。。经过一系列尝试终于找到办法了，分享下解决方案:

• 国际惯例

input.gif

• 先创建一个带输入框的半透明的页面

import 'package:flutter/material.dart';

class BottomInputDialog extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      backgroundColor: Colors.transparent,
      body: new Column(
        children: [
          Expanded(
              child: new GestureDetector(
                child: new Container(
                  color: Colors.black54,
                ),
                onTap: () {
                  Navigator.pop(context);
                },
              )
          ),
          new Container(
              height: 50,
              color: Colors.white,
              child: TextField(
                autofocus: true,
                maxLines: 100,
              )
          )
        ],
      ),
    );
  }
}

• 关键：代码跳转上面半透明页面时选择自定义的Route, 代码如下：

import 'package:flutter/material.dart';

class PopRoute extends PopupRoute{
  final Duration _duration = Duration(milliseconds: 300);
  Widget child;

  PopRoute({@required this.child});

  @override
  Color get barrierColor => null;

  @override
  bool get barrierDismissible => true;

  @override
  String get barrierLabel => null;

  @override
  Widget buildPage(BuildContext context, Animation animation, Animation secondaryAnimation) {
    return child;
  }

  @override
  Duration get transitionDuration => _duration;

}

• 调用方式很简单，

Navigator.push(context, PopRoute(child: BottomInputDialog()));

本文仅展示一个简单示例，可根据实际情况封装，希望对读者有帮助。。。