How to Implement Bottom Sheet Modal in Flutter

In this tutorial, you will learn how to implement a bottom sheet modal in Flutter. A bottom sheet modal is a great way to display additional content or options to users without interrupting the main app flow. 

We will create a custom widget that will be displayed as a modal bottom sheet when triggered.

Flutter Bottom Sheet Modal Tutorial - Build a Custom Modal in Flutter

import 'package:flutter/material.dart';

class BottomSheetModel extends StatefulWidget {

  const BottomSheetModel({super.key});

  @override
  BottomSheetModelState createState() => BottomSheetModelState();
}

class BottomSheetModelState extends State<BottomSheetModel> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: const Center(
        child: Text("Tap button \nbelow", textAlign : TextAlign.center),
      ),
      floatingActionButton: FloatingActionButton(
        heroTag: "fab",
        backgroundColor: Theme.of(context).colorScheme.primary,
        elevation: 3,
        child: const Icon(Icons.arrow_upward, color: Colors.white,),
        onPressed: () {
          showSheet(context);
        },
      ),
    );
  }
}

void showSheet(context) {
  // Show a modal bottom sheet with the specified context and builder method.
  showModalBottomSheet(context: context, builder: (BuildContext bc) {
    return Container(
      // Define padding for the container.
      padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 15),
      // Create a Wrap widget to display the sheet contents.
      child: Wrap(
        spacing: 60, // Add spacing between the child widgets.
        children: <Widget>[
          // Add a container with height to create some space.
          Container(height: 10),
          // Add a text widget with a title for the sheet.
          const Text("Flutter Material 3", style: TextStyle(fontSize: 24, fontWeight: FontWeight.w500),),
          Container(height: 10), // Add some more space.
          // Add a text widget with a long description for the sheet.
          Text(
            'Flutter is an open-source UI software development kit created by Google. It is used to develop cross-platform applications for Android, iOS, Linux, macOS, Windows, Google Fuchsia, and the web from a single codebase.',
            style: TextStyle(
                color: Colors.grey[600], // Set the text color.
                fontSize: 18 // Set the text size.
            ),
          ),
          Container(height: 10), // Add some more space.
          // Add a row widget to display buttons for closing and reading more.
          Row(
            mainAxisAlignment: MainAxisAlignment.end, // Align the buttons to the right.
            children: <Widget>[
              // Add a text button to close the sheet.
              TextButton(
                style: TextButton.styleFrom(foregroundColor: Colors.transparent,), // Make the button text transparent.
                onPressed: (){
                  Navigator.pop(context); // Close the sheet.
                },
                child: Text("CLOSE", style: TextStyle(color: Theme.of(context).colorScheme.primary)), // Add the button text.
              ),
              // Add an elevated button to read more.
              ElevatedButton(
                style: ElevatedButton.styleFrom(backgroundColor: Theme.of(context).colorScheme.primary,), // Set the button background color.
                onPressed: (){}, // Add the button onPressed function.
                child:  Text("Read More", style: TextStyle(color: Theme.of(context).colorScheme.inversePrimary)), // Add the button text.
              )
            ],
          )
        ],
      ),
    );
  });
}

..

• Import the necessary material.dart package to use widgets and other UI elements in the code.

• Create a stateful widget named BottomSheetModel that extends StatefulWidget. The purpose of this widget is to create a button that when clicked, will display a modal bottom sheet

• Create a state class named BottomSheetModelState that extends State<BottomSheetModel>. The purpose of this class is to handle the state of the BottomSheetModel widget.

• Override the build method to return a Scaffold widget that contains a Center widget with a Text widget as its child. The purpose of this is to display a button that prompts the user to open the bottom sheet.

• Add a floatingActionButton to the Scaffold widget with an onPressed function that calls the showSheet function when the button is pressed.

• Define the showSheet function that displays a modal bottom sheet when called. This function takes a context parameter that is required to create the modal bottom sheet.

• Use the showModalBottomSheet method to create a modal bottom sheet with the specified context and builder method.

• Inside the builder method, create a Container widget that defines the padding for the contents of the bottom sheet.

• Add a Wrap widget to display the contents of the bottom sheet.
• Add a Container widget with a height of 10 to create some space.
• Add a Text widget with a title for the bottom sheet.
• Add another Container widget with a height of 10 to create some more space.
• Add a Text widget with a long description for the bottom sheet.
• Add another Container widget with a height of 10 to create some more space.
• Add a Row widget to display two buttons: one to close the bottom sheet and another to read more.
• Use MainAxisAlignment.end to align the buttons to the right.
• Add a TextButton widget to close the bottom sheet. Use the Navigator.pop method to close the bottom sheet when the button is pressed.
• Add an ElevatedButton widget to read more. Use the onPressed function to define what happens when the button is pressed.
• Add the necessary styles and properties to the buttons to make them look and function properly.

I hope this explanation helps you understand the code better! Let me know if you have any further questions.

..