Modal Bottom Sheet In Flutter

In this blog, we will explore the Modal Bottom Sheet Widget In Flutter. We will also implement a demo of the Modal Bottom Sheet Widget, and describes its properties. and how to use them in your flutter applications.

Table Of Contents::

Flutter

Modal Bottom Sheet

Code Implement

Code File

Conclusion

Flutter :

“ Flutter is Google’s UI toolkit that helps you build beautiful and natively combined applications for mobile, web, and desktop in a single codebase in record time It means that you can use one programming language and one codebase to create two different apps (for iOS and Android)”.

Modal Bottom Sheet :

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.

Two Required 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.

Some Optional Properties of the Modal Bottom Sheet :

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 used to raise the shadow of the bottom sheet and it is an optional property.

Demo Module :

Code Implementation :

Create a new dart file called modal_bottom_sheet.dart inside the lib folder.

First of all, we will create one button on the modal bottom sheet page screen. And we will open the sheet at the click.

Now, at the click of a button, we will show the bottom sheet in which the column has been taken inside the bottom sheet and used the List Tile widget inside the column widget, in which some images and titles are displayed.

Let us understand this with the help of a reference.

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

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Code File:

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(
        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 EXAMPLE",
              style: TextStyle(
                  fontStyle: FontStyle.italic,
                  letterSpacing: 0.4,
                  fontWeight: FontWeight.w600),
            ),
            SizedBox(
              height: 20,
            ),
            RaisedButton(
              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: Colors.pink,
              child: Text(
                'Click Me',
                style: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.w600,
                    letterSpacing: 0.6),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Conclusion:

In this article, I have explained a Modal Bottom Sheet demo, which you can modify and experiment with according to your own. This little introduction was from the Modal Bottom Sheet widget from our side.

I hope this blog will provide you with sufficient information in Trying up the Modal Bottom Sheet widget in your flutter project. We will show you the Modal Bottom Sheet is?, and working on it in your flutter applications, So please try it.

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

If we got something wrong? Let me know in the comments. we would love to improve.

❤ ❤ Thanks for reading this article ❤❤

Feel free to connect with us
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.