dart 如何解决CachedNetworkImage中的错误?

yftpprvb  于 9个月前  发布在  其他
关注(0)|答案(4)|浏览(191)

我想加载一个图像缓存.所以我使用CachedNetworkImage的.当用户通过gmail帐户登录我得到的图像URL和显示的图像.但我需要把它保存在缓存.这里是我的代码:

new Center(
 child: new Column(
  children: <Widget>[
   new CircleAvatar(
    new CachedNetworkImage(
      placeholder: CircularProgressIndicator(),
      imageUrl: widget.currentUser?.profilUrl,
    ),
  ),
],
),
)

字符串
我也使用了CachedNetworkImageProvider,但两者都出现了相同的错误。错误是

type'CachedNetworkImage'is not  a  subtype  of  type  'ImageProvider<dynamic>'

yptwkmov

yptwkmov1#

控件CircleAvatar接收ImageProvider
cached_network_image包为您提供了两个用途:

  1. CachedNetworkImage一个Widget,可用于显示缓存的网络镜像。
  2. CachedNetworkImageProvider一个ImageProvider,提供缓存的镜像。
    因此,如果你想把它传递给CircleAvatar,你必须使用CachedNetworkImageProvider(2.)。
    下面是一个完整的示例,您可以复制和粘贴以进行尝试:
import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(),
      home: Scaffold(
        body: Center(
          child: CircleAvatar(
            backgroundImage: CachedNetworkImageProvider(
              'https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/Bill_Gates_Buys_Skype_%285707954468%29.jpg/2560px-Bill_Gates_Buys_Skype_%285707954468%29.jpg'
            ),
          ),
        ),
      )
    );
  }
}

字符串

gkl3eglg

gkl3eglg2#

CircleAvatar backgroundImage属性需要ImageProvider,而不是图像小部件。

ImageProviders:- NetworkImage()、AssetImage()和CachedNetworkImageProvider()。
图片控件:- Image()、CircleAvatar()、CachedNetworkImage()

所以CircleAvatar()& CachedNetworkImage()也是一个图像显示窗口小部件,与我们通常使用的Image()窗口小部件相同。
每个图像显示小部件都需要图像提供程序。所以在这种情况下,您必须使用CircleAvatar()小部件和CachedNetworkImageProvider(),因为此CachedNetworkImageProvider()提供CircleAvatar()小部件所需的图像数据。

kxxlusnw

kxxlusnw3#

我不知道它是否可以帮助别人,但他提到如何处理网络图像错误。我通常使用**Image.Network(Flutter build widget)**来处理此类错误。这是一个例子

Image.network(
   products[index].image!,
  errorBuilder: (BuildContext context,Object exception,StackTrace 
  stackTrace) {
    return Image.asset('img/no_image.png');
     },)

字符串
如果未成功找到网络映像,则errorbuilder有助于显示另一个映像。

0wi1tuuw

0wi1tuuw4#

就像@Niklas说的。
小部件CircleAvatar接收ImageProvider。
以下是用途:

new Center(
  child: new Column(
   children: <Widget>[
    new CircleAvatar(
     backgroundImage: new CachedNetworkImageProvider(
      widget.currentUser?.profilUrl,
     )
    ),
   ],
  ),
 )

字符串

相关问题