Flutter implements the detailed explanation of the bottom selection pop-up window

Flutter realizes the detailed explanation of the bottom selection pop-up window (IOS self-test)

Use flutter's own components:
showModalBottomSheet()

Not much nonsense, just go to the sample code:

//出现底部弹窗
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),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  },
);

I also added a function of selecting photos and taking pictures.
If you want to know more about selecting photos and taking pictures, please check my other article
Flutter picture selection image_picker (official) plug-in detailed explanation

We will mainly talk about pop-ups this time:

Basic usage:

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

showModalBottomSheet() Common attributes
context: context
shape: the shape of the pop-up window (translated into shape)
build: (BuildContext context){}: build internal layout (return widget)

You can use the above code to achieve a simple pop-up effect.
Because his build needs to return a widget, you can customize the layout.

Effect picture:

Later, I will upload this demo to GitHub, you can bookmark this article first

This Demo contains a lot of small functions, which I created to make the project more efficient in the future,
so please pay more attention to it.

Finally, there is a very important point:

Scene:
What to do if you want to close the pop-up window when you click to select a photo or take a photo

Problem: After the
window is built, you will find that you can only click outside the window to close the window.
After reading the source code, it is not resolved.

Solution:
Finally I thought that Navigator
only needs one line of code to solve
Navigator.pop(context);
so it is a perfect solution. If you are interested, you can try it!

Follow me and grow together!
-As.Kai