Exploring Flutter Bottom Sheets: Persistent and Modal

If you're like me, you've probably loved working with Flutter for crafting stellar apps, thanks to its impressive set of widgets and tools. Today, let’s dive into a powerful widget that can enhance your app's functionality and aesthetic - the Bottom Sheet. Flutter Bottom Sheet is a slide-up panel primarily used for user actions and additional sub-environments within your screen. In this blog, we will discuss two types of bottom sheets: Persistent and Modal.

‍

Understanding Bottom Sheet in Flutter

‍

Exploring Different Types of Flutter Bottom Sheets: Persistent and Modal

‍

What is Flutter Bottom Sheet?

Often, in our app, we need to display additional content or menus without navigating to a new screen. That's where the bottom sheet comes into play. A bottom sheet is a widget that slides up from the bottom of the screen to display more content. It's more fantastic than a dialog and usually complements the main app content.

‍

Role of Bottom Sheet in UI

The primary role of a bottom sheet in the user interface(UI) is to provide a versatile yet non-intrusive way to present extra options or content to the user. With the clever use of bottom sheets, we can dramatically improve the user experience. They offer an alternative to menus or dialogs and can display complex views or even contain sub-screens.

‍

What are the Types of Flutter Bottom Sheets?

Flutter offers two types of Bottom Sheets - Persistent Bottom Sheets and Modal Bottom Sheets.

‍

Persistent Bottom Sheet

When the user interacts with other elements of the program, the Persistent Bottom Sheet remains visible. They can be dragged up to show more content and are usually found in the app's main menu.

‍

Modal Bottom Sheet

A Modal Bottom Sheet, on the other hand, prevents the user from interacting with the rest of the app until dismissed. Ideal for user actions or to focus attention on vital content, these sheets are "modal" and demand the user's interaction.

‍

How to Build the Persistent Bottom Sheet in Flutter?

‍

What is a Persistent Bottom Sheet?

As mentioned earlier, a Persistent Bottom Sheet is one that remains displayed on the screen even when users interact with other parts of the app. This allows access to additional app functionalities without obfuscating the primary content on the screen. Now, onto creating our first Flutter Persistent Bottom Sheet.

‍

Flutter Persistent Bottom Sheet Example

Creating a Persistent Bottom Sheet in Flutter is pretty simple.

‍

Creating a Scaffold

Firstly, we will be needing a Scaffold widget, as the showBottomSheet function is a part of ScaffoldState.

‍

Adding a Persistent Bottom Sheet

Now, we need to add the Persistent Bottom Sheet. This can be done using the showBottomSheet function, which takes two required properties: context and builder.

import 'package:flutter/material.dart';

/// Flutter code sample for [ScaffoldState.showBottomSheet].

void main() => runApp(const ShowBottomSheetExampleApp());

class ShowBottomSheetExampleApp extends StatelessWidget {
  const ShowBottomSheetExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('ScaffoldState Sample')),
        body: const ShowBottomSheetExample(),
      ),
    );
  }
}

class ShowBottomSheetExample extends StatelessWidget {
  const ShowBottomSheetExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        child: const Text('showBottomSheet'),
        onPressed: () {
          Scaffold.of(context).showBottomSheet<void>(
            (BuildContext context) {
              return Container(
                height: 200,
                color: Colors.amber,
                child: Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      const Text('Hello from Persistent Bottom Sheet'),
                      ElevatedButton(
                        child: const Text('Close BottomSheet'),
                        onPressed: () {
                          Navigator.pop(context);
                        },
                      ),
                    ],
                  ),
                ),
              );
            },
          );
        },
      ),
    );
  }
}

In this bottom sheet example, we have an ElevatedButton on our screen. Once the user taps on this ElevatedButton, a Persistent Bottom Sheet with a height of 200 units will open. A simple 'Hello from Persistent Bottom Sheet' message is displayed on this container and a 'Close BottomSheet' button to close the bottom sheet.

But we can't just stop here, right? Let's make this bottom sheet a bit more interesting by modifying its appearance.

‍

Tweaking the Bottom Sheet Appearance

We can improve the appearance of our bottom sheet by playing with padding or by adding widgets.

You can have a padding of 10 units containing an Icon and three Text widgets, making it look like an options menu.

‍

An Exploration of the Modal Bottom Sheet in Flutter

‍

What is a Modal Bottom Sheet?

Without a detailed look at the Modal Bottom Sheet, our research of Bottom Sheets in Flutter would be incomplete. A Modal Bottom Sheet is a simple replacement for a menu or dialog that prohibits the user from engaging with the remainder of the program. It is more visually appealing and includes the option to expose more content dependent on user behavior.

‍

