Flutter modal bottom sheet

Bottom sheets are used when we want to show user some options required to proceed. These are always at bottom of screen in android and ios both.

We have two types, in this we will see Modal Bottom Sheet.

Lets start coding…..

We will take a simple scaffold and floating action button. On click of floating action button we will show a modal bottom sheet.

Scaffold(
  body: Container(
    alignment: Alignment.center,
    child: Text("MODAL BOTTOM SHEET EXAMPLE"),
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () {
      showModalBottomSheet(
          context: context,
          builder: (context) {
            return Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                new ListTile(
                  leading: new Icon(Icons.photo),
                  title: new Text('Photo'),
                  onTap: () {
                    Navigator.pop(context);
                  },
                ),
                new ListTile(
                  leading: new Icon(Icons.music_note),
                  title: new Text('Music'),
                  onTap: () {
                    Navigator.pop(context);
                  },
                ),
                new ListTile(
                  leading: new Icon(Icons.videocam),
                  title: new Text('Video'),
                  onTap: () {
                    Navigator.pop(context);
                  },
                ),
              ],
            );
          });
    },
    child: Icon(Icons.open_with),
  ),
);

These are snapshots after running app.

That’s it. Let me know if it helps you. Thanks

Connect with me on: Github Twitter LinkedIn Instagram Youtube Patreon