How to make Alert Dialog working in flutter

Question

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

• abdul rehman: You can create a separate dart class for alert dialog and then use that in your entire app. You can check out this post arkapp.medium.com/…

Answer 1

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

Answer 2

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

Answer 3

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.

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