Developing a Modal Bottom Sheet Example in Flutter

Developing a Modal Bottom Sheet in Flutter is pretty straightforward, and in a few steps, you can have your sheet up and running.

‍

Setting Up the Scaffold

Like we discussed earlier, we'll need a Scaffold, since the showModalBottomSheet function is a part of ScaffoldState. Let's set it up.

  Scaffold(
    appBar: AppBar(
      title: "Modal Bottom Sheet Demo"
    ),
    body: Center(),
  );

‍

Implementing the Modal Bottom Sheet

The next step, feature our Flutter Modal Bottom Sheet. We'll use the showModalBottomSheet function, which also takes the context and builder, similar to the showBottomSheet function we previously used.

  import 'package:flutter/material.dart';

/// Flutter code sample for [showModalBottomSheet].

void main() => runApp(const BottomSheetApp());

class BottomSheetApp extends StatelessWidget {
  const BottomSheetApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Bottom Sheet Sample')),
        body: const BottomSheetExample(),
      ),
    );
  }
}

class BottomSheetExample extends StatelessWidget {
  const BottomSheetExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        child: const Text('showModalBottomSheet'),
        onPressed: () {
          showModalBottomSheet<void>(
            context: context,
            builder: (BuildContext context) {
              return Container(
                height: 200,
                color: Colors.amber,
                child: Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      const Text('Welcome to Modal Bottom Sheet'),
                      ElevatedButton(
                        child: const Text('Close BottomSheet'),
                        onPressed: () => Navigator.pop(context),
                      ),
                    ],
                  ),
                ),
              );
            },
          );
        },
      ),
    );
  }
}

This example displays an ElevatedButton. When the user taps it, a Modal Bottom Sheet with a height of 200 units will open up and display the message 'Welcome to Modal Bottom Sheet' and a 'Close BottomSheet' button to close the bottom sheet.

‍

Customizing the Modal Bottom Sheet

Customization is the name of the game with Flutter, and our Modal Bottom Sheet is not exempt from this. Let's spice it up a bit.

  Container(
    height: 200,
    padding: EdgeInsets.all(15),
    color: Colors.blueAccent,
    child: Column(
      children: [
        Icon(Icons.info_outline),
        Text('FYI'),
        Text('Learn more about Modal Bottom Sheet here'),
      ],
    ),
  );

Now our Modal Bottom Sheet has an Icon and two Text widgets. It doesn't just look more vibrant, it now provides some extra info, living up to its purpose.

‍

Modal Bottom Sheet Development using Flutter Packages

‍

Importance of Flutter Packages

Flutter packages are a convenient way to slice down development time and reduce the coding workload. They offer pre-built solutions for common functionalities that we can use in our app right away. Today, we'll work with the modal_bottom_sheet package in our Flutter project to create engaging modal bottom sheets.

‍

Working with Flutter Modal Bottom Sheet Package

The modal_bottom_sheet package provides various types of modal bottom sheets like Cupertino modal bottom sheet, bar modal, and material modal. Besides these, you can also create your custom modal bottom sheet.

‍

Installation

Let’s start by adding the modal_bottom_sheet dependency to our pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  modal_bottom_sheet: ^2.1.2

After adding the dependency, run the flutter pub get command.

‍

Implementation

Now, let's see how we can use this package to create a Material Modal Bottom Sheet.

We can call the showMaterialModalBottomSheet function and pass the required context and builder.

  showMaterialModalBottomSheet(
  context: context,
  builder: (context) => Container(),
)

This example will display a RaisedButton, and on tapping it, a Material Modal Bottom Sheet with a height of 200 units will appear, displaying the message 'Welcome to Material Modal Bottom Sheet'.

‍

Comparison: Persistent vs. Modal Bottom Sheets

‍

When and where should we use Persistent Bottom Sheets or Modal Bottom Sheets in a Flutter app? Both types have their own strengths and use cases.

‍

Use Case Scenarios

Persistent Bottom Sheets are primarily utilized when we want to offer additional but non-essential options to the user - think of it as an extension of the app's main screen. You could consider using a Persistent Bottom Sheet for a music player app. The bottom sheet can act as a mini-player when contracted, displaying minimal controls. When expanded it shows additional controls and features like the playlist or song lyrics.

On the other hand, Modal Bottom Sheets are more disruptive and purposely so. They hijack the user's attention, unlike persistent sheets, which offer an unobtrusive experience. Modal Bottom Sheets prove useful in situations where you want the user to perform a specific action before continuing — for example, making a choice from several options, or confirming an action.

‍

Differences in Implementation

