Create rounded cached image in Flutter
DecorationImage
takes an ImageProvider
and not a widget.
There are two ways to solve this problem:
The cached_image_network
provides a class
that extends
ImageProvider
, i.e. CachedNetworkImageProvider
:
Container(
width: 80.0,
height: 80.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: CachedNetworkImageProvider('https://pbs.twimg.com/profile_images/945853318273761280/0U40alJG_400x400.jpg'),
),
),
)
You could also just omit the DecorationImage
widget because the BoxDecoration
will work on any widget:
Container(
width: 80.0,
height: 80.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
),
child: CachedNetworkImage('https://pbs.twimg.com/profile_images/945853318273761280/0U40alJG_400x400.jpg'),
)
In the latter example, I am using the regular CachedNetworkImage
, which will return a widget.
ClipOval widget is used to clip child widget into round shapes.
ClipOval(
child: CachedNetworkImage(imageUrl: "https://pbs.twimg.com/profile_images/945853318273761280/0U40alJG_400x400.jpg",
width: 80.0,
height: 80.0,
),
)
The CachedNetworkImage has a builder (ImageWidgetBuilder
) to further customize the display of the image.
Try it this way:
CachedNetworkImage(
imageUrl: 'https://pbs.twimg.com/profile_images/945853318273761280/0U40alJG_400x400.jpg',
imageBuilder: (context, imageProvider) => Container(
width: 80.0,
height: 80.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: imageProvider, fit: BoxFit.cover),
),
),
placeholder: (context, url) => CircularProgressIndicator(),
errorWidget: (context, url, error) => Icon(Icons.error),
),
placeholder
and errorWidget
are widgets, which means you can put any widget in there and customize them as you wish.