How to create a modal bottomsheet in Flutter?

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.

How to create a modal bottomsheet in Flutter

To Make Flutter BottomSheet Follow this Steps.

  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');
              },
            ),
          ],
        ),
      );
    },
  );
}
How to create a modal bottomsheet in flutter ?

To make a modal bottomsheet you need the Target button on which button onPress you need the bottom sheet? For Example, I have RaisedButton and I want to open bottomsheet on the press of this button.

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

Also Read How To Create horizontal ListView in Flutter

Milan Dhameliya is an Information Technology Engineer. By profession, he is a Full Stack developer with knowledge of multiple back-end platforms (e.g., PHP, Node.js, Python) and frontend Flutter frameworks.

2 thoughts on “How to create a modal bottomsheet in Flutter?”

Leave a Comment