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

Question

Asked by danle on August 20, 2018 (source).

I have a home screen with a FAB and when it's pressed I want to display a dialog for user to input.

Currently I am using showDialog() with SimpleDialog.

showDialog(
  context: context,
  builder: (BuildContext context) {
    return SimpleDialog(
      title: NormalText('New Counter Item'),
      contentPadding: EdgeInsets.fromLTRB(24.0, 0.0, 24.0, 24.0),
      children: <Widget>[
        Container(
          ...
        )
      ],
    );
  }
);

But, I can't seem to customise almost anything with it (smaller, corner-curved and positioned lower on the screen). AlertDialog seems to be the same.

Is there anyway to customise those attributes?

Answer

Question answered by Rémi R (source).

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

FLUTTER FLUTTER-LAYOUT
SHARE: