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