Joseph Arriaza
Joseph Arriaza

Reputation: 13774

Is there a way to set Height to a Drawer Header?

I'm looking for a way to set the height to a Drawer Header. I have this DrawerHeader:

DrawerHeader(
  child: Text('Categories', style: TextStyle(color: Colors.white)),
    decoration: BoxDecoration(
      color: Colors.black
    ),
    margin: EdgeInsets.all(0.0),
  )
)

But I don't see a way to set the Height to the Drawer, that's too big.

Upvotes: 66

Views: 52530

Answers (4)

Shudipto Trafder
Shudipto Trafder

Reputation: 2082

You wrap this with a SizedBox widget.

const SizedBox(
   height: 64.0,
   child: DrawerHeader(
       child: Text('Categories', style: TextStyle(color: Colors.white)),
       decoration: BoxDecoration(color: Colors.black),
       margin: EdgeInsets.all(0.0),
       padding: EdgeInsets.all(0.0),
    ),
);

Upvotes: 139

Samuel Nde
Samuel Nde

Reputation: 2743

Like the previous answers, I would put my Drawer in a SizedBox. Since it is also important for me to controll where the Drawer appears, which by default should be the centerLeft, I would make the child of the box an Align with an alignment = Alignment.topLeft. See example below.

Align(
  alignment: Alignment.topLeft,
  child: SizedBox(
    height: 300,//Your height goes here
    child: Drawer(
      backgroundColor: Colors.white, //Your background color goes here.
      child: ListView(
        children: [ ... ],
      ),
    ),
  ),
);

Upvotes: 0

Dragutin Djokovic
Dragutin Djokovic

Reputation: 31

Use SizedBox.

A Container is a heavier Widget than a SizedBox, and as bonus, SizedBox has a const constructor.

Upvotes: 3

tvc12
tvc12

Reputation: 228

You can use SizedBox widget for resize height DrawerHeader

new SizedBox(
   height : 120.0, 
   child  : new DrawerHeader(
      child  : new Text('Categories', style: TextStyle(color: Colors.white)),
      decoration: new BoxDecoration(color: Colors.black),
      margin : EdgeInsets.zero,
      padding: EdgeInsets.zero
   ),
);

Upvotes: 25

Related Questions