Flutter Network Image does not fit in Circular Avatar

Question

I am trying to retrieve bunch of images from an api. I want the images to be displayed in Circular form so I am using CircleAvatar Widget, but I keep getting images in square format. Here is a screenshot of images

Here is the code I am using

ListTile(leading: CircleAvatar(child: Image.network("${snapshot.data.hitsList[index].previewUrl}",fit: BoxFit.scaleDown,)),),

I tryied using all the properties of BoxFit like cover, contain,fitWidth,fitHeight etc but none of them works.

Solution 1

This Will Work : You need to use backgroundImage:property in order to fit it in Circle.

CircleAvatar(
                radius: 30.0,
                backgroundImage:
                    NetworkImage("${snapshot.data.hitsList[index].previewUrl}"),
                backgroundColor: Colors.transparent,
              )

To Check with Dummy Placeholder:

CircleAvatar(
                radius: 30.0,
                backgroundImage:
                    NetworkImage('https://via.placeholder.com/150'),
                backgroundColor: Colors.transparent,
              )

Solution 2

Had a similar problem in the AppBar actions widget list.

This worked for me:

CircleAvatar(
    radius: 18,
    child: ClipOval(
        child: Image.network(
          'image-url',
        ),
    ),
),

Solution 3

If you don't want to use CircleAvatar, here is how you can do it.

ClipOval(
  child: Image.network(
    'https://via.placeholder.com/150',
    width: 100,
    height: 100,
    fit: BoxFit.cover,
  ),
),

Solution 4

if someone intends to create bordered circular image try this.

Using ClipOval widget is not perfect solution because if images are not square result will be elliptic.

CircleAvatar(radius: (52),
            backgroundColor: Colors.white,
            child: ClipRRect(
              borderRadius:BorderRadius.circular(50),
              child: Image.asset("assets/pictures/profile.png"),
            )
        )

ClipRRect widget prevents image to overflow CircleAvatar widget.

Solution 5

You will need to use NetworkImage, AssetImage, FileImage, MemoryImage or something similar. You can't directly use Image.network, Image.asset or similar due to how Flutter architects its image classes.

An example:

CircleAvatar(
  radius: 100.0,
  backgroundImage: NetworkImage(...),
)

backgroundImage in CircleAvatar expects to receive an ImageProvider as a parameter. However, Image.network and others don't directly extend the ImageProvider class, they merely extend the StatefulWidget class, even though they use NetworkImage inside. That is why you see in the other answers that ClipOval or ClipRRect is being used. These classes accept a Widget and so they're not as particular as CircleAvatar and similar classes are.

Instead of these workarounds, therefore, for CircleAvatar, you should use NetworkImage and similar classes and for widgets that expect just a Widget, you can use Image.network and similar.

Another reason not to use clips is that they can be more expensive than changing the border radii directly: https://flutter.dev/docs/perf/rendering/best-practices

View more solutions

Comments

[chemamolins]

Have you tried fit: BoxFit.cover?

[Athira Reddy]

Just use backgroundImage property with CircleAvatar. 6 Flutter CircleAvatar Examples With Tutorial

[Drew]

While this code may/may no solve the question, including an explanation of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please edit your answer to add explanations.

[M.ArslanKhan]

and what about an image from storage, Image.file(Image.file(File file)). Can CircleAvatar handle it?

[Asbah Riyas]

why someone wouldn't try circle avatar

[alperen.emeksiz]

@M.ArslanKhan yes. You can use AssetImage in backgroundImage property.

[Tomer Shetah]

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value.

[Alex Rindone]

Sometimes you will want to use this with FadeInImage like myself...in which case the best way to do it is wrapping it in a ClipOval widget...here is a snippet: CircleAvatar( backgroundColor: Colors.grey, child: ClipOval( child: FadeInImage.assetNetwork( placeholder: placeholderPath, image: imageUrl, ), ), );

[Vinojan Isoft]

Yeah Sure I will Add

[Adam Smaka]

@AsbahRiyas because image doesnt fill the available space. Try to use big image in very small Circle Avatar then you will know what's the problem is.

[RealRK]

Actually the most perfect implementation. Works fine for all image sizes and doesn't warp the image in any way. Thanks

[sultanmyrza]

This should be accepted answer

[Jelle Blaauw]

A reason for me to not use the CircleAvatar, was that it animates the background colors, which I didn't want. In other words, this solution is perfect for me, thanks.