Dynamic Height BottomSheet in Flutter

When it comes to providing useful UI features, Flutter doesn’t hold back. One such feature that comes in handy in many scenarios is the BottomSheet. This is an easily adjustable slide-up panel that can be used to display additional information or provide extra choices to the user.

However, you may come across situations where you need to customize the BottomSheet’s height dynamically based on the UI’s state or another component’s size. In this post, we will look at how we can create a BottomSheet with a dynamic height that expands until the bottom of a specific component.

Prerequisites

This guide assumes you have a basic understanding of Flutter and Dart. You should be familiar with creating Flutter widgets and have a grasp of how keys work in Flutter.

Steps to Achieve a Dynamic Height BottomSheet

Step 1: Prepare Your Component

First, let’s define a GlobalKey for our component of interest. We are going to use this key to get the size and position of the component.

final GlobalKey secondComponentKey = GlobalKey();

Next, we need to assign this key to our component. Here, we wrap the component in a Container widget and assign our key to it.

Container(
  key: secondComponentKey,
  child: YourSecondComponent(),
),

Step 2: Implement the BottomSheet Display Function

Now we need to write a function to display our BottomSheet when needed. The key thing to note here is how we calculate the height of the BottomSheet.

We get the RenderBox of the component, which provides us the component’s size and position. Then, we calculate the height of the BottomSheet as the difference between the total height of the screen and the y-position of the component.

Here’s how we do it:

void showCustomBottomSheet(BuildContext context, GlobalKey key) {
  final RenderBox renderBox = key.currentContext.findRenderObject();
  final componentPosition = renderBox.localToGlobal(Offset.zero);

  double sheetHeight = MediaQuery.of(context).size.height - componentPosition.dy;

  showModalBottomSheet(
    context: context,
    builder: (context) {
      return Container(
        height: sheetHeight,
        color: Colors.white,
        child: Center(
          child: Text('This is a custom BottomSheet'),
        ),
      );
    },
  );
}

Here I am subtracting componentPosition.dy from the screen height. You can choose to do some different calculations here according to your need.

For example you can do something like :

double sheetHeight = 20 + componentPosition.dy;

This will make the BottomSheet lower (lesser height than the one before)

Step 3: Invoke the BottomSheet

Finally, we need to call our showCustomBottomSheet function when we want to display the BottomSheet. For instance, let's display the BottomSheet when an IconButton is tapped.

IconButton(
  icon: Icon(Icons.info),
  onPressed: () => showCustomBottomSheet(context, secondComponentKey),
)

This will show a BottomSheet whose height is just until the bottom of our target component. It won’t cover or hide the component, providing a seamless user experience.

Conclusion

That’s it! We have successfully created a dynamically-sized BottomSheet based on the position of a specific component in Flutter.

By leveraging Flutter’s capabilities and understanding of its widget tree, we can create powerful, highly-customized user interfaces.

Remember, the techniques illustrated in this guide can be modified according to your specific use-cases. So, explore, experiment, and make your Flutter UI as user-friendly as possible!

Happy coding!