How to make an image provider from an Icon in flutter for FadeInImage widget?

Question

I want to use FadeInImage with an icon as a placeholder.

FadeInImage has few constructors.

In a default constructor it takes ImageProvider as a placeholder, and in FadeInImage.MemoryNetwork( it takes Uint8List as a memory placeholder.

The third constructor creates AssetImage, but I doubt that is useful here.

Is there any way to convert an Icon to one of those data types?

Example signature:

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

Answer 1

Icons are really just text from a font, so its tricky to make that into an image. The trick in the cookbook should work. Use a Stack with the Icon behind and a transparent placeholder.

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',
      ),
    ),
  ],
),

For kTransparentImage, see this.

Answer 2

There is also a package that can take Widget as a placeholder

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,
));