Modal Bottom Sheet in Flutter:The bottom sheet material is a very good component given by design. It is like a dialog that is open from the bottom. We use the sheet below when we have to show some options for the user to proceed. And here you can use any widget as per your requirement.

Types of bottom sheets in Flutter

There are basically three types of Flutter bottom sheets: standard, modal, and expanding.

1. Standard bottom sheets display supplemental content without restricting the user from interacting with the main part of the app while the sheet is visible. Standard bottom sheets are also known as persistent bottom sheets.
2. Modal bottom sheets show supplemental data while restricting users from interacting with other parts of the app. The user must dismiss the modal bottom sheet to continue interacting with the app’s main content.
3. Expanding bottom sheets are like a hybrid of standard and modal bottom sheets. An expanding bottom sheet enables the user to access both the standard sheet and information presented in the modal bottom sheet.

Properties of the Modal Bottom Sheet :

BuildContext: The build context for a particular widget can change the location over time. Because it helps the creation method to determine which widget it is going to pull and it also helps in determining the position of the widget to be pulled in the widget tree.

WidgetBuilder: The builder widget needs to pass a widget, but only has a function that returns the widget.

1. shape: Using shape properties, we can give a circular border and color of the border according to our own.
2. background: Using shape properties, we can give a circular border and color of the border according to our own.
3. elevation: The elevation property is to raise the shadow of the bottom sheet and it is an optional property.

Modal Bottom Sheet is an alternative to a menu or a dialog and prevents the user from interacting with the rest of the app. It will appear over the UI so that there is no need to navigate to a different page. Its to perform a small task that does not require the whole new screen to be build.

showModalBottomSheet(
    context: context,
    builder: (context) {
      return Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          ListTile(
            leading: new Icon(Icons.share),
            title: new Text('Share'),
            onTap: () {
              Navigator.pop(context);
            },
          ),
          ListTile(
            leading: new Icon(Icons.photo),
            title: new Text('Photo'),
            onTap: () {
              Navigator.pop(context);
            },
          ),
          ListTile(
            leading: new Icon(Icons.music_note),
            title: new Text('Music'),
            onTap: () {
              Navigator.pop(context);
            },
          ),
          ListTile(
            leading: new Icon(Icons.videocam),
            title: new Text('Video'),
            onTap: () {
              Navigator.pop(context);
            },
          ),
        ],
      );
    });

Full code:Modal Bottom Sheet in Flutter

import 'package:demoproject/Constant/color.dart';
import 'package:flutter/material.dart';

class ModalBottomSheet extends StatefulWidget {
  @override
  _ModalBottomSheetState createState() => _ModalBottomSheetState();
}

class _ModalBottomSheetState extends State<ModalBottomSheet> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Blue,
        title: Text(
          'Modal Bottom Sheet',
          style: TextStyle(color: Colors.white),
        ),
        centerTitle: true,
      ),
      body: Container(
        alignment: Alignment.center,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "MODAL BOTTOM SHEET",
              style: TextStyle(
                  // fontStyle: FontStyle.italic,
                  letterSpacing: 0.4,
                  fontWeight: FontWeight.w600),
            ),
            SizedBox(
              height: 20,
            ),
            MaterialButton(
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(Radius.circular(10.0))),
              onPressed: () {
                showModalBottomSheet(
                    context: context,
                    builder: (context) {
                      return Column(
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          ListTile(
                            leading: new Icon(Icons.photo),
                            title: new Text('Photo'),
                            onTap: () {
                              Navigator.pop(context);
                            },
                          ),
                          ListTile(
                            leading: new Icon(Icons.music_note),
                            title: new Text('Music'),
                            onTap: () {
                              Navigator.pop(context);
                            },
                          ),
                          ListTile(
                            leading: new Icon(Icons.videocam),
                            title: new Text('Video'),
                            onTap: () {
                              Navigator.pop(context);
                            },
                          ),
                          ListTile(
                            leading: new Icon(Icons.share),
                            title: new Text('Share'),
                            onTap: () {
                              Navigator.pop(context);
                            },
                          ),
                        ],
                      );
                    });
              },
              padding:
                  EdgeInsets.only(left: 30, right: 30, top: 15, bottom: 15),
              color: Blue,
              child: Text(
                'Click Me',
                style: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.w600,
                    letterSpacing: 0.6),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

For More : To know about Bottom Naviagtion Drawer Bar