FadeInImage in BoxDecoration

Question

I love the FadeInImage

I can do this

child: FadeInImage.assetNetwork(
    image: \'https://placeimg.com/640/480/any\',
    placeholder: \'assets/images/l         


        

Answer 1

Here is the code.

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
          child: FutureBuilder<bool>(
        future: _myFuture(),
        builder: (BuildContext context, AsyncSnapshot snapshot) {
          if (snapshot.hasData) return _yourWidget();
          return CircularProgressIndicator();
        },
      )),
    );
  }

  Widget _yourWidget() {
    return Stack(
      children: <Widget>[
        Center(
          child: FadeInImage(
            width: 300,
            height: 300,
            placeholder: AssetImage(chocolateImage),
            image: NetworkImage(poolImageUrl),
            fit: BoxFit.cover,
          ),
        ),
        Center(child: Text('Pool', style: TextStyle(fontSize: 36.0, color: Colors.white, fontWeight: FontWeight.bold))),
      ],
    );
  }

  Future<bool> _myFuture() async {
    await Future.delayed(Duration(milliseconds: 10500));
    return true;
  }
}

Answer 2

It's because FadeInImage it not a type of ImageProvider widget, you need to use AssetImage, NetworkImage... inside DecorationImage.

Outside the DecorationImage, like in a Container's child, you can use it as well.

e.g.

       Container(
          child: FadeInImage.memoryNetwork(
            placeholder: kTransparentImage,
            image: product.thumbnail,
            fit: BoxFit.contain,
          ),
        ),

To know more about this widget, check it this:

Flutter Widget of The Week - FadeIn Image

Answer 3

I achieved something similar. This image is a hero image at the top of the page, hence the height. The combination of width and BoxFit.cover make the image cover the viewport. The loader is (visually) hidden when the image loads.

final imageWithLoader = Container(
    height: MediaQuery.of(context).size.height * 0.5,
    child: Stack(children: <Widget>[
      Center(child: CircularProgressIndicator()),
      Center(
        child: FadeInImage.memoryNetwork(
            placeholder: kTransparentImage,
            image: library.url,
            width: MediaQuery.of(context).size.width,
            fit: BoxFit.cover),
      ),
    ]));