How to create a modal bottomsheet with circular corners in Flutter?

In this blog post, we will discuss how to create a modal bottom sheet in Flutter with circular corners using the default showModalBottomSheet method.

The Problem

When trying to add a modal bottom sheet to an app in Flutter, it can be frustrating when you want to customize its appearance. One common requirement is to give it a rounded corner look. However, by default, the showModalBottomSheet method does not support this directly.

The Solution

Fortunately, the default showModalBottomSheet method has been updated in recent versions of Flutter to allow for customizing its shape and background color. This means you can easily create a modal bottom sheet with circular corners using the following code:

showModalBottomSheet(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.vertical(top: Radius.circular(10.0)),
  ),
  backgroundColor: Colors.white,
  ...
);

This will add a rounded top to your modal bottom sheet, giving it a circular corner look. You can customize the radius and color to suit your app’s style.

Overriding the entire theme of the app?

Some solutions on other platforms might suggest overriding the entire theme of the app to achieve this effect. However, this approach can cause problems in various parts of your app, making it harder to maintain.

A better way is to take a closer look at the implementation for showModalBottomSheet and find the problem yourself. In many cases, all that’s needed is a simple trick involving a Theme widget with canvasColor set to Colors.transparent.

Customizing the modal bottom sheet

To make it easier to customize the radius and color of your modal bottom sheet, you can use a package or gist containing the same code. This will allow you to easily modify the appearance of your modal without affecting other parts of your app.

showRoundedModalBottomSheet(
  context: context,
  radius: 20.0, 
  color: Colors.white, 
  builder: (context) => ???,
);

Or you can use the following code snippet:

showModalBottomSheet(
  context:context
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.vertical(
      top: Radius.circular(20),
    ),
  ),
  clipBehavior: Clip.antiAliasWithSaveLayer,
)

Conclusion

In this blog post, we have discussed how to create a modal bottom sheet with circular corners in Flutter using the default showModalBottomSheet method and some simple customizations.

By following these steps, you can easily add a rounded corner look to your app’s modal bottom sheets without overriding the entire theme of your app. This will make it easier for users to interact with your app while maintaining its visual appeal.