Flutter – Persistent Bottom Sheet

The bottom sheet is a material widget under the material.dart library. It is like an interactive dialogue that opens from the bottom of the UI toward the top. The Bottom sheet is a good option to consider if you want to display information on the screen by diverting the user’s focus. It blocks/unblocks the user interaction with other contents of the screen while it is displayed depending on the type of sheet you are using. For implementing a bottom sheet you need to import the material component package that is “package: flutter/material.dart”. The bottom sheet is a built-in widget provided generally for displaying information like displaying a menu, entering card details, creating a form with text fields, etc. A sheet appears only when the user triggers the bottom sheet widgets and he can close the sheet by the given actions:

• Swiping the screen down/pressing backward
• Tapping the main UI of the app
• Pressing any item inside the sheet

A bottom sheet is divided into two categories:

1. Modal Bottom Sheet 
2. Persistent Bottom Sheet

Persistent Bottom Sheet

The second category of bottom sheet is different from the modal bottom sheet only in its behavior. A persistent bottom sheet does not block the user interaction with the rest of the contents of the application. It allows interaction even when it stays on the screen. The only two ways to dismiss a persistent bottom sheet are to swipe the sheet in a downward direction or press backward. This widget can be built only by triggering displayPersistentBottomSheet() function. It is passed to the onPressed argument of the button widget. 

Constructor

PersistentBottomSheetController<T> showBottomSheet<T>(
    WidgetBuilder builder,
    {Color? backgroundColor,
    double? elevation,
    ShapeBorder? shape,
    Clip? clipBehavior,
    BoxConstraints? constraints,
    bool? enableDrag,
    AnimationController? transitionAnimationController}
)

Implementation

Dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

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 showSheet(),
      ),
    );
  }
}

class showSheet extends StatefulWidget {
  const showSheet({Key? key}) : super(key: key);

  @override
  State<showSheet> createState() => _showSheetState();
}

class _showSheetState extends State<showSheet> {
  void displayPersistentBottomSheet() {
    Scaffold.of(context).showBottomSheet<void>((BuildContext context) {
      return Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          ListTile(
            leading: Icon(Icons.person),
            title: const Text(' My Profile '),
            onTap: () {
              Navigator.pop(context);
            },
          ),
          ListTile(
            leading: Icon(Icons.book),
            title: const Text(' My Course '),
            onTap: () {
              Navigator.pop(context);
            },
          ),
          ListTile(
            leading: Icon(Icons.workspace_premium),
            title: const Text(' Go Premium '),
            onTap: () {
              Navigator.pop(context);
            },
          ),
          ListTile(
            leading: Icon(Icons.video_label),
            title: const Text(' Saved Videos '),
            onTap: () {
              Navigator.pop(context);
            },
          ),
          ListTile(
            leading: Icon(Icons.edit),
            title: const Text(' Edit Profile '),
            onTap: () {
              Navigator.pop(context);
            },
          ),
          ListTile(
            leading: Icon(Icons.logout),
            title: const Text('LogOut'),
            onTap: () {
              Navigator.pop(context);
            },
          ),
        ],
      );
    });
  }

  Widget build(BuildContext context) {
    return Center(
      child: FlatButton(
        color: Colors.green,
        child: const Text(
          'Display Sheet',
          style: TextStyle(color: Colors.white),
        ),
        onPressed: displayPersistentBottomSheet,
      ),
    );
  }
}

Output: