Skip to content
Related Articles

Related Articles

Improve Article
Flutter – BottomSheet Class
  • Difficulty Level : Medium
  • Last Updated : 17 Dec, 2020

Bottom Sheet is one of the popular way to show various options on the screen. Which helps user to switch to 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 Bottom Sheet in our Flutter App.

Constructor of BottomSheet Class:

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})

Properties of BottomSheet Class:

  • backgroundColor: It is used to give background color to 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 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 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 have created StatefullWidget for MyApp in which we have returned MaterialApp(). In this MaterialApp() we have given title of our App then declared the theme of our App as Dark Theme. Then we have given our first screen of or slider app in home: HomePage()

Dart




void main() {
  runApp(MyApp());
}
  
class MyApp extends StatelessWidget {
  // 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():

Create a StatefulWidget that provide 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 {
  @override
  _HomePageState createState() => _HomePageState();
}
  
class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold();

 

Step 2: Build the Bottom Sheet

In this Scaffold Widget we have given appbar in which we have given title of an Appbar. After that in body we have declared a Container() which is wrapped with Center Widget and given a sample text as “Hello”.

Dart




class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}
  
class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //Appbar along with Title
      appBar: AppBar(
        title: Text("Bottom Sheet"),
      ),
      body:Center(
          
        //Sample Text Written in Center of Screen
        child: Container(
          child: 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 bottom sheet in which we have given border radius to top Right and top Left corner to make this Container circular.

Dart




//Floating Action Button      
      floatingActionButton: FloatingActionButton(
        child: 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: EdgeInsets.all(20),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.only(
                      topRight: Radius.circular(20),
                      topLeft: Radius.circular(20),
                    ),
                  ),

Step 4: Create Column to display content

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
       child: Column(
         children: [
           Text("Add Data",style: TextStyle(fontWeight: FontWeight.w600,
                                            color: Colors.green,
                                            fontSize: 20),),
           SizedBox(height: 10.0),
           // TextField for giving some Input
           TextField(
             decoration: InputDecoration(
               border: OutlineInputBorder(
                 borderSide: BorderSide(color: Colors.green),
               ),
               hintText: "Add Item",
               hintStyle: TextStyle(color: Colors.grey),
             ),
           ),
           SizedBox(height: 10),
             
           //Button for adding items
           RaisedButton(
             color: Colors.grey,
             child: Text("ADD",style: TextStyle(color: Colors.white),
             ),
           )
         ],
       ),

Output:

Want a more fast-paced & competitive environment to learn the fundamentals of Android?
Click here to head to a guide uniquely curated by our experts with the aim to make you industry ready in no time!



My Personal Notes arrow_drop_up
Recommended Articles
Page :