CODEWITHSUNDEEP
flutterdartflutter-alertdialog
user13410550
user13410550

Reputation:

How to make Alert Dialog working in flutter

I am using below code to register the user, there is an option to upload image , if it is null the user won't be registered, that is working accurately, only thing I am facing is that if the image is null it should the alert dialog to the user , but the alert dialog is not working at all. How should I implement the alert dialog?

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();
                              },
                            )
                          ],
                        );
                }

Upvotes: 0

Views: 8553

Answers (4)

Rohit Soni
Rohit Soni

Reputation: 1447

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();
                      },
                   )
                  ],
                );
               };
             );

Upvotes: 0

Mayur Agarwal
Mayur Agarwal

Reputation: 1814

You can also show a dialog box using scaffold, for example,

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

But you have to keep in mind that context should be of the current scaffold. So you might want to wrap the body property (in Scaffold) in a Builder Widget and then when you use context inside that builder widget, that context will be of current scaffold.

Upvotes: 0

CoderUni
CoderUni

Reputation: 6134

Peter Haddad's answer solves the problem but I would suggest placing the AlertDialog in a widget so that it would be easy to reuse the AlertDialog again. Here is how I did it for my project:

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;
  }

Here is how you can call it:

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);
   }
}

Upvotes: 0

Peter Haddad
Peter Haddad

Reputation: 80914

You need to use the function showDialog so the dialog appears:

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();
                      },
                   )
                  ],
                );
               };
             );
           }

Upvotes: 5

Related Questions