Blog

This tutorial will be exploring bottomsheet dialogs, and how you can create in flutter without any third party depedencies. Such type of sheets can save you space in the already limited mobile devices screen since they are modals and only temporarily overlay content after which they get dismissed.

Example 1: Flutter Bottomsheet Dialog Example

Let's look at a simple bottomsheet dialog. The demo of this example is shown below:

Step 1: Dependencies

No third part dependencies are needed for this project.

Step 2: Create Model Item

The model in this case will be a List item. You start by creating a file known as ListTileModel.dart, then import the material package and define a function that will return the ListTile object.

This function will take an icon, icon color, title of the tile and context as parameters. Here is the full code:

ListTileModel.dart

import 'package:flutter/material.dart';
ListTile getListTile(icon, iconColor, titleText, context) {
  return new ListTile(
    leading: new Container(
      width: 4.0,
      child: Icon(
        icon,
        color: iconColor,
        size: 24.0,
      ),
    ),
    title: new Text(
      titleText,
      style: TextStyle(
        fontSize: 14.0,
        fontWeight: FontWeight.w700,
      ),
    ),
    onTap: () => Navigator.of(context).pop(),
  );
}

Step 3: Create HomePage

The homepage will render a button that when clicked shows a diaogsheet.

Start by creating a file named home.dart.

Then proceed by importing both the material package and the ListTileModel.dart already created earlier:

import 'package:flutter/material.dart';
import 'package:project/models/ListTileModel.dart';

Now create a stateful widget called MyHomePage. This will extend the StatefulWidget class. It will host final variable known as title which will represent the title of the page.

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

Now you need to create the State for that MyHomepage widget. This class will extend the State class and will override the build() method. Such a method typically builds a widget and returns it. In this case the built widget will be the full homepage and will contain other components like the appbar and the body:

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        backgroundColor: Colors.redAccent,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new RaisedButton(
              child: Text(
                "Bottom Sheet",
                style: TextStyle(fontSize: 20),
              ),
              onPressed: () {
                _openBottomSheet(context);
              },
            )
          ],
        ),
      ),
    );
  }
}

Lastly, create a function responsible for building or creating and showing the bottomsheet dialog. Below is the code for that:

  showModalBottomSheet(
    context: context,
    builder: (builder) {
      return new Container(
        padding: EdgeInsets.all(5.0),
        child: new Wrap(
          children: <Widget>[
            getListTile(Icons.more, Colors.black45, "More", context),
            getListTile(Icons.favorite, Colors.pink, "Favourites", context),
            getListTile(Icons.account_box, Colors.blue, "Profile", context),
            new Divider(
              thickness: 2.0,
              height: 10.0,
            ),
            getListTile(Icons.exit_to_app, null, "Logout", context),
          ],
        ),
      );
    },
  );
}

Here is the full code for whole home.dart:

home.dart

import 'package:flutter/material.dart';
import 'package:project/models/ListTileModel.dart';
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),
        backgroundColor: Colors.redAccent,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new RaisedButton(
              child: Text(
                "Bottom Sheet",
                style: TextStyle(fontSize: 20),
              ),
              onPressed: () {
                _openBottomSheet(context);
              },
            )
          ],
        ),
      ),
    );
  }
}
void _openBottomSheet(context) {
  showModalBottomSheet(
    context: context,
    builder: (builder) {
      return new Container(
        padding: EdgeInsets.all(5.0),
        child: new Wrap(
          children: <Widget>[
            getListTile(Icons.more, Colors.black45, "More", context),
            getListTile(Icons.favorite, Colors.pink, "Favourites", context),
            getListTile(Icons.account_box, Colors.blue, "Profile", context),
            new Divider(
              thickness: 2.0,
              height: 10.0,
            ),
            getListTile(Icons.exit_to_app, null, "Logout", context),
          ],
        ),
      );
    },
  );
}

Step 4: Create main class

The main class in this case is the class containing the main method. Such a method is the starting point of a dart programming.

The class is defined below and extends the StatefulWidget:

StatefulWidget.dart

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Bottom Sheet',
      theme: ThemeData(
        primarySwatch: Colors.red,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Bottom Sheet'),
    );
  }
}

Then you run it in the main method:

void main() {
  runApp(MyApp());
}

Here is the full code for the main.dart:

main.dart

import 'package:flutter/material.dart';
import 'package:project/home.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Bottom Sheet',
      theme: ThemeData(
        primarySwatch: Colors.red,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Bottom Sheet'),
    );
  }
}

Run

Lastly run the project.

Reference

Below are reference links for this project

No.	Link
1.	Download code
2.	Follow code author