Flutter bottom sheet: What is it and how to create it

Indeed, the bottom sheet is becoming a non-replacement component when it comes to quick interactions that do not require a full screen to do. This feature has appeared in a lot of activities in every application, from signing up for a newsletter, splitting a bill, making a payment, sharing something interesting… That is to say, this feature is becoming inevitable in app development. In Flutter, this fact is even more prominent.

This is by far the easiest framework we’ve encountered in creating this kind of component. It literally just involves calling a simple method. So that’ll be short and quick. Without further ado, we – ArrowHiTech would like to show you guys the definition of Flutter bottom sheet, as well as how to create it in Flutter application. By the end of this article, you will definitely know better about the creating sequence. Let’s go!

What is Flutter bottom sheet?

Flutter bottom sheet
Flutter bottom sheet

To put it in the most simple way, Flutter bottom sheets are supplementary surfaces primarily used on mobile. It also shows signs that the creator(s) of the app put thought into how and when certain features will be used. The launching theory of this thing is quite simple: It slides up from the Bottom to display some more options to the user. For example, you may encounter a bottom sheet in Google Maps application.

Types of Flutter bottom sheets

1. Persistent Flutter bottom sheet

Persistent Flutter bottom sheet
Persistent Flutter bottom sheet

As clear from the name, it is persistent at the bottom of the screen. A user can view the full Flutter bottom sheet by dragging the sheet up vertically. The component is slightly elevated, and it can display more options or app content to the user. For example, the picture that we saw above is an example of a persistent one.

2. Modal Flutter bottom sheets

Again as the name suggests, these sheets behave like Modals or dialogues. It shadows the activity or fragment when activated. And if we tap outside the Flutter bottom sheet, it is dismissed just like a modal. A user can also slide up and slide down to activate and deactivate it, respectively.

How to create a Flutter bottom sheet?

How to create a Bottom Sheet in Flutter — AndroidVille | Best Android  Development Tutorials
Creating this component in Flutter

So we’ve come through the definition. Now let’s learn how we can implement this component in Flutter applications.

Getting started

First, get rid of the initial code that you’re provided by default. We’ll write our own. We’ll create a floating action button, and on clicking it, we’ll display a Flutter bottom sheet. To create a floating action button in Flutter, you’ll need a Scaffold. Scaffold in flutter allows us to use Material Design elements such as AppBar, floating action button, navigation drawer, and so on.

Step 1: Create a new project

As always, in order to create a new project for Flutter bottom sheet, all we need is to pass a function reference to onPressed of the floating action button. This is the function where we’ll create our own in Flutter. It should go something a little bit like this: 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'BottomSheet demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Click the floating action button to show bottom sheet.',
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed:() =>  displayBottomSheet(context),
        child: Icon(Icons.add),
      ),
    );
  }
}

Step 2: Called showModalBottomSheet for creating Flutter bottom sheet

After finishing writing all of the code above, it’s time to take the bottom ones into the next level. So, for doing this, all we have to do is to call showModalBottomSheet, this is a method provided by flutter. It takes a context and a builder function. We’ll use an anonymous function as our builder function. We’ve also used MediaQuery to limit the size of the Flutter bottom sheet to 40% of screen height. So, as a result, the set of code will be exactly like this:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'BottomSheet demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  void displayBottomSheet(BuildContext context) {
    showModalBottomSheet(
        context: context,
        builder: (ctx) {
          return Container(
            height: MediaQuery.of(context).size.height  * 0.4,
            child: Center(
              child: Text("Welcome to AndroidVille!"),
            ),
          );
        });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Click the floating action button to show bottom sheet.',
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed:() =>  displayBottomSheet(context),
        child: Icon(Icons.add),
      ),
    );
  }
}

Step 3: Test and pre-launching sequence

After doing all these codes, it’s about time for you to put your masterpiece live. The creation is quite easy indeed, yet we always need to test our application, especially in Flutter. You need to check out a few things: persistent Flutter bottom sheets are views that come up from the bottom of the screen, elevated over the main content. They can be dragged vertically to expose more or less of their content.

Final words

Above all, this blog gives you a detailed overview of the definition of the Flutter bottom sheet, and the step on how to create a bottom sheet in Flutter app development. Then, after reading the tutorial, we believe that you guys will be much more proficient in creating this type of component for eCommerce. Also, we hope that gives you a better idea of the capabilities of the basic functionality for bettering user experiences. Furthermore, if you have any questions about Flutter bottom sheet in particular and Flutter in general, let’s CONTACT US instantly.

Tags

Share