Make image fit circle avatar

user_16577419 0
Viewed 2304

I am trying to display a users profile picture inside a circle avatar widget but only a small portion of it is displayed.

CircleAvatar(
  radius: 70,
  backgroundImage: AssetImage("Images/headshot_1.jpg"),
)

Image I am trying to display

Screenshot on emulator:

Update: I got it to work by wrapping the circle avatar in a row widget.

flutter
4 Answers

I'd try using foregroundImage. As the official documentation states, this property works well in your use case: a profile picture.

Here's an example with the image you displayed in your question:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: CircleAvatar(
            foregroundImage: AssetImage(
              'myimage.png',
            ),
          ),
        ),
      ),
    );
  }
}

EDIT. Added the obtained UI. Here's what I obtain: Avatarized image

If your problem persists, the problem lies somewhere else in your context / widget tree.

user_158313160

Wrap CircleAvatar widget with Center widget Example:

Center(child:CircleAvatar())
user_135434040
You should be using the [`child`](https://api.flutter.dev/flutter/material/CircleAvatar-class.html#child) property, which takes another widget. 
CircleAvatar(
  radius: 70,
  child: Image.asset(
    "Images/headshot_1.jpg",
    fit: BoxFit.cover,
    height: 140,
    width: 140,
  ),
);

I tried running your code and it came out to be circle. I used 512px from https://www.flaticon.com/free-icon/avatar_168724

You should check the avatar image you are using.

user_165694430 
CircleAvatar(
  radius: 70,
  child: Image.asset('assets/1.png',
fit :BoxFit.cover,
),
)
user_157084010
Related