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:
If we click the “Show Bottom Sheet” button, we will see the message at the bottom of the screen. which is shown below
Thank you for reading the Guide about How to implement the BottomSheet in Flutter.