close

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

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');
              },
            ),
          ],
        ),
      );
    },
  );
}
  1. 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.

  2. 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 Check Out Below Tutorials

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

Leave a Comment

%d bloggers like this: