flutter 实现底部选择弹窗详解

flutter 实现底部选择弹窗详解（IOS自测）

使用flutter自带组件：
showModalBottomSheet()

废话不多说，直接上示例代码：

//出现底部弹窗
showModalBottomSheet(
  context: context,
  //自定义底部弹窗布局
  shape: new RoundedRectangleBorder(
    borderRadius: BorderRadius.only(
        topLeft: Radius.circular(20.0),
        topRight: Radius.circular(20.0)),
  ),
  builder: (BuildContext context) {
    //返回内部
    return new Container(
      height: ScreenUtil().setHeight(300),
      child: new Column(
        children: [
          new Container(
            margin: EdgeInsets.only(top: 10.0),
            child: new GestureDetector(
              onTap: () {
                Navigator.pop(context);
              },
              child: new Image.asset(
                'images/bottom_arrow .png',
                height: ScreenUtil().setHeight(30.0),
              ),
            ),
          ),
          new Container(
            decoration: BoxDecoration(
              border: Border(
                  bottom: BorderSide(
                      width: 1.0, color: Colors.black12)),
            ),
            height: ScreenUtil().setHeight(110.0),
            width: ScreenUtil().setWidth(750),
            child: new InkWell(
              onTap: () {
                print('点击了拍照');
                _getCameraImage();
                Navigator.pop(context);
              },
              child: new Center(
                child: new Text(
                  '拍照',
                  style: TextStyle(
                      fontSize: ScreenUtil().setSp(30.0),
                      fontWeight: FontWeight.bold),
                ),
              ),
            ),
          ),
          new Container(
            height: ScreenUtil().setHeight(110.0),
            width: ScreenUtil().setWidth(750),
            child: new InkWell(
              onTap: () {
                print('点击了选择照片');
                _getImage();
                Navigator.pop(context);
              },
              child: new Center(
                child: new Text(
                  '选择照片',
                  style: TextStyle(
                      fontSize: ScreenUtil().setSp(30.0),
                      fontWeight: FontWeight.bold),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  },
);

我这边还附带做了一个选择照片与拍照的功能
如果想了解关于选择照片与拍照，请移步查看我另一篇文章
Flutter图片选择 image_picker（官方）插件使用详解

咱们这次主要讲弹窗：

基础用法：

showModalBottomSheet(
    context:context,
    build:(BuildContext context){
        return Container(
            child:new Column(
                children:[
                    new Text('第一行'),
                    new Text('第二行'),    
                ]
            ),
        );
    }
);

showModalBottomSheet() 常用属性
context：上下文context
shape： 弹窗的外形 （翻译为形状）
build：（BuildContext context）{} ： 构建内部布局（返回widget）

大家可以使用上面代码可以实现一个简单的弹窗效果
因为他build需要返回一个widget 所以布局大家自己可以自定义

效果图：

之后这个Demo我会上传至GitHub中，大家可以先收藏这篇文章

这个Demo包含很多小功能 也是我为了以后项目效率更加便利创建的
所以还是请大家多多关注

最后有一个很重要的点：

场景：
点击选择照片或者拍照的同时想要关闭这个弹窗怎么处理

问题：
窗口构建出来后会发现只能点击窗口外 才会使窗口关闭
看了一遍源码后 也并没有解决

解决：
最后想到了Navigator
只需要一行代码就能解决
Navigator.pop(context);
于是完美解决，大家感兴趣的可以去试一试！

关注我，一起成长！
-As.Kai