Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter - How to control profile image size in the drawer

I would like to control the profile image size, and get it rounded instead of oval as shown below.

Changing the height and/or the width values doesn't affect neither the size nor the ratio, also the weird thing is when I change the margin parameter it changes the oval shape radius.

new UserAccountsDrawerHeader(
  decoration: BoxDecoration(color: Colors.white),
  currentAccountPicture: new Container(
    margin: const EdgeInsets.only(bottom: 40.0),
    width: 10.0,
    height: 10.0,
    decoration: new BoxDecoration(
      shape: BoxShape.circle,
      image: new DecorationImage(
        fit: BoxFit.fill,
        image: new NetworkImage(
          "https://example.com/assets/images/john-doe.jpg",
        ),
      ),
    ),
  ),
  accountName: new Container(
    ...
  ),
  accountEmail: new Container(
    ...
  ),
  onDetailsPressed: () {
    ...
  },
),

enter image description here

What am I doing wrong ?

Update: The above way of doing is a workaround to the CircleAvatar that didn't give any control on the image size. If you tried CircleAvatar in some different way that gives control on image size, please share it to help.

like image 345
Sami-L Avatar asked Dec 23 '18 20:12

Sami-L


1 Answers

Use This code for network image:

                new CircleAvatar(
                      radius: 60.0,
                      backgroundColor: const Color(0xFF778899),
                      backgroundImage: NetworkImage("Your Photo Url"), // for Network image

                    ),

Use this for asset Image:

              new CircleAvatar(
                      radius: 60.0,
                      backgroundColor: const Color(0xFF778899),
                      child: new Image.asset(
                        'images/profile.png',
                      ), //For Image Asset

                    ),
like image 191
Rashiduzzaman Khan Avatar answered Sep 28 '22 09:09

Rashiduzzaman Khan