在Flutter中创建圆角缓存图像

Question

我想创建一个圆形图像,从网络中提取图像,并在Flutter中缓存.

这是我从网络中获取的圆形图像但未缓存图像的代码.

new Container(
    width:80.0,
    height: 80.0,
    decoration: new BoxDecoration(
    shape: BoxShape.circle,
        image: new DecorationImage(
            image: new NetworkImage('https://pbs.twimg.com/profile_images/945853318273761280/0U40alJG_400x400.jpg'),
        ),
    ),
),

现在我找到了一个用于从网络中获取,缓存和显示图像的小部件

new CachedNetworkImage(imageUrl: 'https://pbs.twimg.com/profile_images/945853318273761280/0U40alJG_400x400.jpg')

但是当我用这个CachedNetworkImage替换NetworkImage小部件时,它给出了一个错误,说NetworkImage不是类型图像.

如何实现可以缓存的圆形图像？

编辑:我按照答案中的建议尝试了这个,但仍然得到了同样的错误:参数类型'CachedNetworkImage'无法分配给参数类型'DecorationImage'.

              decoration: new BoxDecoration(
                shape: BoxShape.circle,
                image: new CachedNetworkImage(image: 
                      'https://pbs.twimg.com/profile_images/945853318273761280/0U40alJG_400x400.jpg'),
              ),

Answer 1

DecorationImage需要一个ImageProvider而不是一个小部件。

有两种方法可以解决此问题：

该cached_image_network提供class的是extends ImageProvider，即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'),
    ),
  ),
)

您也可以省略DecorationImage小部件，因为BoxDecoration 可以在任何小部件上使用：

Container(
  width: 80.0,
  height: 80.0,
  decoration: BoxDecoration(
    shape: BoxShape.circle,
  ),
  child: CachedNetworkImage('https://pbs.twimg.com/profile_images/945853318273761280/0U40alJG_400x400.jpg'),
)

在后一个示例中，我使用的是Regular CachedNetworkImage，它将返回一个widget。

Answer 2

ClipRRect小部件用于将子小部件剪辑为圆角.

ClipOval(
  child: CachedNetworkImage(imageUrl: "https://pbs.twimg.com/profile_images/945853318273761280/0U40alJG_400x400.jpg",
   width: 80.0,
   height: 80.0,
  ),
)

Answer 3

的组合CircleAvatar和CachedNetworkImageProvider解决您的问题。下面是一个例子：

CircleAvatar(
  backgroundImage: CachedNetworkImageProvider(
  'https://pbs.twimg.com/profile_images/945853318273761280/0U40alJG_400x400.jpg',
  ),
),

Answer 4

就我而言，这节省了我的时间，也许你也是如此。

CachedNetworkImage(
  imageUrl: url,
  errorWidget: (context, url, error) => Text("error"),
  imageBuilder: (context, imageProvider) => CircleAvatar(
    radius: 50,
    backgroundImage: imageProvider,
   ),
  );

Answer 5

所述CachedNetworkImage具有助洗剂（ImageWidgetBuilder），以进一步定制图像的显示。尝试这种方式：

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并且errorWidget是小部件，这意味着您可以在其中放置任何小部件并根据需要自定义它们。