How to fadein a decorationImage in flutter?

Question

I'm trying to fade in a decoration image and can't figure out how.

The image property needs an ImageProvider, while FadeInImage widget is a StatefulWidget.

This is what I've tried to work with:

decoration: BoxDecoration (
  image: DecorationImage(
    fix: BoxFit.cover,
    image: ...
  ),
)

Answer 1

You're not going to be able to animate a DecorationImage. As you've stated, DecorationImage only provides an ImageProvider, which doesn't really allow for animation (at least as far as I know).

You might be able to write a new AnimatedDecorationImage by taking part of the code from DecorationImage and editing it, but that would be pretty complicated.

What I'd recommend is instead to use a stack to simulate the same thing as DecorationImage. This would allow you to use the FadeInImage widget.

That would look something like this:

Stack(
  children: [
    FadeInImage(
      placeholder: MemoryImage(....),
      image: NetworkImage(...),
    ),
    <your widget, I assume a container?>
  ],
)