Bottom Sheet Flutter With Example

January 7, 2021March 14, 2021 Dhrumil Shah 4 Comments bottom sheet, bottom sheet dialog, flutter bottom sheet, modal bottom sheet, persistent bottom sheet

This article explains how you can integrate bottom sheet in flutter applications. Bottom sheet is very helpful if you want to show menu or dialog items in mobile applications.

If we do not want to full screen interface for interactions then bottom sheet is popular option over dialogue or menu. In this example, we are implementing two types of bottom sheets in flutter applications: Modal Bottom Sheet & Persistent Bottom Sheet.

Types of Bottom Sheets

The difference between modal bottom sheet and persistent bottom sheet is that elevation is higher in modal bottom sheet. Modal bottom sheet is alternative to menus or dialogs. The elevation in persistent bottom sheet is same as other part of app.

Scaffold(
appBar: AppBar(title: Text(‘Flutter Bottom Sheet Sample’),),
body: Center(
child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
        RaisedButton(
            textColor: Colors.white,
            color: Colors.red,
            child: Text(“Modal Bottom Sheet”, style: TextStyle(fontSize: 22)),
            onPressed: () {
                Navigator.push( context, MaterialPageRoute(builder: (context) => ModalBottomSheetScreen()), );
            },
        ),
        SizedBox(
            height: 25,
        ),
        RaisedButton(
            textColor: Colors.white,
            color: Colors.deepOrangeAccent,
            child: Text(“Persistent Bottom Sheet”, style: TextStyle(fontSize: 22)),
            onPressed: () {
                Navigator.push( context, MaterialPageRoute( builder: (context) => PersistentBottomScreen()));
            },
        ),
    ],
),
),
);

Modal Bottom Sheet Flutter

We can display modal bottom sheet in flutter applications by using showModalBottomSheet() function. In this example, we are displaying popular soccer player names in list view in bottom sheet. We can also integrate modal bottom sheet with draggable functionality so we can drag our bottom sheet to full screen.

class ModalBottomSheetScreen extends StatefulWidget {

@override
_ModalBottomSheetScreenState createState() => _ModalBottomSheetScreenState();
}

class _ModalBottomSheetScreenState extends State<ModalBottomSheetScreen> {

static List<String> listPlayers = <String>[
    “Cristiano Ronaldo”,
    “Lionel Messi”,
    “Neymar Jr.”,
    “Kevin De Bruyne”,
    “Robert Lewandowski”,
    “Kylian Mbappe”,
    “Virgil Van Dijk”,
    “Mohamed Salah”,
    “Sadio Mane”,
    “Sergio Ramos”,
    “Paul Pogba”,
    “Bruno Fernandes”
];

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
    title: Text(‘Modal Bottom Sheet’),
),
body: Center(
child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
        RaisedButton(
            textColor: Colors.white,
            color: Colors.red,
            child: Text(“Show Modal Bottom Sheet”, style: TextStyle(fontSize: 22)),
            onPressed: () {
                showModalBottomSheet(
                    isScrollControlled: true,
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.vertical(top: Radius.circular(15.0)),
                    ),
                    context: context,
                    builder: (context) {
                    return StatefulBuilder(
                        builder: (BuildContext context, StateSetter setState) {
                            return DraggableScrollableSheet(
                                expand: false,
                                builder: (BuildContext context, ScrollController scrollController) {
                                    return Column(children: <Widget>[
                                        Expanded(
                                            child: ListView.builder(
                                            controller: scrollController,
                                            itemCount: listPlayers.length,
                                            itemBuilder: (context, index) {
                                                return Padding(
                                                    padding: EdgeInsets.all(12),
                                                    child: Text(listPlayers[index],
                                                    style: TextStyle(color: Colors.black, fontSize: 25, fontWeight: FontWeight.bold),textAlign: TextAlign.center),
                                                );
                                            }),
                                        )
                                    ]);
                                }
                            );
                        }
                    )}
                );
            },
        ),
    ],
),
),
);
}
}

Persistent Bottom Sheet Flutter

The advantage in persistent screen is that it stays on screen even if you click outside of bottom sheet. This is not possible in modal bottom sheet. We can use persistent bottom sheet in flutter applications by calling showBottomSheet() function.

For persistent bottom sheet, we must get key parameter of super class so we can get current state of screen and we can call showBottomSheet() function with the help of it. Here we get key from scaffold widget to use for persistent bottom sheet.

class PersistentBottomScreen extends StatefulWidget {
@override
_PersistentBottomScreenState createState() => _PersistentBottomScreenState();
}

class _PersistentBottomScreenState extends State<PersistentBottomScreen> {
final scaffoldKey = GlobalKey<ScaffoldState>();

@override
Widget build(BuildContext context) {
return Scaffold(
key: scaffoldKey,
appBar: AppBar(
title: Text(‘Persistent Bottom Sheet’),
),
body: Center(
child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
        RaisedButton(
textColor: Colors.white,
            color: Colors.deepOrangeAccent,
            child: Text(“Show Persistent Bottom Sheet”, style: TextStyle(fontSize: 22)),
            onPressed: () {
                scaffoldKey.currentState.showBottomSheet((context) => StatefulBuilder (builder: (BuildContext context, StateSetter setState) {
                    return DraggableScrollableSheet(
                        expand: false,
                        builder: (BuildContext context, ScrollController scrollController) {
                            return Column(children: <Widget>[
                                Expanded(
                                    child: ListView.separated(
                                        separatorBuilder: (context, index) {
                                            return Divider(thickness: 3,);
                                        },
                                        controller: scrollController,
                                        itemCount: listPlayers.length,
                                        itemBuilder: (context, index) {
                                            return Padding(
                                                padding: EdgeInsets.all(12),
                                                child: Text(listPlayers[index],
                                                    style: TextStyle(
                                                    color: Colors.black,
                                                        fontSize: 25,
                                                        fontWeight: FontWeight.bold,
                                                    textAlign: TextAlign.center
                                                ),
                                            );
                                        }
                                    ),
                                )
                            ]);
                        }
                    );
                })
            );
        })
    ],
),
),
);
}
}