如何根据图像在颤振中创建警报对话框？

Question

enter image description here void cruptoalert(){ 显示对话框( 上下文：上下文，构建器：（BuildContext 上下文）=>

       CupertinoAlertDialog(

           title: Text('Accept?'),
           content: Text('Do you accept?'),
           actions: [
             CupertinoDialogAction(child: Text("Yes"),onPressed:() {

               Navigator.pop(context);
               alert();
             }),
             CupertinoDialogAction(child: Text("No"))]),

barrierDismissible: false, ); }我已经创建了一个alert dialog call的功能，但是根据我的需要我不能设计，图片link在下面

Answer 1

您需要构建自定义对话框，如果我没记错的话，你期待的是：

class CustomView extends StatelessWidget {
  const CustomView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: ElevatedButton(
                onPressed: () {
                  showFancyCustomDialog(context);
                },
                child: const Text("Open"))));
  }
}

void showFancyCustomDialog(BuildContext context) {
  Dialog fancyDialog = Dialog(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(12.0),
    ),
    child: Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20.0),
      ),
      height: 200.0,
      width: 200.0,
      child: Stack(
        children: <Widget>[
          Container(
            alignment: Alignment.center,
            width: double.infinity,
            height: 200,
            decoration: BoxDecoration(
              color: Colors.grey[100],
              borderRadius: BorderRadius.circular(12.0),
            ),
            child: Text(
              "Do you want to discard your\nFeedback",
              textAlign: TextAlign.center,
              style: TextStyle(
                  color: Colors.blue,
                  fontSize: 18,
                  fontWeight: FontWeight.w600),
            ),
          ),
          Container(
            width: double.infinity,
            height: 50,
            alignment: Alignment.bottomCenter,
            decoration: BoxDecoration(
              color: Colors.white,
              border: Border(
                bottom: BorderSide(width: 2.0, color: Colors.black26),
              ),
            ),
            child: Align(
              alignment: Alignment.center,
              child: Text(
                "Confirmation",
                style: TextStyle(
                    color: Colors.blue.shade900,
                    fontSize: 20,
                    fontWeight: FontWeight.w600),
              ),
            ),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: Container(
                width: double.infinity,
                height: 50,
                decoration: BoxDecoration(
                  color: Colors.white,
                  border: Border(
                    top: BorderSide(width: 2.0, color: Colors.black26),
                  ),
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Expanded(
                      child: InkWell(
                        onTap: () {
                          Navigator.of(context).pop();
                        },
                        child: Container(
                          alignment: Alignment.center,
                          child: Text(
                            "No",
                            style: TextStyle(
                                color: Colors.blue,
                                fontSize: 20,
                                fontWeight: FontWeight.w600),
                          ),
                        ),
                      ),
                    ),
                    VerticalDivider(
                      thickness: 1,
                      color: Colors.grey[300],
                    ),
                    Expanded(
                      child: InkWell(
                        onTap: () {
                           Navigator.of(context).pop();
                        },
                        child: Container(
                          alignment: Alignment.center,
                          child: Text(
                            "Yes",
                            style: TextStyle(
                                color: Colors.blue,
                                fontSize: 20,
                                fontWeight: FontWeight.w600),
                          ),
                        ),
                      ),
                    ),
                  ],
                )),
          ),
        ],
      ),
    ),
  );
  showDialog(context: context, builder: (BuildContext context) => fancyDialog);
}

Answer 2

您可以简单地使用 flutter_dialogs

安装在 pubspec.yaml:

flutter_dialogs: ^2.1.1

用法：

showPlatformDialog(
  context: context,
  builder: (context) => BasicDialogAlert(
    title: Text("Are you sure?"),
    content: Text("This Action will permanently remove the announcement"),
    actions: <Widget>[
      BasicDialogAction(
        title: Text("Cancel"),
        onPressed: () {
          Navigator.pop(context);
        },
      ),
      BasicDialogAction(
        title: Text("ok"),
        onPressed: () {
         //what to do after clicking ok
        },
      ),
    ],
  ),
);

如何根据图像在颤振中创建警报对话框？

how to create a alert dialog in flutter as per image?

alert

dialog

flutter