Open In App

Flutter – Modal Bottom Sheet

Improve
Improve
Like Article
Like
Save
Share
Report

Modal Bottom Sheet is an alternative to a menu or a dialog and prevents the user from interacting with the rest of the app. It will appear over the UI so that there is no need to navigate to a different page. It can be used to perform a small task that does not require the whole new screen to be built.

Constructor:

Future<T> showModalBottomSheet <T>(
{@required BuildContext context,
@required WidgetBuilder builder,
Color backgroundColor,
double elevation,
ShapeBorder shape,
Clip clipBehavior,
Color barrierColor,
bool isScrollControlled: false,
bool useRootNavigator: false,
bool isDismissible: true,
bool enableDrag: true,
RouteSettings routeSettings}
)

Properties:

  • builder: A builder for the contents of the sheet.
  • backgroundColor: To display background color.
  • elevation: Elevates the snackbar by increasing shadow.
  • shape: Shape of the modal bottom sheet.
  • clipBehavior: The content will be clipped according to this option.
  •  barrierColor: Color to display in the background after the modal bottom sheet is displayed.
  • isScrollControlled: Enable or disable scrolling.
  •  useRootNavigator: The useRootNavigator parameter ensures that the root navigator is used to display the BottomSheet when set to true.
  •  isDismissible: Specifies whether the user can dismiss modal bottom sheet by tapping on the scrim.
  •  enableDrag: The enableDrag parameter specifies whether the bottom sheet can be dragged up and down and dismissed by swiping downwards.
  •  routeSettings: Sets the RouteSettings of the modal bottom sheet.

Note: The context and builder have @required class applied which means these parameters are mandatory to use. 

Implementation:

File: main.dart 

Dart




import 'package:flutter/material.dart';
 
void main() => runApp(const MyApp());
 
// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GeeksforGeeks',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('GeeksforGeeks'),
          backgroundColor: Colors.green,
        ),
        body: const ModalBottomSheetDemo(),
      ),
    );
  }
}
 
class ModalBottomSheetDemo extends StatelessWidget {
  const ModalBottomSheetDemo({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        child: const Text('showModalBottomSheet'),
        onPressed: () {
          // when raised button is pressed
          // we display showModalBottomSheet
          showModalBottomSheet<void>(
            // context and builder are
            // required properties in this widget
            context: context,
            builder: (BuildContext context) {
              // we set up a container inside which
              // we create center column and display text
 
              // Returning SizedBox instead of a Container
              return SizedBox(
                height: 200,
                child: Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: const <Widget>[
                      Text('GeeksforGeeks'),
                    ],
                  ),
                ),
              );
            },
          );
        },
      ),
 
      // RaisedButton is deprecated and should not be used
      // Use ElevatedButton instead.
 
      // child: RaisedButton(
      //     child: const Text('showModalBottomSheet'),
      //     onPressed: () {
 
      //     // when raised button is pressed
      //     // we display showModalBottomSheet
      //     showModalBottomSheet<void>(
 
      //         // context and builder are
      //         // required properties in this widget
      //         context: context,
      //         builder: (BuildContext context) {
 
      //         // we set up a container inside which
      //         // we create center column and display text
      //         return Container(
      //             height: 200,
      //             child: Center(
      //             child: Column(
      //                 mainAxisAlignment: MainAxisAlignment.center,
      //                 children: <Widget>[
      //                 const Text('GeeksforGeeks'),
      //                 ],
      //             ),
      //             ),
      //         );
      //         },
      //     );
      //     },
      // ),
    );
  }
}


Output:

Explanation: Here we have created 2 stateless widgets where the first stateless widget is used to build our main screen using the material app. In the first stateless widget, we have defined our appbar inside the scaffold and call to our second stateless widget. 

In the second stateless widget we are building content inside our main screen. Here we created a raised button named showmodalbottomsheet button. When we press on it, it displays modal bottom sheet inside which we added builder property which displays text geeksforgeeks inside the column.

Applying different properties:

Dart




import 'package:flutter/material.dart';
 
void main() => runApp(const MyApp());
 
/// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GeeksforGeeks',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('GeeksforGeeks'),
          backgroundColor: Colors.green,
        ),
        body: const ModalBottomSheetDemo(),
      ),
    );
  }
}
 
class ModalBottomSheetDemo extends StatelessWidget {
  const ModalBottomSheetDemo({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Center(
      // REPLACED: RaisedButton class with Elevated button class.
      // Raisedbutton is deprecatred and shouldn't be used.
       
      child: ElevatedButton(
        child: const Text('showModalBottomSheet'),
        onPressed: () {
          // adding some properties
          showModalBottomSheet(
            context: context,
            // color is applied to main screen when modal bottom screen is displayed
            barrierColor: Colors.greenAccent,
            //background color for modal bottom screen
            backgroundColor: Colors.yellow,
            //elevates modal bottom screen
            elevation: 10,
            // gives rounded corner to modal bottom screen
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10.0),
            ),
            builder: (BuildContext context) {
              // UDE : SizedBox instead of Container for whitespaces
              return SizedBox(
                height: 200,
                child: Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: const <Widget>[
                      Text('GeeksforGeeks'),
                    ],
                  ),
                ),
              );
            },
          );
        },
      ),
    );
  }
}


Output:

Explanation: In above code we added some properties like barrierColor, backgroundColor, shape, and elevation.



Last Updated : 21 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads