如何从 FadeInImage 小部件的 Flutter 中的图标制作图像提供程序？答案

【问题标题】：How to make an image provider from an Icon in flutter for FadeInImage widget?如何从 FadeInImage 小部件的 Flutter 中的图标制作图像提供程序？
【发布时间】：2018-06-06 09:38:16
【问题描述】：

我想使用带有图标的FadeInImage 作为占位符。

FadeInImage 的构造函数很少。

在默认构造函数中，它采用ImageProvider 作为占位符，在FadeInImage.MemoryNetwork( 中，它采用Uint8List 作为内存占位符。

第三个构造函数创建 AssetImage，但我怀疑这在这里有用。

有没有办法将图标转换为其中一种数据类型？

示例签名：

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

【问题讨论】：

标签： flutter

【解决方案1】：

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

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

对于kTransparentImage，请参阅this。

【讨论】：

这里的“kTransparentImage”是什么？
如何使用“FadeInImage.memoryNetwork(”作为 imageProvider 的输出？请提出建议。谢谢。

【解决方案2】：

还有一个包可以把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,
));

【讨论】：