flutter - 如何使警报对话框在颤动中工作

Question

我正在使用下面的代码来注册用户，有一个上传图片的选项，如果它是 null 用户将不会被注册，那是正确的，我唯一面临的是，如果图片是null它应该发出警报对话框给用户，但警告对话框根本不起作用。我应该如何实现警报对话框？

if (avatarImageFile != null ) {
                  FirebaseAuth.instance
                      .createUserWithEmailAndPassword(
                      email: emailInputController.text,
                      password: pwdInputController.text)
                      .then((currentUser) =>

                      Firestore.instance
                          .collection("users")
                          .document(currentUser.user.uid)
                          .setData({
                        "username": userNameInputController.text,
                        "email": emailInputController.text,
                      })
                          .then((result) =>
                      {

                      uploadFile(currentUser.user.uid),

                      print(currentUser.user.getIdToken()),
                        currentUser.user.sendEmailVerification(),
                        Navigator.pushAndRemoveUntil(
                            context,
                            MaterialPageRoute(
                                builder: (context) =>
                                    MainScreen(
                                    )),
                                (_) => false),
                      })
                          .catchError((err) => print(err)))
                      .catchError((err) => print(err));

                }
                else {
                  print("Please Upload the Image");
                  AlertDialog(
                          title: Text("Image Required"),
                          content: Text("Please upload the image"),
                          actions: <Widget>[
                            FlatButton(
                              child: Text("Close"),
                              onPressed: () {
                                Navigator.of(context).pop();
                              },
                            )
                          ],
                        );
                }

Answer 1

您需要使用该功能showDialog，以便出现对话框：

else {
   print("Please Upload the Image");
     showDialog(
     context: context,
     builder: (BuildContext context) {
         return AlertDialog(
                 title: Text("Image Required"),
                 content: Text("Please upload the image"),
                  actions: <Widget>[
                   FlatButton(
                     child: Text("Close"),
                     onPressed: () {
                      Navigator.of(context).pop();
                      },
                   )
                  ],
                );
               };
             );
           }

Answer 2

Peter Haddad 的回答解决了这个问题，但我建议将 AlertDialog 放在一个小部件中，这样就可以很容易地再次重用 AlertDialog。这是我为我的项目所做的：

Dialogs.dart：

import 'package:flutter/material.dart';

enum alertDialogAction { cancel, save }

class Dialogs {
  static Future<alertDialogAction> alertDialog(
    BuildContext context,
    String title,
    String body,
    String cancel,
    String save,
  ) {
    Future<alertDialogAction> action = showDialog(
        context: context,
        barrierDismissible: true,
        builder: (BuildContext context) {
          return AlertDialog(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10),
            ),
            title: Text(title),
            content: Text(body),
            actions: <Widget>[
              FlatButton(
                  onPressed: () =>
                      Navigator.pop(context, alertDialogAction.cancel),
                  child: Text(cancel)),
              RaisedButton(
                  color: Colors.orange,
                  onPressed: () =>
                      Navigator.of(context).pop(alertDialogAction.save),
                  child: Text(
                    save,
                    style: TextStyle(color: Colors.white),
                  )),
            ],
          );
        });
    return (action != null) ? action : alertDialogAction.cancel;
  }

以下是你如何称呼它：

onPressed:() async {
   final action= await Dialogs.alertDialog(context,"Title","Body","Cancel","Save");
   //cancel and save are the button text for cancel and save operation
   if(action==alertDialogAction.save){
     //do something
     Navigator.pop(context);
   }
}

Answer 3

您还可以使用脚手架显示对话框，例如，

Scaffold.of(context).showSnackBar(SnackBar(content: AlertDialog(content: Text('Alert!!!'))));

但是你必须记住，上下文应该是当前脚手架的。因此，您可能希望将 body 属性（在 Scaffold 中）包装在 Builder 小部件中，然后当您在该构建器小部件中使用上下文时，该上下文将属于当前脚手架。

Answer 4

showDialog(
     context: context,
     builder: (BuildContext context) {
         return AlertDialog(
                 title: Text("Your Title!!!"),
                 content: Text("Your Content!!!"),
                  actions: <Widget>[
                   FlatButton(
                     child: Text("Close"),
                     onPressed: () {
                      Navigator.of(context).pop();
                      },
                   )
                  ],
                );
               };
             );