Flutter – Modal Bottom Sheet

21 Jun, 2022
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.
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}
)
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:
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.
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.
ankit_kumar_
android
Flutter
Picked
Flutter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Flutter - Custom Bottom Navigation Bar
Flutter - Stack Widget
Flutter - Search Bar
Flutter - Dialogs
Flutter - FutureBuilder Widget
Flutter - Flexible Widget
Flutter - File Structure
Flutter - Pop Up Menu
Flutter - AppBar Widget
Flutter - CircleAvatar Widget