先看效果

Untitled.gif

1.首先我们使用的是 showModalBottomSheet，来实现底部弹出输入框，但是发现输入框不能自动跟随键盘向上移动，然后直接换成了一个页面，通过修改路由加载方式在实现push的新页面在老的页面之上。

2.首先我们先写底部弹出输入框 ,这里我们对外暴露的一个方法onEditingCompleteText通过点击键盘上面的发送来回调输入框的内容，当然你也可以根据自己的需求来修改

class InputButtomWidget extends StatelessWidget {

 final ValueChanged onEditingCompleteText;
 final TextEditingController controller = TextEditingController();
  
  InputButtomWidget({this.onEditingCompleteText});

  @override

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      backgroundColor: Colors.transparent,
      body: new Column(
        children: <Widget>[
          Expanded(
              child: new GestureDetector(
                child: new Container(
                  color: Colors.transparent,
                ),
                onTap: () {
                  Navigator.pop(context);
                },
              )
          ),
          new Container(
              color: Color(0xFFF4F4F4),
              padding: EdgeInsets.only(left: 16,top: 8,bottom: 8,right: 16),
              child:  Container(
                decoration: BoxDecoration(
                    color: Colors.white
                ),

                child: TextField(
                  controller: controller,
                  autofocus: true,
                  style: TextStyle(
                      fontSize: 16
                  ),
                  //设置键盘按钮为发送
                  textInputAction: TextInputAction.send,
                  keyboardType: TextInputType.multiline,
                  onEditingComplete: (){
                    //点击发送调用
                    print('onEditingComplete');
                    onEditingCompleteText(controller.text);
                    Navigator.pop(context);

                  },
                  decoration: InputDecoration(
                    hintText: '请输入评论的内容',
                    isDense: true,
                    contentPadding: EdgeInsets.only(left: 10,top: 5,bottom: 5,right: 10),
                    border: const OutlineInputBorder(
                      gapPadding: 0,
                      borderSide: BorderSide(
                        width: 0,
                        style: BorderStyle.none,
                      ),
                    ),

                  ),

                  minLines: 1,
                  maxLines: 5,
                ),
              )
          )
        ],
      ),
    );
  }
}

3.路由过度动画，我们是复制别人写好的。

//过度路由
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<double> animation, Animation<double> secondaryAnimation) {
    return child;
  }

  @override
  Duration get transitionDuration => _duration;

}

4,调用

                    Navigator.push(context,
                        PopRoute(
                            child: InputButtomWidget(
                              onEditingCompleteText: (text){
                                  print('点击发送 ---$text');
                              },
                            )
                        )
                    );