How to create a modal bottomsheet in Flutter?

flutter bottomsheet. Hello Guys How Are You All ? Hope You All Are Fine. In this tutorial we will learn How to Impliment Bottom Sheet in Flutter.

Bottom sheet is usually used to show from bottom by pressing button. For Ex. Share Button gives all Social Platform From Bottom. Just like That.

To Make Flutter BottomSheet Follow this Steps.

First Of all Target Button. On which button on press you need bottom sheet ? For Exmple here I have RaisedButton in center of the screen. I want to open bottomsheet on press of this RaisedButton. flutter bottomsheet.

body: Container (
  child: Centre(
    child: RaisedButton(
      onPressed: () {
        // I need bottom sheet here
      },
      child: Text("Show BottomSheet"),
    ),
  ),

Now make new void method to create bottomsheet just same like below

void _settingModalBottomSheet(context) {
  showModalBottomSheet(
    context: context,
    builder: (BuildContext bc) { //Not That BC that You Think 😊
       // Style of your bottom sheet
    },
  );
}

Now just Define this method in Onpress of your button (as we created in our first step).

body: Container(
  child: Center(
    child: RaisedButton(
      onPressed: () {
        _settingModalBottomSheet(context);
      },
      child: Text("Show BottomSheet"),
    ),
  ),
),

Boom Now You Can press your targed button and bottom sheet will open
Just For Reference I am pasting my code here. flutter bottomsheet

My Full Source Code is at Here How to create a modal bottomsheet in Flutter?