Flutter – BottomSheet Class

21 Jun, 2022
Bottom Sheet is one of the popular ways to show various options on the screen. This helps the user to switch to a new screen. You will see this bottom sheet in most of the app to add data or add some information such as address or ticket number. In this article, we are going to see how to implement the Bottom Sheet in our Flutter App.
BottomSheet({Key key,
AnimationController animationController,
bool enableDrag: true,
BottomSheetDragStartHandler onDragStart,
BottomSheetDragEndHandler onDragEnd,
Color backgroundColor,
double elevation,
ShapeBorder shape,
Clip clipBehavior,
@required
VoidCallback onClosing,
@required 
WidgetBuilder builder})
backgroundColor: It is used to give background color to the bottom sheet.
elevation: It is used to give elevation to our bottom sheet.
builder: It provides a builder for the contents of the sheet.
clipBehaviour: It is used to clip the content of the sheet as specified.
enableDrag: If true, the bottom sheet can be dragged up and down and dismissed by swiping downwards.
hashCode: It represents the hash code of the object.
key: It is used to handle how one widget replaces another widget in the tree. 
onClosing: Used to assign action while the bottom sheet is closing.
onDragEnd: It is called when the user stops dragging the bottom sheet.
onDragStart: It is called when the user starts dragging the bottom sheet.
runTimeType: A representation of the runtime type of the object.
shape: It defines the shape of the bottom sheet.
Now let’s look into the implementation of the Bottom sheet. To Implement the Bottom Sheet in Flutter you have to follow the following steps:
Step 1: Navigate to main.dart() file and return Material App()
First, we have declared MyApp() in runApp in main function. Then we created StatefullWidget for MyApp in which we have returned MaterialApp(). In this MaterialApp() we have given the title of our App and then declared the theme of our App as Dark Theme. Then we have given our first screen or slider app in home: HomePage()
Dart
import 'package:flutter/material.dart'; void main() {  runApp(const MyApp());} class MyApp extends StatelessWidget {  const MyApp({Key? key}) : super(key: key);   // This widget is the root of your application.  @override  Widget build(BuildContext context) {    return MaterialApp(      debugShowCheckedModeBanner: false,      title: 'Flutter Demo',      theme: ThemeData(        primarySwatch: Colors.green,      ),      //First Screen of our App      home: HomePage(),    );  }}
Create a StatefulWidget that provides a base structure to the application using the below code. In this code firstly we have created StatefulWidget for HomePage(). And in this HomePage() we have returned Scaffold() Widget.
Dart
class HomePage extends StatefulWidget {  const HomePage({Key? key}) : super(key: key);   @override  // ignore: library_private_types_in_public_api  _HomePageState createState() => _HomePageState();} class _HomePageState extends State<HomePage> {  @override  Widget build(BuildContext context) {    return const Scaffold();  }}
Step 2: Build the Bottom Sheet
In this Scaffold Widget, we have given appbar in which we have given the title of an Appbar. After that in the body, we have declared a Container() which is wrapped with Center Widget and given a sample text as “Hello”.
Dart
class HomePage extends StatefulWidget {  const HomePage({Key? key}) : super(key: key);   @override  // ignore: library_private_types_in_public_api  _HomePageState createState() => _HomePageState();} class _HomePageState extends State<HomePage> {  @override  Widget build(BuildContext context) {    return Scaffold(      //Appbar along with Title      appBar: AppBar(        title: const Text("Bottom Sheet"),      ),      body:Center(                 //Sample Text Written in Center of Screen        // ignore: avoid_unnecessary_containers        child: Container(          child: const Text("Hello"),        ),      ),    );  }}
Step 3: Create and add a FloatingAction Button
Now create a Floating Action Button, and then we have assigned floatingactionButton and given addition icon on this button. And in the on Pressed method, we have declared showModalBottomSheet(). In then, we have given Container widget in it which is wrapped in SingleChildScrollView() widget. Which is used to scroll the content in the bottom sheet. Again we have declared a Container() for the bottom sheet in which we have given border-radius to the top Right and top Left corner to make this Container circular.
Dart
//Floating Action Button      floatingActionButton: FloatingActionButton(        child: const Icon(Icons.add, color: Colors.white),        onPressed: () {          showModalBottomSheet(              context: context,              builder: (context) {                //Scrolling given for content in Container()                return SingleChildScrollView(                    child: Container(                        padding: EdgeInsets.only(                            bottom: MediaQuery.of(context).viewInsets.bottom),                        child: Container(                          padding: const EdgeInsets.all(20),                          decoration: const BoxDecoration(                            borderRadius: BorderRadius.only(                              topRight: Radius.circular(20),                              topLeft: Radius.circular(20),                            ),                          ),                        )));              });        },      ),
In this Container() we have declared Column() widget in which we have given its children’s.First we added text heading in the Container(). And after that we added TextField(). In this TextField() we have given InputDecoration() which is used to declare the hint text. Then we added border as OutLineInputBorder() which is used to to give border side color. Also we can make TextField circular by adding border radius in OutlineInputBorder(). After we have given a RaisedButton() in which we have given text written on the button and color of the button.
Dart
//Create a Column to display it's content                   padding: const EdgeInsets.all(20),                   decoration: const BoxDecoration(                     borderRadius: BorderRadius.only(                       topRight: Radius.circular(20),                       topLeft: Radius.circular(20),                     ),                   ),                   //Create a Column to display it's content                   child: Column(                     children: [                       const Text(                         "Add Data",                         style: TextStyle(                             fontWeight: FontWeight.w600,                             color: Colors.green,                             fontSize: 20),                       ),                       const SizedBox(height: 10.0),                       // TextField for giving some Input                       const TextField(                         decoration: InputDecoration(                           border: OutlineInputBorder(                             borderSide: BorderSide(color: Colors.green),                           ),                           hintText: "Add Item",                           hintStyle: TextStyle(color: Colors.grey),                         ),                       ),                       const SizedBox(height: 10),                        //Button for adding items                       ElevatedButton(                         onPressed: null,                         style: ButtonStyle(                             backgroundColor:                                 MaterialStateProperty.all(Colors.red),                             textStyle: MaterialStateProperty.all(                                 const TextStyle(fontSize: 30))),                         child: const Text("Add"),                       )                       // RaisedButton is deprecated                       // Instead Use ElevatedButton                        // RaisedButton(                       //   color: Colors.grey,                       //   onPressed: null,                       //   child: Text(                       //     "ADD",                       //     style: TextStyle(color: Colors.white),                       //   ),                       // )                     ],                   ),                 ),
Full Code
Dart
import 'package:flutter/material.dart'; void main() {  runApp(const MyApp());} class MyApp extends StatelessWidget {  const MyApp({Key? key}) : super(key: key);   // This widget is the root of your application.  @override  Widget build(BuildContext context) {    return MaterialApp(      debugShowCheckedModeBanner: false,      title: 'Flutter Demo',      theme: ThemeData(        primarySwatch: Colors.green,      ),      //First Screen of our App      home: const HomePage(),    );  }} class HomePage extends StatefulWidget {  const HomePage({Key? key}) : super(key: key);   @override  // ignore: library_private_types_in_public_api  _HomePageState createState() => _HomePageState();} class _HomePageState extends State<HomePage> {  @override  Widget build(BuildContext context) {    return Scaffold(      //Appbar along with Title      appBar: AppBar(        title: const Text("Bottom Sheet"),      ),      body: Center(        //Sample Text Written in Center of Screen        // ignore: avoid_unnecessary_containers        child: Container(          child: const Text("Hello"),        ),      ), //Floating Action Button      floatingActionButton: FloatingActionButton(        child: const Icon(Icons.add, color: Colors.white),        onPressed: () {          showModalBottomSheet(              context: context,              builder: (context) {                //Scrolling given for content in Container()                return SingleChildScrollView(                  child: Container(                    padding: EdgeInsets.only(                        bottom: MediaQuery.of(context).viewInsets.bottom),                    child: Container(                      //Create a Column to display it's content                      padding: const EdgeInsets.all(20),                      decoration: const BoxDecoration(                        borderRadius: BorderRadius.only(                          topRight: Radius.circular(20),                          topLeft: Radius.circular(20),                        ),                      ),                      //Create a Column to display it's content                      child: Column(                        children: [                          const Text(                            "Add Data",                            style: TextStyle(                                fontWeight: FontWeight.w600,                                color: Colors.green,                                fontSize: 20),                          ),                          const SizedBox(height: 10.0),                          // TextField for giving some Input                          const TextField(                            decoration: InputDecoration(                              border: OutlineInputBorder(                                borderSide: BorderSide(color: Colors.green),                              ),                              hintText: "Add Item",                              hintStyle: TextStyle(color: Colors.grey),                            ),                          ),                          const SizedBox(height: 10),                           //Button for adding items                          ElevatedButton(                            onPressed: null,                            style: ButtonStyle(                                backgroundColor:                                    MaterialStateProperty.all(Colors.red),                                textStyle: MaterialStateProperty.all(                                    const TextStyle(fontSize: 30))),                            child: const Text("Add"),                          )                          // RaisedButton is deprecated                          // Instead Use ElevatedButton                           // RaisedButton(                          //   color: Colors.grey,                          //   onPressed: null,                          //   child: Text(                          //     "ADD",                          //     style: TextStyle(color: Colors.white),                          //   ),                          // )                        ],                      ),                    ),                  ),                );              });        },      ),    );  }}
Output:
ankit_kumar_
android
Flutter
Dart
Flutter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
ListView Class in Flutter
Flutter - Search Bar
Flutter - Dialogs
Flutter - FutureBuilder Widget
Flutter - Flexible Widget
Flutter Tutorial
Flutter - Search Bar
Flutter - Dialogs
Flutter - FutureBuilder Widget
Flutter - Flexible Widget