Flutter 点击按钮弹出底部弹框

点击弹出底部弹框如下:

先看效果图:

特点是页面不跳转

 

 点击弹出弹框，并且添加了一个返回按钮

按钮部分:

class MyApp1 extends StatefulWidget {
  const MyApp1({Key? key}) : super(key: key);

  @override
  _MyApp1State createState() => _MyApp1State();
}

class _MyApp1State extends State<MyApp1> {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Column(children: [
          SizedBox(
            height: 60,
          ),
          FlatButton(
            height: 50,//高
            color: Colors.blue.withOpacity(.2),//颜色
            onPressed: () {//点击事件
              int a = (_show(context)) as int;//调用底部弹框
            },
            child: Text("点击弹出底部弹框"),
          ),
        ]),
      ],
    );
  }
}

然后是弹框部分代码 

Future<int?> _show(context) async {
  //使用了一个异步
  var size = MediaQuery.of(context).size; //获取屏幕宽高和Widget大小
  return showModalBottomSheet(
    //showModalBottomSheet函数底部面板相当于一个新的页面
    backgroundColor: Colors.transparent,
    //颜色空白
    isDismissible: true,
    //能否点击消失
    isScrollControlled: true,
    //能否拖动消失
    context: context,
    //接受cotext
    builder: (context) {
      return Container(
        width: size.width,
        height: size.height * 0.7, //使用屏幕宽高比设置大小
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(
            //圆角
            topLeft: Radius.circular(30), //左上角的圆角
            topRight: Radius.circular(30), //右上角的圆角
          ),
        ),
        child: Column(
          children: [
            Row(
              //如果想要设置一个返回的按钮可以这样写
              children: [
                IconButton(
                  icon: Icon(Icons.chevron_left_outlined),
                  onPressed: () {
                    Navigator.pop(context);
                  },
                )
              ],
            )
          ],
        ),
      );
    },
  );
}