How to Implement BottomSheet in Flutter

BottomSheet is a built-in widget in Flutter. It is very useful in many situations, such as when you want to present some information, display a menu, show a form with text fields, etc. The bottom sheet comes in handy if we want to display additional details or information in the available screen space. While the bottom sheet appears the user can’t interact with other components outside the bottom sheet. In this guide, we will discuss How to implement BottomSheet in Flutter. We can create a bottomsheet in two types of material design: Persistent and Modal. Persistent bottomsheet do not hide the screen content and focus on both sides.

Related Guide: How To Implement The AlertDialog In Flutter

Modal bottomsheet focuses more on bottomsheet rather than the main screen content. When the persistent button is tapped then the page will be pushed and the Persistent bottomsheet will be displayed. While in the case of a Modal bottomsheet, rather than a page push, bottomsheet will be displayed on the same page and is less complex than the persistent bottomsheet. We can use either of the bottomsheet as per our requirement. It can be used to perform a small task that does not require the whole new screen to be built

Some of the Properties used in BottomSheet are given below.

builder	for the contents of the sheet.
backgroundColor	To display background color.
elevation	Elevates the bottomsheet by increasing shadow
shape	The shape of the modal bottom sheet
clipBehavior	The content will be clipped according to this option
barrierColor	Color to display in the background after the modal bottom sheet is displayed.
isScrollControlled	Enable or disable scrolling
useRootNavigator	ensures that the root navigator is used to display the BottomSheet when set to true.
isDismissible	Specifies whether the user can dismiss the modal bottom sheet by tapping on the scrim.
enableDrag	specifies whether the bottom sheet can be dragged up and down and dismissed by swiping downwards
routeSettings	Sets the RouteSettings of the modal bottom sheet

Let’s take an example of how we can implement the BottomSheet in our flutter application.

we will create a new model name Fruit that includes the String of name description and the URL of that class name Fruit and store it into a new file inside the lib folder name fruit_model.dart.

class Fruit {
  String name, desc, url;
  Friut({
    required this.name,
    required this.desc,
    required this.url,
  });
}

Now we will again create a new file name as fruit_data.dart that includes the dummy data.

import 'package:vlogpost/model/student.dart';

List<Friut> friuts= [
  Friut(
      name: 'Apple',
      desc:
          'An apple is an edible fruit produced by an apple tree (Malus domestica). Apple trees are cultivated worldwide and are the most widely grown species in the',
      url:
          'assets/apple.jpg'),
  Friut(
      name: 'Banana',
      desc:
          'banana is an elongated, edible fruit - botanically a berry - produced by several kinds of large herbaceous flowering plants in the genus Musa.',
      url:
          'assets/banana.jpg'),
  Friut(
      name: 'Grape',
      desc:
          'The grapefruit (Citrus × paradisi) is a subtropical citrus tree known for its relatively large, sour to semi-sweet, somewhat bitter fruit.',
      url:
          'assets/grape.jpg'),
  Friut(
      name: 'Mango',
      desc:
          'A mango is an edible stone fruit produced by the tropical tree Mangifera indica which is believed to have originated from the region between northwestern ...',
      url:
          'assets/mango.jpg'),
  Friut(
      name: 'Orange',
      desc:
          'An orange is a fruit of various citrus species in the family Rutaceae ); it primarily refers to Citrus × sinensis, which is also called sweet orange',
      url:
          'assets/orange.jpg'),
  Friut(
      name: 'WaterMelon',
      desc:
          'Watermelon is grown in favorable climates from tropical to temperate regions worldwide for its large edible fruit',
      url:
          'assets/watermelon.jpg'),
  Friut(
      name: 'Papaya',
      desc:
          'Papayas grow in tropical climates and are also known as papaws or pawpaws. Their sweet taste, vibrant color, and the wide variety of health benefits they ',
      url:
          'assets/papaya.jpg'),
  Friut(
      name: 'Coconut',
      desc:
          'A coconut is the edible fruit of the coconut palm (Cocos nucifera), a tree of the palm family. ',
      url:
          'assets/coconut.jpg'),
  
];

In the above line of code, I have used the local image name as an assets folder to store the image of fruits. for these, I have taken different fruit images which are shown below.

The Next Step is to include the assets folder inside the pubspec. yaml which is shown below

# To add assets to your application, add an assets section, like this:
  assets:
    - assets/

Now let’s implement the code in the Flutter application.

import 'package:flutter/material.dart';
import 'package:vlogpost/data/food_data.dart';
import 'package:vlogpost/model/student.dart';

class BotttomShetScreen extends StatefulWidget {
  const BotttomShetScreen({Key? key, required this.widgetContext})
      : super(key: key);

  final BuildContext widgetContext;
  @override
  State<BotttomShetScreen> createState() => _BotttomShetScreenState();
}

class _BotttomShetScreenState extends State<BotttomShetScreen> {
  late List<Fruit> fruitslist;
  @override
  void initState() {
    fruitslist = fruits;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Bottom Sheet '),
        centerTitle: true,
        backgroundColor: Colors.amberAccent,
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Center(
            child: ElevatedButton(
              onPressed: () {
                showModalBottomSheet(
                    backgroundColor: Colors.transparent,
                    context: widget.widgetContext,
                    isScrollControlled: true,
                    clipBehavior: Clip.antiAlias,
                    shape: const RoundedRectangleBorder(
                        borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(30),
                      topRight: Radius.circular(30),
                    )),
                    builder: (context) {
                      return ShowListTileFruits(fruitslist: fruitslist);
                    });
              },
              child: const Text('Show Bottom Sheet'),
            ),
          )
        ],
      ),
    );
  }
}

class ShowListTileFruits extends StatelessWidget {
  const ShowListTileFruits({
    Key? key,
    required this.fruitslist,
  }) : super(key: key);

  final List<Fruit> fruitslist;

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        shrinkWrap: true,
        itemCount: fruitslist.length,
        itemBuilder: ((context, index) {
          return Container(
            color: Colors.grey,
            child: ListTile(
              title: Text(fruitslist[index].name,
                  style: const TextStyle(fontSize: 18)),
              subtitle: Text(fruitslist[index].desc,
                  maxLines: 1,
                  style: const TextStyle(
                    fontSize: 14,
                  )),
              leading: CircleAvatar(
                radius: 30,
                backgroundImage: AssetImage(fruitslist[index].url),
              ),
            ),
          );
        }));
  }
}

Meanwhile, when we run this application in the emulator or device, we should get the UI similar to the screenshot below: