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

Question

showModalBottomSheet does not provide any styling or decorations. I want to create something like the Google Tasks bottomsheet.

Answer 1

UPDATED ON 2019-08-05

You can now do it using the default showModalBottomSheet method that now supports adding a ShapeBorder and also backgroundColor!

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

--

Instead of overriding the entire theme of the app (which caused problems in various parts of my app) as suggested by other answers, I decided to take a look at the implementation for showModalBottomSheet and find the problem myself. Turns out that all that was needed was wrapping the main code for the modal in a Theme widget that contains the canvasColor: Colors.transparent trick. I also made it easier to customize the radius and also the color of the modal itself.

You can use either the package on pub or a gist containing the same code. Don't forget to import the proper package/file.

showRoundedModalBottomSheet(     context: context,     radius: 20.0,  // This is the default     color: Colors.white,  // Also default     builder: (context) => ???, );