Question 75668 in Flutter Question posted in
The official Flutter documentation can be found here.

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),
                ),
              ),
            ),
Tags:

4

Answers


  1. 0

    just wrap your Image with COntainer and give it size and alignment:

    DrawerHeader(
                    padding: EdgeInsets.fromLTRB(5, 5, 5, 5),
                    child: Container(
                      width: 30,
                      alignment: Alignment.centerLeft,
                      child: Image.asset(
                        'images/logo.png',
                        width: 10,
                      ),
                    ))
    Login or Signup to reply.
  2. 0

    It is very simple. Just wrap the image widget with a container and give height and width.

    Login or Signup to reply.
  3. 0

    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

    Login or Signup to reply.
  4. 0 
       drawer: Drawer(
      child: Column(
        children: [
          DrawerHeader(
              child: Align(
            alignment: Alignment.centerLeft,
            child: Image.asset(
              "assets/icons/icon.png",
              height: 100,
              width: 100,
            ),
          )),
          Expanded(
            child: ListView(
              children: const [Text("widget 1"), Text("widget 2")],
            ),
          )
        ],
      ),
    ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search