Flutter CircleAvatar backgroundImage not filling up the circle

Question

I am using a CircleAvatar with a backgroundImage property to load an image took from a camera but the image shown does not fill the entire circle avatar. It looks like a rectangular image in a circle.

How do I make the image expand to cover the circle avatar? Thanks.

Answer 1

You can always create an image and manually clip it:

ClipOval(
  child: Image.network(
    "url.jpg",
    fit: BoxFit.cover,
    width: 90.0,
    height: 90.0,
  )
),

Answer 2

If you are using a local image from asset then you can use CircleAvatar as,

CircleAvatar(
          backgroundImage: ExactAssetImage('assets/images/cook.jpeg'),
          // Optional as per your use case
          // minRadius: 30,
          // maxRadius: 70,
        ),

If you are using a network image then you can use CircleAvatar as,

CircleAvatar(
     radius: 30.0,
     backgroundImage: NetworkImage(imageURL),
     backgroundColor: Colors.transparent,
     ));