How to Use Flare Animation as Image Placeholder with Fade-In Animation

Question

I'm trying to show an image placeholder while the image is being loaded from the network and replace the placeholder with an actual image with a fade-in animation. This works fine when I use a simple png image from assets. Following is the existing code:

FadeInImage(placeholder: AssetImage('assets/one.png'),
          image: NetworkImage(product.imageUrl),
          fit: BoxFit.cover,)

Now I want to load a flare animation as image placeholder. I'm using FlareActor to show flare animation but FlareActor is a widget and placeholder in FadeInImage needs ImageProvider. Is there any way to load flare animation as image placeholder and replace it to actual image with a fade-in animation.

Following is the code to load simple flare animation:

FlareActor("assets/images/image_placeholder.flr", 
               animation: "Untitled",)

Thanks

Answer 1

After spending some time I was able to solve the problem with Stack and Image frameBuilder.

Following is the code:

Image.network(
          product.imageUrl,
          fit: BoxFit.cover,
          frameBuilder: (ctx, child, frame, wasSynchronouslyLoaded) {
            if (wasSynchronouslyLoaded) return child;

            return Stack(children: <Widget>[
              AnimatedOpacity(
                opacity: frame == null ? 1 : 0,
                duration: Duration(seconds: 1),
                child: frame == null
                    ? FlareActor(
                        "assets/animations/image_placeholder.flr",
                        animation: "Untitled",
                      )
                    : null,
              ),
              AnimatedOpacity(
                  opacity: frame == null ? 0 : 1,
                  duration: Duration(seconds: 1),
                  child: frame != null ? child : null),
            ]);
          },
        ),