Skip to content
Related Articles

Related Articles

Improve Article
Flutter – Modal Bottom Sheet
  • Last Updated : 17 Jan, 2021

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:

The main.dart file.

Dart




import 'package:flutter/material.dart';
  
void main() => runApp(MyApp());
  
// This is the main application widget.
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GeeksforGeeks',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('GeeksforGeeks'),
          backgroundColor: Colors.green,
        ),
        body: ModalBottomSheetDemo(),
      ),
    );
  }
}
  
class ModalBottomSheetDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      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(MyApp());
  
/// This is the main application widget.
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GeeksforGeeks',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('GeeksforGeeks'),
          backgroundColor: Colors.green,
        ),
        body: ModalBottomSheetDemo(),
      ),
    );
  }
}
  
class ModalBottomSheetDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: RaisedButton(
        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) {
              return Container(
                height: 200,
                child: Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      const Text('GeeksforGeeks'),
                    ],
                  ),
                ),
              );
            },
          );
        },
      ),
    );
  }
}

Output:

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

Want a more fast-paced & competitive environment to learn the fundamentals of Android?
Click here to head to a guide uniquely curated by our experts with the aim to make you industry ready in no time!



My Personal Notes arrow_drop_up
Recommended Articles
Page :