How to customize a dialog's position, size and background?

SimpleDialog and AlertDialog are meant to cater to a specific set of needs. They have certain levels of customization, but ultimately they are meant to just show simple pop-up dialogs that give the user some information and prompt for a dialog response (i.e. "Yes", "No", "Cancel", "Save", etc.).

If you want to have a more customizable pop-up dialog, you will need to create your own. On the plus side, though, it's really quite simple. Have the builder in showDialog return a Dialog widget with a child set to whatever you want:

showDialog(
  context: context,
  builder: (BuildContext cxt) {
    return Dialog(
      child: Container(
        ...
      ),
    );
  },
);

Obviously you are going to need to recreate things like the title bar and action bar, but you can either crack open the source code of SimpleDialog and AlertDialog and copy what they have there or you can roll your own solution.


No. These are not designed to be customizable. They were made to respect Material Design principles in mind.

If you want a custom design, you can make your own modal based of Align and/or DecoratedBox


It's not as scary as you might expect. You only need to clone Dialog.dart, and replace the Center widget with an Align.

Of course also rename stuff; e.g. MyDialog, myShowDialog, MySimpleDialog.

Yep, it's that easy.

And if you're on a roll, how about adding the Align widget's alignment parameter as an extra...