Flutter 对话框

弹窗

class DialogWidget extends StatefulWidget {
  const DialogWidget({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<DialogWidget> createState() {
    return DialogState();
  }
}

class DialogState extends State<DialogWidget> {
  @override
  Widget build(BuildContext context) {
    bool checked = false; //默认不选中
    return Scaffold(
        appBar: AppBar(title: Text(widget.title)),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ElevatedButton(
                child: const Padding(
                  padding: EdgeInsets.all(10.0),
                  child: Text("确认弹窗"),
                ),
                onPressed: () {
                  confirmDialog(context);
                },
              ),
              ElevatedButton(
                child: const Padding(
                  padding: EdgeInsets.all(10.0),
                  child: Text("列表弹窗"),
                ),
                onPressed: () {
                  listDialog(context);
                },
              ),
              ElevatedButton(
                child: const Padding(
                  padding: EdgeInsets.all(10.0),
                  child: Text("带选择框弹窗"),
                ),
                onPressed: () {
                  checkDialog(context, checked);
                },
              ),
              ElevatedButton(
                child: const Padding(
                  padding: EdgeInsets.all(10.0),
                  child: Text("底部弹窗"),
                ),
                onPressed: () {
                  bottomDialog(context);
                },
              ),
              ElevatedButton(
                child: const Padding(
                  padding: EdgeInsets.all(10.0),
                  child: Text("Loading弹窗"),
                ),
                onPressed: () {
                  loadingDialog(context);
                },
              ),
              ElevatedButton(
                child: const Padding(
                  padding: EdgeInsets.all(10.0),
                  child: Text("日历选择弹窗"),
                ),
                onPressed: () {
                  calendarDialog(context);
                },
              ),
            ],
          ),
        ));
  }
}

确认弹窗

//确认弹窗
void confirmDialog(BuildContext context) {
  showDialog(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        title: const Text("提示"),
        content: const Text("确定要进行当前操作么？"),
        actions: <Widget>[
          TextButton(
            onPressed: () {
              Navigator.of(context).pop();
            },
            child: const Text("取消"),
          ),
          TextButton(
            child: const Text("确定"),
            onPressed: () {
              Navigator.of(context).pop(true);
            },
          ),
        ],
      );
    },
  );
}

列表弹窗

//列表弹窗
void listDialog(BuildContext context) {
  showDialog(
    context: context,
    builder: (BuildContext context) {
      return SimpleDialog(
        title: const Text("请选择"),
        children: <Widget>[
          SimpleDialogOption(
            child: const Padding(
                padding: EdgeInsets.symmetric(vertical: 5), child: Text("香蕉")),
            onPressed: () {
              Navigator.pop(context, 1);
            },
          ),
          SimpleDialogOption(
            child: const Padding(
                padding: EdgeInsets.symmetric(vertical: 5), child: Text("大鸭梨")),
            onPressed: () {
              Navigator.pop(context, 2);
            },
          ),
        ],
      );
    },
  );
}

带选择框弹窗

//带选择框弹窗
checkDialog(BuildContext context, bool checked) {
  showDialog(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        title: const Text("提示"),
        content: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            const Text("确定要进行当前操作么？"),
            Row(
              children: <Widget>[
                const Text("是否删除"),
                // Builder(
                //   builder: (BuildContext context) {
                //     return Checkbox(
                //       value: checked,
                //       onChanged: (bool? value) {
                //         (context as Element).markNeedsBuild();
                //         checked = !checked;
                //       },
                //     );
                //   },
                // )
                //或
                StatefulBuilder(builder: (context, setState) {
                  return Checkbox(
                      value: checked,
                      onChanged: (bool? value) {
                        setState(() {
                          checked = !checked;
                        });
                      });
                })
              ],
            )
          ],
        ),
        actions: <Widget>[
          TextButton(
            onPressed: () {
              Navigator.of(context).pop();
            },
            child: const Text("取消"),
          ),
          TextButton(
            child: const Text("确定"),
            onPressed: () {
              Navigator.of(context).pop(true);
            },
          ),
        ],
      );
    },
  );
}

底部弹窗

//底部弹窗
bottomDialog(BuildContext context) {
  showModalBottomSheet(
      context: context,
      builder: (BuildContext context) {
        return ListView.builder(
            itemCount: 20,
            itemBuilder: (BuildContext context, int index) {
              return ListTile(
                title: Text("${index + 1}"),
                onTap: () {
                  Navigator.of(context).pop(index);
                },
              );
            });
      });
}

加载弹窗

//加载弹窗
loadingDialog(BuildContext context) {
  showDialog(
      context: context,
      barrierDismissible: false, //点击遮罩不关闭对话框
      builder: (context) {
        return UnconstrainedBox(
          constrainedAxis: Axis.vertical,
          child: SizedBox(
            width: 260,
            child: AlertDialog(
              content: Column(
                mainAxisSize: MainAxisSize.min,
                children: const <Widget>[
                  CircularProgressIndicator(),
                  Padding(
                    padding: EdgeInsets.only(top: 25),
                    child: Text("加载中，请稍后..."),
                  ),
                ],
              ),
            ),
          ),
        );
      });
}

日历选择窗

//日历选择窗
calendarDialog(BuildContext context) {
  var date = DateTime.now();
  showDatePicker(
    context: context,
    initialDate: date,
    firstDate: date,
    lastDate: date.add(const Duration(days: 30)),
  );
}