Flutter Network Image does not fit in Circular Avatar

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,
              )

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.


Had a similar problem in the AppBar actions widget list.

This worked for me:

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

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,
  ),
),