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

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.


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

Tags:

Flutter