cdsaenz
cdsaenz

Reputation: 550

How to make a Flutter DrawerHeader fixed?

I'm trying to create a Drawer but somehow I cannot find any way to make its DrawerHeader stay fixed (while the items below keep scrolling). Tried Expanded, Flex, etc but somehow I'm missing something. This is the working code, but the header will scroll up with the items in the listview below

Widget _drawerList(BuildContext context) {

  return Drawer(
      elevation: 20.0,
      child: ListView(
        children: <Widget>[
          Container(
            height: 120.0,
            child: DrawerHeader(
              decoration: BoxDecoration(color: Colors.orange),
              child: Text('HEADER'),
            ),
          ),
          Column(
            children: <Widget>[
              ListTile(
                title: Text("ITEM 1"),
              ),
              ListTile(
                title: Text("ITEM 2"),
              ),
              ListTile(
                title: Text("ITEM 3"),
              ),
              ListTile(
                title: Text("ITEM 4"),
              ),
              ListTile(
                title: Text("ITEM 5"),
              ),
              ListTile(
                title: Text("ITEM 6"),
              ),
              ListTile(
                title: Text("ITEM 7"),
              ),
              ListTile(
                title: Text("ITEM 8"),
              ),
              ListTile(
                title: Text("ITEM 9"),
              ),
              ListTile(
                title: Text("ITEM 10"),
              ),
              ListTile(
                title: Text("ITEM 11"),
              ),
              ListTile(
                title: Text("ITEM LAST"),
              ),
            ],
          )
         ],
      ),
  );
}

Upvotes: 2

Views: 3941

Answers (2)

CopsOnRoad
CopsOnRoad

Reputation: 268544

enter image description here

Widget _drawerList(BuildContext context) {
  return Drawer(
    elevation: 20.0,
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        SizedBox(
          height: 120,
          child: DrawerHeader(
            decoration: BoxDecoration(color: Colors.orange),
            child: Text('HEADER'),
          ),
        ),
        Expanded(
          child: ListView(...),
        )
      ],
    ),
  );
}

Upvotes: 6

sbmalik
sbmalik

Reputation: 534

You can use Column as Parent View instead of ListView then replace Column with ListView inside so you header stick to it's place and Items are scrollable.

Upvotes: 1

Related Questions