How to create a modal bottomsheet in Flutter?

Hello Guys How Are You All ? Hope You All Are Fine. Manytimes we need to use modal bottomsheet in our application so that, In this tutorial we will learn How to create a modal BottomSheet 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.

How to create a modal bottomsheet in Flutter?

1. 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

import 'package:flutter/material.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Bottom sheet Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: Container(
        child: Center(
          child: RaisedButton(
            onPressed: () {
              _settingModalBottomSheet(context);
            },
            child: Text("Show BottomSheet"),
          ),
        ),
      ),
    );
  }
}

void _settingModalBottomSheet(context) {
  showModalBottomSheet(
    context: context,
    builder: (BuildContext bc) {
      return Container(
        child: new Wrap(
          children: <Widget>[
            ListTile(
              leading: Icon(Icons.email),
              title: Text('Send SMS'),
              onTap: () {
                print('Send SMS');
              },
            ),
            ListTile(
              leading: Icon(Icons.share),
              title: Text('Share App'),
              onTap: () {
                print('Share App');
              },
            ),
            ListTile(
              leading: Icon(Icons.delete),
              title: Text('Delete'),
              onTap: () {
                print('Delete ');
              },
            ),
            ListTile(
              leading: Icon(Icons.phone),
              title: Text('Call phone'),
              onTap: () {
                print('Call phone');
              },
            ),
          ],
        ),
      );
    },
  );
}

I Hope You Guys Liked My BottomSheet tutorial. Please give feedback in comment if you need any help. Thank You.

Also Check Out Below Tutorials

• How To Create horizontal ListView in Flutter
• [Solved] Failed assertion: line ‘!_debugLocked’: I/flutter (24830): is not true
• Read How to make a blur Background Image effect in Flutter using BackdropFilter.
• How to Get Device Lat Long in Flutter
• How to Get DeviceId in Flutter with Example Source Code