CODEWITHSUNDEEP
flutter
mengqiao hu
mengqiao hu

Reputation: 193

How to fadein a decorationImage in flutter?

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: ...
  ),
)

Upvotes: 11

Views: 11349

Answers (1)

rmtmckenzie
rmtmckenzie

Reputation: 40493

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

Upvotes: 20

Related Questions