CODEWITHSUNDEEP
flutterflutter-layout
BOOnZ
BOOnZ

Reputation: 848

Reduce height of DrawerHeader

Currently the drawer header occupies a fixed height. How can I reduce the height of the drawer header to fit the content of its children?

    child: ListView(
      padding: EdgeInsets.zero,
      children: [
        DrawerHeader(
          child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: [
                Icon(Icons.account_box),
                Text(
                  'Name Here',
                  style: Theme.of(context).textTheme.headline5,
                ),
                Text('Email Here'),
              ]),
          decoration: BoxDecoration(
            color: Theme.of(context).accentColor,
          ),
        ),

Upvotes: 0

Views: 1016

Answers (3)

AddWeb Solution Pvt Ltd
AddWeb Solution Pvt Ltd

Reputation: 21691

You wrap this with a Container widget

Container( height: 140.0,

            child: DrawerHeader(

              child: Column(

                  crossAxisAlignment: CrossAxisAlignment.start,

                  mainAxisSize: MainAxisSize.min,
                  children: [

                    Icon(Icons.account_box),

                    Text(

                      'Name Here',

                      style: Theme.of(context).textTheme.headline5,

                    ),

                    Text('Email Here'),

                  ]),

              decoration: BoxDecoration(
                color: Colors.blue[300],
              ),
            )),

Upvotes: 0

Abhijith
Abhijith

Reputation: 2327

You can wrap DrawerHeader this with a Container widget.

   Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            Container(
              height: 120,
              child: DrawerHeader(
                child: Column(
                  children: [
                    Icon(Icons.account_box),
                    Text(
                      'Name Here',
                      style: Theme.of(context).textTheme.headline5,
                    ),
                    Text('Email Here'),
                  ],
                ),
                decoration: BoxDecoration(
                  color: Colors.blue,
                ),
              ),
            ),
          ],
        ),
      ),

Upvotes: 1

Abdullah.ch
Abdullah.ch

Reputation: 196

You can wrap the header inside SizedBox or Container. One suggestion: Wrap the header inside column, not in the list view because header should not be scrollable. Make listview the second child of column.

Upvotes: 0

Related Questions