Round CachedNetworkImage in Flutter - dart

Question

new Container(
width: 80.0,
height: 80.0,
decoration: new BoxDecoration(
shape: BoxShape.circle,
image: new DecorationImage(
fit: BoxFit.fill,
image: new NetworkImage(widget.profile_picture)))),
At the moment I have a NetworkImage however I wold like to have a round CachedNetworkImage instead.

Answer 1

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.

Answer 2

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

Answer 3

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.

Answer 4

you should try it
ClipOval(
child: CachedNetworkImage(
imageUrl: url,
fit: BoxFit.cover
),
)

Answer 5

BorderRadius and Border Color
1st way
Container(
decoration: BoxDecoration(
border: Border.all(color: Palette.greyTextColor),
borderRadius: BorderRadius.all(Radius.circular(8.0)),),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(8.0)),
child: CachedNetworkImage(
2nd way
CachedNetworkImage(
imageBuilder: (context, imageProvider) => Container(
width: width,
decoration: BoxDecoration(
border: Border.all(color: Palette.greyTextColor),
borderRadius: BorderRadius.all(Radius.circular(8.0)),
image: DecorationImage(image: imageProvider),
),
),

Answer 6

I use this to create a circular cached image network with border color
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
class CircularCachedNetworkImage extends StatelessWidget {
final String imageURL;
final double size;
final Color borderColor;
final BoxFit fit;
final double borderWidth;
const CircularCachedNetworkImage({
required this.imageURL,
required this.size,
required this.borderColor,
this.fit = BoxFit.fill,
this.borderWidth = 2,
});
#override
Widget build(BuildContext context) {
return Container(
width: size,
height: size,
decoration: BoxDecoration(
color: borderColor,
shape: BoxShape.circle,
),
child: Padding(
padding: EdgeInsets.all(borderWidth),
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white, // inner circle color
),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(300.0)),
child: CachedNetworkImage(
imageUrl: imageURL,
fit: fit,
),
),
),
),
);
}
}
usage
CircularCachedNetworkImage(
imageURL: "your image URL in here",
size: 100,
borderColor: Colors.green,
)

Answer 7

You just need to add clipBehavior: Clip.antiAlias,

Answer 8

You can use ClipOval instead of ClipRRect
child: ClipOval(
child: CachedNetworkImage(imageUrl : url),
fit: BoxFit.cover,
),

Answer 9

I needed an avatar widget that kept the circular shape whether the CachedNetworkImage was square or not, and was not fixed to one size but used the available space. My solution was this:
CircleAvatar(
child: AspectRatio(
aspectRatio: 1,
child: ClipOval(
child: CachedNetworkImage(
imageUrl: imgUrl,
fit: BoxFit.fill,
),
),
),
)