Search code examples
flutterflutter-layout

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


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?


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