[Solved] How To Customize Flutter Modal Bottom Sheet

In this tutorial, we’ll learn how to properly implement and customize Flutter modal bottom sheet with the help of multiple Flutter code examples.

After reading this post, I’m sure you’ll have a detailed practical knowledge of how to easily use and customize Flutter modal bottom sheet.

Introduction: Flutter Modal Bottom Sheet

It’s a sheet that pops in from the bottom of app’s screen. Its used to show options like logout, switch account, notifications etc. depending on your project requirements.

Let’s start implementing it using a practical Flutter code example.

Implementing Flutter Modal Bottom Sheet

For that, we’ll create a simple Flutter material button widget and inside its onPressed function, we’ll implement Flutter modal bottom sheet. See below code:

Scaffold(
      body: Center(
          child: MaterialButton(
        onPressed: () {
          showModalBottomSheet(
              context: context,
              builder: (context) {
                return Container();
              });
        },
        child: Text('Show Bottom Sheet'),
      )),
    )

Above image shows the default Flutter modal bottom sheet and its shown after the material button is pressed. You can use any other button/way to trigger Flutter modal bottom sheet.

Customizing Flutter Modal Bottom Sheet

Let’s discuss the constructors of bottom sheet.

Background Color

Background color, as the name suggests, it’s used to customize the background color of Flutter bottom sheet. See below code:

backgroundColor: Colors.blue.shade200

flutter modal bottom sheet background color

Barrier Color

This constructor is used to customize the remaining screen color when the bottom sheet pops in. See below code:

flutter modal bottom sheet barrier color

barrierColor: Colors.green.withOpacity(.2)

Shape

As the name suggests, it’s used to customize the shape of Flutter modal bottom sheet. See below code:

shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(30),
                      topRight: Radius.circular(30)))

Builder

Builder returns a widget which can be used to customize Flutter modal bottom sheet. Using this constructor, we can design our own Flutter bottom sheet. In our case, we’ve used Flutter container widget. See below code:

builder: (context) {
                return Container(
                  height: 200,
                  padding: EdgeInsets.only(top: 20),
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(10),
                          topRight: Radius.circular(100))),
                  child: Column(
                    children: [
                      ListTile(
                        leading: Icon(
                          Icons.email,
                          color: Colors.grey,
                          size: 25,
                        ),
                        dense: true,
                        title: Text('letmeflutter@letmeflutter.com'),
                        subtitle: Text('letmeflutter@letmeflutter.com'),
                      ),
                      ListTile(
                        leading: Icon(
                          Icons.logout,
                          color: Colors.grey,
                          size: 25,
                        ),
                        dense: true,
                        title: Text('Logout'),
                        subtitle: Text('Click to logout'),
                      )
                    ],
                  ),
                );
              }

So this is how we can implement and customize Flutter modal bottom sheet. Hope you like this post.

Don’t hesitate to ask if you still have any questions related to the customization of Flutter modal bottom sheet. I’ll be very glad to answer all your questions.

The complete source code of custom Flutter modal bottom sheet is given in the below section.

Custom Flutter Modal Bottom Sheet Source Code

custom flutter modal bottom sheet

import 'package:flutter/material.dart';
main() {
  runApp(myApp());
}
class myApp extends StatelessWidget {
  const myApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}
class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: MaterialButton(
        onPressed: () {
          showModalBottomSheet(
              context: context,
              builder: (context) {
                return Container(
                  height: 200,
                  padding: EdgeInsets.only(top: 20),
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(10),
                          topRight: Radius.circular(100))),
                  child: Column(
                    children: [
                      ListTile(
                        leading: Icon(
                          Icons.email,
                          color: Colors.grey,
                          size: 25,
                        ),
                        dense: true,
                        title: Text('letmeflutter@letmeflutter.com'),
                        subtitle: Text('letmeflutter@letmeflutter.com'),
                      ),
                      ListTile(
                        leading: Icon(
                          Icons.logout,
                          color: Colors.grey,
                          size: 25,
                        ),
                        dense: true,
                        title: Text('Logout'),
                        subtitle: Text('Click to logout'),
                      )
                    ],
                  ),
                );
              },
           // can use these constructors as well
              backgroundColor: Colors.transparent,
              barrierColor: Colors.black.withOpacity(.5),
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(10),
                      topRight: Radius.circular(10))));
        },
        child: Text('Show Bottom Sheet'),
      )),
    );
  }
}

Conclusion

To conclude this tutorial, now you’ve a detailed and in-depth practical knowledge of how to properly use and customize Flutter modal bottom sheet. I’d love to have your feedback on this post.

I’d also love to see you visit my other tutorials on Flutter app development and Python programming as well. Thank you for reading this post.