Search code examples
flutterdialog

Flutter bottom aligned overlay

I am trying to build a layout, where, when a button is pressed an overlay animates from the bottom of the screen upwards. It should use max half of the screen and contains a list of Items (represented as text lines), the user can pick with a tab. I tried to use dialogs, but I can't seem to align the dialog in the bottom half oh the screen.

How would I approach this?

Basically:

enter image description here

When pressed on the Select button, an overlay is animated over the bottom half of the screen. When an option is selected, the overlay closes.

enter image description here

Solution

  • Try to use bottomsheet dialog:

    showModalBottomSheet(
      context: context,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(
          top: Radius.circular(20),
        ),
      ),
      clipBehavior: Clip.antiAliasWithSaveLayer,
      builder: (BuildContext context) {
        return Container(//your other widgets);
      },
    );