Flutter 系统弹框

生成普通弹框

//其中build 定义返回widget ,所以可以自定义
showDialog(context: context, builder: builder)

生成底部弹框

showModalBottomSheet(context: context, builder: bottomBuilder)

关闭弹框

//关闭弹框
Navigator.pop(context);

//关闭弹框时携带返回值 , 协同 async 和 await 关键字,由 showDialog | showModalBottomSheet 返回
Navigator.pop(context, "点击了确定");

示例

class DialogAct extends StatefulWidget {
  @override
  _DialogActState createState() => _DialogActState();
}

class _DialogActState extends State<DialogAct> {
  get builder => (BuildContext context) {
        return AlertDialog(
          //定义标题 接收widget 可自定义
          title: Text("我是标题"),
          //定义内容 接收widget 可自定义
          content: Image.network(imgUrl3),
          //定义底部按钮 接收widget 可自定义
          actions: [
            TextButton(
                onPressed: () {
                  Navigator.pop(context, "点击了确定");
                },
                child: Text("确定")),
            TextButton(
                onPressed: () {
                  Navigator.pop(context, "点击了取消");
                },
                child: Text("取消")),
          ],
        );
      };

  get bottomBuilder => (BuildContext context) {
        return Container(
          child: Column(
            children: [
              ListTile(
                title: Text("标题"),
                subtitle: Text("内容1"),
                onTap: () {
                  Navigator.pop(context, "点击了内容1");
                },
              ),
              ListTile(
                title: Text("标题"),
                subtitle: Text("内容2"),
                onTap: () {
                  Navigator.pop(context, "点击了内容2");
                },
              ),
              ListTile(
                title: Text("标题"),
                subtitle: Text("内容3"),
                onTap: () {
                  Navigator.pop(context, "点击了内容3");
                },
              ),
            ],
          ),
        );
      };

  //弹出AlertDialog
  _alertDialog() async {
    var result = await showDialog(context: context, builder: builder);
    print("弹框的返回值: $result");
  }

  //弹出底部弹框
  _showBottomDialog() async {
    var result =
        await showModalBottomSheet(context: context, builder: bottomBuilder);
    print("弹框的返回值: $result");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text("弹框"),
      ),
      body: Center(
        child: Column(
          children: [
            ElevatedButton(
                onPressed: () {
                  _alertDialog();
                },
                child: Text("AlertDialog")),
            ElevatedButton(
                onPressed: () {
                  _showBottomDialog();
                },
                child: Text("bottomDialog")),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          //返回上一页
          Navigator.of(context).pop();
        },
        child: Text("返回"),
      ),
    );
  }
}