close

how to make an alertdialog in flutter?

Flutter Alert Dialog to Custom Dialog

In the portable applications, we use Dialog wherever from making some circumstance aware of the client to get some input from the client.

We can utilize ready exchange to delay the client cooperation with the current screen and show some moderate activity to the client like show blunder, take client email to measure subsequent stage sort of stuff.

At the point when goes to the Dialog in Flutter there are various methods of execute like

1.Alert Dialog
2.Custom Dialog
3.Full-Screen Dialog

Flutter simple Alert Dialog

Adding straightforward Dialog to your screen in lovely simple in Flutter.

Prior to adding Dialog you should call showDialog capacity to change current screen state to show the transitional Dialog popup.

In here we use AlertDialog gadget to show basic Dialog with title and some content in the body.

showDialog(
    context: context,
    builder: (BuildContext context){
        return AlertDialog(
          title: Text("Alert Dialog"),
          content: Text("Dialog Content"),
        );
    }
  )

Under the substance, it doesn’t needed to add just the Text, you can add any gadget like Image or something. But since we utilize Alert Dialogs in basic use case it better to show straightforward content or a picture inside the substance.

Add buttons to Alert Dialogs

In the AlertDialog widget, there is a parameter called action. ​It accepts arrays of widgets and you can provide multiple buttons to that. Those Buttons will appear in the bottom right corner of the dialog.

actions:[
      FlatButton(
        child: Text("Close"),
      )
    ],

How to close Alert Dialogs

In here we need to close the current Dialog when click Close button.

We can use pop method in Navigator class for that.

FlatButton(
        child: Text("Close"),
        onPressed: (){
          Navigator.of(context).pop();
        },
      )

Flutter custom Alert Dialog

Straightforward Alert Dialog won’t be valuable for each necessity. On the off chance that you need to actualize further developed custom Dialog, you can utilize Dialog gadget for that. Rather than the AlertDialog , in here we return Dialog gadget. The showDialog technique will continue as before.

You can utilize a Container gadget to set pertinent stature for the Dialog.

Set the round corner to the Dialog by setting RoundedRectangleBorder for the shape and give range as you need.

showDialog(
    context: context,
    builder: (BuildContext context) {
      return Dialog(
        shape: RoundedRectangleBorder(
            borderRadius:
                BorderRadius.circular(20.0)), //this right here
        child: Container(
          height: 200,
          child: Padding(
            padding: const EdgeInsets.all(12.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                TextField(
                  decoration: InputDecoration(
                      border: InputBorder.none,
                      hintText: 'What do you want to remember?'),
                ),
                SizedBox(
                  width: 320.0,
                  child: RaisedButton(
                    onPressed: () {},
                    child: Text(
                      "Save",
                      style: TextStyle(color: Colors.white),
                    ),
                    color: const Color(0xFF1BC0C5),
                  ),
                )
              ],
            ),
          ),
        ),
      );
    });

Flutter Full Screen Dialog

By Using showDialog strategy we can’t show full-screen Dialog. In the event that we need to show exchange in full screen we should utilize showGeneralDialog technique gave by Flutter SDK.

There are some fascinating boundary accessible in showGeneralDialog technique.

barrierColor – Change dropshadow outside the exchange.

transitionDuration – Animation length

barrierDismissible – Dismiss exchange by clicking outside in current course

showGeneralDialog(
      context: context,
      barrierDismissible: true,
      barrierLabel: MaterialLocalizations.of(context)
          .modalBarrierDismissLabel,
      barrierColor: Colors.black45,
      transitionDuration: const Duration(milliseconds: 200),
      pageBuilder: (BuildContext buildContext,
          Animation animation,
          Animation secondaryAnimation) {
        return Center(
          child: Container(
            width: MediaQuery.of(context).size.width - 10,
            height: MediaQuery.of(context).size.height -  80,
            padding: EdgeInsets.all(20),
            color: Colors.white,
            child: Column(
              children: [
                RaisedButton(
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                  child: Text(
                    "Save",
                    style: TextStyle(color: Colors.white),
                  ),
                  color: const Color(0xFF1BC0C5),
                )
              ],
            ),
          ),
        );
      });

Summery

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you? Thank You.

Also Read

Leave a Comment