Search code examples
flutterdartdrawer

Flutter - How to change the size and alignment of the drawer header image?

I am trying to create a Drawer and the heading is the logo.

How to change the size and alignment of the drawer header image?

I want the image to be smaller and left-aligned.

I tried but could not adjust the size and alignment.

enter image description here

Sample code:

Scaffold(
        key: _key,
        drawer: Drawer(
          child: ListView(
              // Important: Remove any padding from the ListView.
              padding: EdgeInsets.zero,
              children: [
                DrawerHeader(
                  padding: EdgeInsets.fromLTRB(5, 5, 5, 5),
                  child: Image.asset(
                    'images/logo.png',
                    width: 10,
                  ),
                ),
              ]),
        ),
        appBar: PreferredSize(
          preferredSize: const Size.fromHeight(80.0),
          child: AppBar(
            backgroundColor: Colors.transparent,
            elevation: 0,
            flexibleSpace:
                Row(mainAxisAlignment: MainAxisAlignment.center, children: [
              Padding(
                padding: const EdgeInsets.only(top: 0),
                child: Image.asset(
                  'images/logo.png',
                  fit: BoxFit.cover,
                  width: 80,
                ),
              ),
            ]),
            leading: Padding(
              padding: const EdgeInsets.only(top: 20),
              child: IconButton(
                onPressed: () => _key.currentState!.openDrawer(),
                icon: const Icon(
                  Icons.menu,
                  size: 27,
                  color: Color(0xff5f2dea),
                ),
              ),
            ),
Solution

  • Try below code Wrap your Image inside Container or Align widget and set alignment: Alignment.centerLeft,

     DrawerHeader(
          child: Container(
            alignment: Alignment.centerLeft,
            child: Image.network(
              'https://upload.wikimedia.org/wikipedia/commons/thumb/2/2a/Mastercard-logo.svg/800px-Mastercard-logo.svg.png',
              width: 50,
              height: 50,
            ),
          ),
        ),

    Result-> image