Change Flutter Drawer corner radius

user_6254350 0
Viewed 8752

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?

flutter
4 Answers

You can try to wrap Drawer in ClipRRect

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

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

user_62543500

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.

user_119090030

This is how you should behave.

 drawer: ClipRRect(
      borderRadius: BorderRadius.only(
          topRight: Radius.circular(35), bottomRight: Radius.circular(35)),
      child: Drawer(...),),
user_103002020
Related