Flutter - How to control profile image size in the drawer

Question

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: () {
    ...
  },
),

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.

Answer 1

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

                    ),

Answer 2

If you use backgroundImage as the image provider for CircleAvatar then changing the radius property indeed has no effect. From the source circle_avatar.dart it can be observed the image is being rendered as BoxFit.cover DecorationImage(image: backgroundImage, fit: BoxFit.cover) - and in user_accounts_drawer_header.dart the currentAccountPicture is hardcoded to be a 72.0 pixel SizedBox so the image will always be 72.0px in dimensions.

https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/user_accounts_drawer_header.dart#L57

https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/circle_avatar.dart#L203

Hopefully the Flutter team adds some level of control to this in the future.

Not an answer, just more info that hopefully helps someone.

Answer 3

Wrap your image in a CircleAvatar widget. It’s made for such purposes.

Answer 4

Try This:

import 'package:flutter/material.dart';

class AppDrawer extends StatefulWidget {
  @override
  _AppDrawerState createState() => new _AppDrawerState();
}

class _AppDrawerState extends State<AppDrawer> {
  @override
  Widget build(BuildContext context) {
    return new Drawer(
      child: Center(
        child: Column(
          children: <Widget>[
            new UserAccountsDrawerHeader(
              decoration: BoxDecoration(color: Colors.white),
              currentAccountPicture: new CircleAvatar(
                radius: 50.0,
                backgroundColor: const Color(0xFF778899),
                backgroundImage:
                    NetworkImage("http://tineye.com/images/widgets/mona.jpg"),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

This is the screenshot of output:

Answer 5

You put the margin inside the Container of the image while you have to use the margin parameter of the UserAccountDrawerHeader, this is why your image became an oval:

UserAccountsDrawerHeader(
          decoration: BoxDecoration(color: Colors.white),
            margin: EdgeInsets.only(bottom: 40.0),                                            
          currentAccountPicture: Container(  
            decoration: BoxDecoration(
                shape: BoxShape.circle,
                image: DecorationImage(
                    fit: BoxFit.fill,
                    image:
                        NetworkImage("https://via.placeholder.com/150"))),
          ),
          accountName: new Container(
              child: Text(
            'Name',
            style: TextStyle(color: Colors.black),
          )),
          accountEmail: new Container(
              child: Text(
            'Email',
            style: TextStyle(color: Colors.black),
          )),
        ),

Answer 6

You can create your own header:

            DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.blue
              ),
              child: ListView(
                children: [
                  return ClipRRect(
                    borderRadius: BorderRadius.circular(8.0),
                    child: Image.asset('images/myImage.jpg'),
                  ),
                  //These can go here or below the header with the same background color
                  Text("user name"),//customize this text
                  Text("[email protected]"),
                  //...additional header items here 
                ],
              )),

Answer 7

I found a solution!!! at least thats what worked for me

    import 'package:flutter/material.dart';

    class HomePage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          // Side menu
          drawer: new Drawer(
            child: GestureDetector(
              onTap: () {},
              child: ListView(
                children: <Widget>[
                  new UserAccountsDrawerHeader(
                    accountName: new Text('Hymn +'),
                    accountEmail: new Text('[email protected]'),
                    currentAccountPicture: new CircleAvatar(
                      backgroundImage: new NetworkImage(
                          'https://miro.medium.com/max/1400/1*uC0kYhn8zRx8Cfd0v0cYQg.jpeg'),
                    ),
                  ),
                ],
              ),
            ),
          ),
        );
      }
    }