Bottomsheet in Flutter - GeeksforGeeks

22 Mar, 2021
We can create bottomsheet in flutter. Basically, we have two types of bottomsheets in material design: Persistent and Modal. Bottomsheets are used when we want to perform actions. There are basically two types of Bottomsheets: Persistent and Modal. Persistent bottomsheet do not hide the screen content and focus on both sides. But Modal bottomsheet focuses more on bottomsheet rather than the main screen content. When the persistent button is tapped then the page will be pushed and the Persistent bottomsheet will be displayed. While in the case of a Modal bottomsheet, rather than a page push, bottomsheet will be displayed on the same page and is less complex than the persistent bottomsheet. We can use either of the bottomsheet as per our requirement.
Persistent: It is visible even when the user uses the other parts of the app.
Modal: It prevents the user from using other parts of the app.
Let’s understand these with the help of examples:
BottomSheet({Key key, 
AnimationController animationController, 
bool enableDrag: true, 
BottomSheetDragStartHandler onDragStart, 
BottomSheetDragEndHandler onDragEnd, 
Color backgroundColor, 
double elevation, 
ShapeBorder shape, 
Clip clipBehavior, 
@required VoidCallback onClosing, 
@required WidgetBuilder builder})
main.dart
Dart
import 'package:flutter/material.dart';  void main() => runApp(MyApp());  class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return MaterialApp(      title: 'BottomSheet',      theme: ThemeData(        primarySwatch: Colors.blue,      ),      home: MyHomePage(),      debugShowCheckedModeBanner: false,    );  }}  class MyHomePage extends StatefulWidget {  @override  _MyHomePageState createState() => _MyHomePageState();}  class _MyHomePageState extends State<MyHomePage>{  final _scaffoldKey =new GlobalKey<ScaffoldState>();  VoidCallback _showPersBottomSheetCallBack;    @override  void initState(){    super.initState();    _showPersBottomSheetCallBack=_showPersistentBottomSheet;  }  void _showPersistentBottomSheet(){    setState(() {      _showPersBottomSheetCallBack=null;    });    _scaffoldKey.currentState.showBottomSheet((context){      return new Container(        height: 200.0,        color: Colors.green,        child: new Center(          child: new Text("Persistent BottomSheet",textScaleFactor: 2,              style: TextStyle(color: Colors.white,fontWeight: FontWeight.bold)),        ),      );    }).closed.whenComplete((){      if(mounted){        setState(() {          _showPersBottomSheetCallBack=_showPersistentBottomSheet;        });      }    });  }  void _showModalSheet(){    showModalBottomSheet(        context: context,        builder: (builder){          return new Container(            height: 200.0,            color: Colors.green,            child: new Center(              child: new Text(" Modal BottomSheet",textScaleFactor: 2,                  style: TextStyle(color: Colors.white,fontWeight: FontWeight.bold)),            ),          );        }    );  }    @override  Widget build(BuildContext context) {    return new Scaffold(      key:_scaffoldKey,      appBar: new AppBar(        title: new Text("Bottomsheet"),        backgroundColor: Colors.green,        actions: <Widget>[          Text("GFG",textScaleFactor: 2,)        ],      ),      body: new Center(        child: new Column(          mainAxisAlignment: MainAxisAlignment.center,          children: <Widget>[            new RaisedButton(              color: Colors.red,              onPressed: _showPersBottomSheetCallBack,              child: new Text("Persistent",                  style: TextStyle(color: Colors.white,                      fontWeight: FontWeight.bold)),            ),            new Padding(              padding: const EdgeInsets.only(top: 10.0),            ),            new RaisedButton(              color: Colors.red,              onPressed: _showModalSheet,              child: new Text("Model",                  style: TextStyle(color: Colors.white,                      fontWeight: FontWeight.bold)),            )          ],        ),      ),      backgroundColor: Colors.lightBlue[100],    );  }}
Output:
When the above code is executed, the output is shown below:
When the Persistent button is tapped, a persistent bottomsheet will be displayed. In this persistent bottomsheet, the main screen content is equally focused as the bottomsheet content. When the persistent button is tapped then the page will be pushed and the Persistent bottomsheet will be displayed. When the Modal button is tapped, the modal bottomsheet will be displayed. In the Modal bottomsheet, rather than a page push, bottomsheet will be displayed on the same page and is less complex than the persistent bottomsheet.
Flutter
Flutter-widgets
Dart
Flutter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Flutter - Custom Bottom Navigation Bar
ListView Class in Flutter
Flutter - Flexible Widget
Flutter - Stack Widget
Android Studio Setup for Flutter Development
Flutter - Custom Bottom Navigation Bar
Flutter Tutorial
Flutter - Flexible Widget
Flutter - Stack Widget
Flutter - Dialogs