Change Flutter Drawer corner radius

Question

I am using Drawer with a BottomAppBar. When I click the menu icon it shows the Drawer. I want to change the top left and top right corner radius of Flutter Drawer. Is it possible to customize the corner radius?

Answer 1

You can try to wrap Drawer in ClipRRect

ClipRRect(
  borderRadius: BorderRadius.vertical(top: Radius.circular(4.0)),
  child: Drawer(...),
)

Answer 2

Found the solution. Just have to add canvasColor: Colors.transparent to the MaterialApp theme and it will work.

Answer 3

Drawer in Flutter already have a shape property which can be used to change the shape of drawer. Below is the code to change corner radius of Drawer:

         Drawer(
            shape: const RoundedRectangleBorder(
              borderRadius: BorderRadius.only(
                  topRight: Radius.circular(20),
                  bottomRight: Radius.circular(20)),
            ),
            child: .....
          ),

There is no need of wrapping drawer around any widget.