Bottomsheet in Flutter

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:

Constructor of BottomSheet class:

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})

Implementation with Example:

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.