Round CachedNetworkImage in Flutter
You can use the imageBuilder
of the CachedNetworkImage
:
CachedNetworkImage(
imageUrl: imageUrl,
imageBuilder: (context, imageProvider) => Container(
height: 100,
width: 100,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(50)),
image: DecorationImage(
image: imageProvider,
fit: BoxFit.cover,
),
),
),
placeholder: (context, url) => placeholder,
errorWidget: (context, url, error) => errorWidget,
)
In order to have a rounded image, set the width and height to the same value and set the borderRadius
to half the height.
You can use
ClipRRect(borderRadius: BorderRadius.circular(10000.0),
child: CachedNetworkImage(...))
Since CachedNetworkImageProvider is not a Widget, it doesn't work in place of a CachedNetworkImage. Meaning it won't have the placeholder widget option.
You can use the CachedNetworkImageProvider
like this:
new Container(
width: 80.0,
height: 80.0,
decoration: new BoxDecoration(
shape: BoxShape.circle,
image: new DecorationImage(
fit: BoxFit.fill,
image: new CachedNetworkImageProvider(widget.profile_picture),
),
),
),