4 min read

The BottomSheet widget in Flutter is used as an alternative to the menu or dialog. When it opens up, it appears over the existing UI and doesn’t allow users to interact with the UI elements beneath it. After adding the Bottom Sheet to your page, you may want to have a rounded or circular corner at the top (both left and right) side of the Bottom Sheet. So in this tutorial, we’ll learn the easy way to create the Bottom Sheet with rounded corners in Flutter.

We’ll create a Bottom Sheet with rounded corners that looks like this:

Here’s what we’ll cover:

The Problem

When you add the Bottom Sheet to your page and open it using the showModalBottomSheet function, you see the Bottom Sheet opens up with a rectangle in shape. That means it doesn’t have rounded or circular corners at any of the sides by default.

Code with Problem: 

ElevatedButton(
  onPressed: () {
    showModalBottomSheet(
        context: context,
        builder: (context) {
          return SizedBox(
            height: 200,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: const <Widget>[
                  ...
              ],
            ),
          );
        });
  },
  child: const Text(
    'Choose Option',
    style: TextStyle(fontSize: 24),
  ),
)

Output:

Steps to Create Bottom Sheet with Rounded Corners

To make the Bottom Sheet with rounded corners, simply add the shape parameter inside the showModalBottomSheet function and assign the RoundedRectangleBorder() with the borderRadius property set to BorderRadius.vertical(top: Radius.circular(25.0),),.

Here are the detailed steps:

Step 1: Inside the showModalBottomSheet() function, Add the shape parameter and assign the RoundedRectangleBorder().

Step 2: Inside the RoundedRectangleBorder(), Add the borderRadius parameter and assign the BorderRadius.vertical().

Step 3: Inside the BorderRadius.vertical(), Add the top parameter and assign the Radius.circular(25.0).

Code Example: 

ElevatedButton(
  onPressed: () {
    showModalBottomSheet(
        context: context,
        shape: const RoundedRectangleBorder( // <-- SEE HERE
          borderRadius: BorderRadius.vertical( 
            top: Radius.circular(25.0),
          ),
        ),
        builder: (context) {
          return SizedBox(
            height: 200,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: const <Widget>[
                ...
              ],
            ),
          );
        });
  },
  child: const Text(
    'Choose Option',
    style: TextStyle(fontSize: 24),
  ),
)

Note: The above code will create a rounded/circular corner at the top left and top right side of the bottom sheet.

Output:

For more insights into creating immersive user interfaces in Flutter, we recommend reading our blog post on Showdialog Flutter. See how easy it is to implement custom alert dialogs.

Adding Rounded Corners to only One Side

In a very rare case, you may want to have a rounded corner to any one side of the bottom sheet.

Here’s how you add the rounded corner to the only top left side of the Bottom Sheet:

  • Inside the RoundedRectangleBorder(), Add the borderRadius parameter and assign the BorderRadius.only().
  • Inside the BorderRadius.only(), Add the topLeft parameter and assign the Radius.circular(25.0).

Code Example: 

ElevatedButton(
  onPressed: () {
    showModalBottomSheet(
        context: context,
        shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.only( // <-- SEE HERE
            topLeft: Radius.circular(25.0),
          ),
        ),
        builder: (context) {
          return SizedBox(
            height: 200,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: const <Widget>[
                ...
              ],
            ),
          );
        });
  },
  child: const Text(
    'Choose Option',
    style: TextStyle(fontSize: 24),
  ),
)

Output:

Why I Can’t See Rounded Corners

Sometimes even after you have copied the exact code, you may not see the rounded corners at all. In this situation, you should check for the Container widget (inside the builder) with the color property. 

Solution: If you spot such Container (with Color), replace it with the SizedBox and assign the backgroundColor property inside the showModalBottomSheet() function.

Here’s how the culprit looks like:

Final Code with Background Color: 

showModalBottomSheet(
    context: context,
    shape: const RoundedRectangleBorder(
      borderRadius: BorderRadius.vertical(
        top: Radius.circular(25.0),
      ),
    ),
    backgroundColor: Colors.amberAccent, // <-- SEE HERE
    builder: (context) {
      return SizedBox(
        height: 200,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: const <Widget>[
            ...
          ],
        ),
      );
    });

Output:

Conclusion

In this tutorial, we learned how to make the Bottom Sheet with rounded corners in Flutter with practical examples. We also saw how to add rounded corners to only one side of the bottom sheet and what to do when you don’t see the rounded corners in the Bottom Sheet.

Would you like to check other interesting Flutter tutorials?

Change Elevated Button Color in Flutter (Ultimate Guide)
7 Steps to Fix Dart SDK is not Configured in Flutter