Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter - Fix Drawer Header

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: <Widget>[
          DrawerHeader(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                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".

like image 212
Zain SMJ Avatar asked Jan 03 '19 07:01

Zain SMJ


People also ask

How do you fix a drawer header in Flutter?

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. Save this answer.

What is drawer header in Flutter?

DrawerHeader class Null safety. The top-most region of a Material Design drawer. The header's child widget, if any, is placed inside a Container whose decoration can be passed as an argument, inset by the given padding. Part of the Material Design Drawer. Requires one of its ancestors to be a Material widget.


2 Answers

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: <Widget>[
              Text(
                'John Doe',
              ),
            ],
          ),
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage('assets/images/menu_bg.png'),
              fit: BoxFit.cover,
            ),
          ),
        ),
        ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            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: <Widget>[
              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
        ),
      ],
    ),
  );
}
like image 171
Anis Alibegić Avatar answered Sep 20 '22 21:09

Anis Alibegić


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: <Widget>[
            Expanded(
              flex: 1,
              child: DrawerHeader(
                padding: EdgeInsets.all(0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      'John Doe',
                    ),
                  ],
                ),

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

                scrollDirection: Axis.vertical,

                children: <Widget>[
                  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
              ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
like image 23
Ishan Fernando Avatar answered Sep 18 '22 21:09

Ishan Fernando