如何通过flutter中的图标为FadeInImage小部件创建图像提供程序?

时间:2018-06-06 09:38:16

标签: flutter

我想将FadeInImage与图标一起用作占位符。

FadeInImage的构造函数很少。

在默认构造函数中,ImageProvider作为占位符,FadeInImage.MemoryNetwork(需要Uint8List作为内存占位符。

第三个构造函数创建了AssetImage,但我怀疑它在这里是否有用。

有没有办法将Icon转换为其中一种数据类型?

示例签名:

FadeInImage(placeholder: iconPlaceholder, image: NetworkImage("url"))

2 个答案:

答案 0 :(得分:6)

图标实际上只是字体中的文字,因此将其制作成图像非常棘手。 cookbook中的技巧应该有效。使用带有图标的堆栈和透明占位符。

    body: new Stack(
      children: <Widget>[
        new Center(child: new Icon(Icons.something)),
        new Center(
          child: new FadeInImage.memoryNetwork(
            placeholder: kTransparentImage,
            image:
                'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true',
          ),
        ),
      ],
    ),

答案 1 :(得分:3)

还有一个软件包可以将Widget作为占位符

https://pub.dartlang.org/packages/cached_network_image

  ClipOval(
    child: CachedNetworkImage(
  placeholder: new Container(
    height: height,
    width: height,
    child: Icon(Icons.accessibility),
    color: kGrey400,
  ),
  imageUrl: photoUrl,
  height: height,
  fit: BoxFit.cover,
));