The implementation of the two bottom sheets in Flutter follows a similar approach yet with one crucial variance: 'the function'. For Persistent Bottom Sheets, we use showBottomSheet, while for Modal Bottom Sheets, we use the showModalBottomSheet function.

Consequently, the behaviour associated with these sheets varies according to the function used. Unlike Modal Bottom Sheets, Persistent Bottom Sheets don't cover the entire screen and can be minimized, allowing interaction with the rest of the screen.

‍

Best Practices for Integrating Bottom Sheets in Flutter

While Flutter allows for extensive customization of both Persistent and Modal Bottom Sheets, we should follow some best practices to ensure a smooth user experience.

‍

UI/UX Considerations

When designing a bottom sheet, it's crucial to keep the user at the forefront.

Content Organization: The primary action or information should always be at the top, easily accessible to the user.
Additional but not Obtrusive: Bottom Sheets should offer extra functionality or information, but they shouldn't steal focus from the primary content unless required.
Size Matters: Always consider the size of a bottom sheet - it should take up enough screen real estate to display its content comfortably without impeding access to the main screen. Modal bottom sheets can take the entire screen if necessary.

‍

Performance Tips

Beyond just UI, performance is a key aspect of any successful app.

Avoid Overloading: While it might be tempting to put a lot of features in your bottom sheet, keep in mind that it may affect performance. Try to keep the contents as light as possible.
Smart Management: Efficiently manage the state of your bottom sheets, especially if they are modified based on user actions or other factors.
Testing: Always thoroughly test bottom sheets on different devices and screen dimensions.

‍

Troubleshooting Common Issues with Flutter Bottom Sheets

Like any other widget in Flutter, bottom sheets can sometimes be tricky to work with. In this section, I will cover a few common issues and their potential solutions.

‍

Issue 1: Managing State

Problem: You've created a bottom sheet with some interactive widgets (like buttons or forms), but any interaction is not reflected in the bottom sheet.

Solution: Remember, a modal bottom sheet is a new route (screen) in the app. If you want to manage the state of widgets inside the modal bottom sheet, you should create a new StatefulWidget and set it as the child of your modal bottom sheet.

‍

Issue 2: Customizing Appearance

Problem: You want to customize the appearance of the bottom sheet (like width or background color), but any custom style isn't applied.

Solution: Wrap your bottom sheet widget with a Theme widget, and override the canvasColor (for background color) and bottomSheetTheme (for shape, modalElevation).

‍

Issue 3: Managing Dismiss Action

Problem: You want to prevent the modal bottom sheet to dismiss when the user taps outside the bottom sheet.

Solution: Use the isDismissible property of the showModalBottomSheet function. Set isDismissible: false, it prevents the modal bottom sheet from closing by tapping outside the sheet area.

These are some of the challenges you might face while integrating Bottom Sheets into your Flutter app, and their mitigation measures. Flutter provides a powerful and flexible way to create intuitive and interactive components.

‍

Conclusion: Empowering App Development with Bottom Sheets in Flutter and WiseGPT

In this blog, we delved into a detailed exploration of bottom sheets in Flutter, showcasing the step-by-step implementation of Persistent and Modal Bottom Sheets, along with using a Flutter package for creating Material Modal Bottom Sheets. Remember, the key to a future-proof Bottom Sheet lies in well-organized content, intuitive design, and smooth performance.

‍

As we reach the end of our journey, there's one final tool I'd like to introduce which can enhance your Flutter development experience – WiseGPT.

WiseGPT is a revolutionary tool built for developers that aids you in writing code for numerous Flutter widgets including, but not limited to, bottom sheets and modal bottom sheets. Not only limited to widgets, WiseGPT also gracefully handles state management, making your development process a breeze.

What makes WiseGPT particularly impressive is its capability to compose code for even the most complex widgets and animations, taking the load off your shoulders. Its prowess extends to creating API endpoint codes, complete with all functions and models, all without a single prompt and mirrors the style of your code.

‍

By integrating WiseGPT into your Flutter projects, you can upscale your app development process and productivity, while also ensuring seamless user experience with structured, efficient widgets like bottom sheets. Embrace the power of WiseGPT along with the flexibility of Flutter, and elevate your app development journey to new heights. Are you excited to infuse the power of WiseGPT into your next Flutter project? So go forth, experiment with this ultimate code assist, and elevate the performance of your app. 💙👩🏻‍💻

Flutter

React

Android

iOS

Node.js

Plugin

Templates

Screen Library

About Us

Career

Contact Us

Documention

Discord

Blogs

Webflow

Airtable

Notion

Chargebee

Freshteam

Spotify

Slack

Google Sheets

Exploring Different Types of Flutter Bottom Sheets: Persistent and Modal

Nidhi Sorathiya