如何设置具有先前背景的容器？

Answer 1

您可以将此示例用作您需要的起点：

class ConfirmationDialog extends StatelessWidget {
  late String title;
  late String content;
  late VoidCallback onValidate;
  late VoidCallback onCancel;

  TextStyle textStyle = TextStyle(color: Colors.black);

  ConfirmationDialog({
    Key? key,
    required this.title,
    required this.content,
    required this.onValidate,
    required this.onCancel,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BackdropFilter(
      filter: ImageFilter.blur(sigmaX: 6, sigmaY: 6),
      child: AlertDialog(
        title: Text(
          title,
          style: textStyle,
        ),
        content: Text(
          content,
          style: textStyle,
        ),
        actions: <Widget>[
          TextButton(
            child: Text("Continue"),
            onPressed: () {
              onValidate();
            },
          ),
          TextButton(
            child: Text("Cancel"),
            onPressed: () {
              onCancel();
              Navigator.of(context).pop();
            },
          ),
        ],
      ),
    );
  }
}

它是一个在当前页面顶部显示具有模糊效果的对话框的小部件。

你可以像这样使用它：

ConfirmationDialog dialog = ConfirmationDialog(
      title: "My dialog",
      content: "Your dialog content here",
      onValidate: () {
        setState(() {});
        Navigator.of(context).pop();
        // Do what you need on validate button pressed
      },
      onCancel: () {
        // Do what you nedd on cancel button pressed
      },
    );

    showDialog(
      context: context,
      builder: (BuildContext context) {
        return dialog;
      },
    );

Answer 2

您正在寻找名为的小部件显示对话框看看这个代码示例：

showDataAlert() {
  showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(
              Radius.circular(
                20.0,
              ),
            ),
          ),
          contentPadding: EdgeInsets.only(
            top: 10.0,
          ),
          title: Text(
            "Create ID",
            style: TextStyle(fontSize: 24.0),
          ),
          content: Container(
            height: 400,
            child: SingleChildScrollView(
              padding: const EdgeInsets.all(8.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text(
                      "Mension Your ID ",
                    ),
                  ),
                  Container(
                    padding: const EdgeInsets.all(8.0),
                    child: TextField(
                      decoration: InputDecoration(
                          border: OutlineInputBorder(),
                          hintText: 'Enter Id here',
                          labelText: 'ID'),
                    ),
                  ),
                  Container(
                    width: double.infinity,
                    height: 60,
                    padding: const EdgeInsets.all(8.0),
                    child: ElevatedButton(
                      onPressed: () {
                        Navigator.of(context).pop();
                      },
                      style: ElevatedButton.styleFrom(
                        primary: Colors.black,
                        // fixedSize: Size(250, 50),
                      ),
                      child: Text(
                        "Submit",
                      ),
                    ),
                  ),
                  Container(
                    padding: const EdgeInsets.all(8.0),
                    child: Text('Note'),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text(
                      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt'
                          ' ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud'
                          ' exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
                          ' Duis aute irure dolor in reprehenderit in voluptate velit esse cillum '
                          'dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,'
                          ' sunt in culpa qui officia deserunt mollit anim id est laborum.',
                      style: TextStyle(fontSize: 12),
                    ),
                  ),
                ],
              ),
            ),
          ),
        );
      });
}