Flutter - Fix Drawer Header

Question

Following this link Add a Drawer to a screen I have created a drawer.

Following is my piece of code:

// FUNCTION CONTAINING LEFT SIDE MENU ITEMS
  _drawerList() {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: [
          DrawerHeader(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  'John Doe',
                ),
              ],
            ),
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage('assets/images/menu_bg.png'),
                fit: BoxFit.cover,
              ),
            ),
          ),
          ListTile(
            // Some Code
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        // Some Code
        drawer: Drawer(
          child: _drawerList(),
        ),
        // Some Code
  }
}

Is there any way I can fix "DrawerHeader" so that it doesn't move with the drawer and list view.

P.S. I don't want to hold ListView. I just want to hold or fix "DrawerHeader".

user_7674734 · Answer

Yes, move it out of the ListView widget and use Column to hold both DrawerHeader and ListView.

With items scrolling enabled

_drawerList() {
  return Drawer(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        DrawerHeader(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                'John Doe',
              ),
            ],
          ),
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage('assets/images/menu_bg.png'),
              fit: BoxFit.cover,
            ),
          ),
        ),
        ListView(
          padding: EdgeInsets.zero,
          children: [
            ListTile(
              // Some Code
            ),
            ListTile(
              // Some Code
            ),
            ListTile(
              // Some Code
            ),
            ListTile(
              // Some Code
            ),
            ListTile(
              // Some Code
            ),
          ],
        ),
      ],
    ),
  );
}

With items scrolling disabled

_drawerList() {
  return Drawer(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        DrawerHeader(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                'John Doe',
              ),
            ],
          ),
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage('assets/images/menu_bg.png'),
              fit: BoxFit.cover,
            ),
          ),
        ),
        ListTile(
          // Some Code
        ),
        ListTile(
          // Some Code
        ),
        ListTile(
          // Some Code
        ),
        ListTile(
          // Some Code
        ),
        ListTile(
          // Some Code
        ),
      ],
    ),
  );
}

user_3901746 · Answer

Instead of wrapping inside ListView you can wrap it inside column and then add other widget inside that. Also if you want to divide header and other part in any ratio you can use Expanded widget.

 _drawerList() {
    return Drawer(
      child: Container(
        child: Column(
          children: [
            Expanded(
              flex: 1,
              child: DrawerHeader(
                padding: EdgeInsets.all(0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      'John Doe',
                    ),
                  ],
                ),

              ),
            ),
            Expanded(
              flex: 2,
              child: ListView(

                scrollDirection: Axis.vertical,

                children: [
                  ListTile(
                title: Text("Ses"),
                // Some Code
              ),
               ListTile(
                title: Text("Ses"),
                // Some Code
              ),
               ListTile(
                title: Text("Ses"),
                // Some Code
              ),
               ListTile(
                title: Text("Ses"),
                // Some Code
              ),
               ListTile(
                title: Text("Ses"),
                // Some Code
              ),
               ListTile(
                title: Text("Ses"),
                // Some Code
              ),
               ListTile(
                title: Text("Ses"),
                // Some Code
              ),
               ListTile(
                title: Text("Ses"),
                // Some Code
              ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }

user_7402550 · Answer

I use this code to pin DrawerHeader on top with fixed height and make list to fill rest of space below.

final drawer = Drawer(
    child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
      Container(
          height: 200,
          child: DrawerHeader(
              decoration: BoxDecoration(color: Colors.blue),
              child: Text('Right Drawer Header',
                  style: TextStyle(color: Colors.white, fontSize: 24)))),
      Expanded(
          child: ListView(padding: EdgeInsets.zero, children: [
        ListTile(leading: Icon(Icons.message), title: Text('Message')),
        ListTile(
            leading: Icon(Icons.account_circle), title: Text('Profile')),
        ListTile(leading: Icon(Icons.settings), title: Text('Settings')),
      ]))
    ]));

Flutter - Fix Drawer Header

3 Answers