CODEWITHSUNDEEP
flutter
bnayagrawal
bnayagrawal

Reputation: 1154

Change Flutter Drawer corner radius

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?

Upvotes: 18

Views: 21954

Answers (4)

Priyansh jain
Priyansh jain

Reputation: 1422

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.

Upvotes: 42

Javid Sattar
Javid Sattar

Reputation: 846

This is how you should behave.

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

Upvotes: 6

bnayagrawal
bnayagrawal

Reputation: 1154

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

Upvotes: 8

Andrii Turkovskyi
Andrii Turkovskyi

Reputation: 29448

You can try to wrap Drawer in ClipRRect

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

Upvotes: 25

Related Questions