Unlock the Power of Modal Bottom Sheets in Flutter

Types of Bottom Sheets in Flutter

Flutter offers three primary types of bottom sheets: standard, modal, and expanding. While standard bottom sheets provide supplemental content without restricting user interaction, modal bottom sheets display information while blocking access to other app elements. Expanding bottom sheets, on the other hand, offer a hybrid experience, combining the benefits of both standard and modal sheets.

What is a Modal Bottom Sheet?

A modal bottom sheet is a widget that appears at the bottom of the screen, displaying supplementary content while restricting user interaction with the app’s main content. This powerful tool is commonly used in mobile apps to provide additional information, such as sharing options or links to other apps.

The Purpose of Modal Bottom Sheets

Modal bottom sheets create room for more content in your app, enhancing the user experience by providing a seamless way to access additional information. They are often triggered by user actions, such as tapping an icon, and can be dismissed by tapping an item within the sheet, tapping the main UI, or swiping down.

The showModalBottomSheet Function

To create a modal bottom sheet, Flutter provides the showModalBottomSheet function, which requires two essential properties: BuildContext and WidgetBuilder. The BuildContext takes the context argument, used to look up the navigator and theme for the bottom sheet, while the WidgetBuilder returns a widget, which is the bottom sheet itself.

Future<void> showModalBottomSheet<T>({
  @required BuildContext context,
  @required WidgetBuilder builder,
  Color barrierColor,
  bool barrierDismissible = true,
  bool useRootNavigator = true,
})

Building a Modal Bottom Sheet in Flutter

Let’s create a Flutter app that showcases a modal bottom sheet in action. We’ll start with a new project, clearing the code except for the essential imports.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Modal Bottom Sheet Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Modal Bottom Sheet Demo'),
        ),
        body: Center(
          child: ElevatedButton(
            child: Text('Show Modal Bottom Sheet'),
            onPressed: () {
              // Implement showModalBottomSheet here
            },
          ),
        ),
      ),
    );
  }
}

Next, we’ll add a button to the app’s body, which will trigger the modal bottom sheet when clicked. The showModalBottomSheet function will be used to display the sheet, taking the context and builder as arguments.

onPressed: () {
  showModalBottomSheet<void>(
    context: context,
    builder: (BuildContext context) {
      return Container(
        height: 200,
        child: Center(
          child: Text('This is a modal bottom sheet'),
        ),
      );
    },
  );
}

Run the app on your preferred simulator, and you’ll see the modal bottom sheet in action. Clicking the button will bring up the hidden menu, providing a seamless user experience.

• With Flutter’s customizable widgets, including the showModalBottomSheet function, you can create engaging mobile apps that provide a rich user experience.
• By mastering modal bottom sheets, you’ll unlock new possibilities for your app, making it more intuitive and user-friendly.