Make image fit circle avatar

Question

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.

Answer 1

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:

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

Answer 2

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.

Answer 3

用Center小部件包裹CircleAvatar小部件示例：

Center(child:CircleAvatar())

Answer 4

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