flutter - 如何使用 Flare 动画作为带有淡入动画的图像占位符

Question

我试图在从网络加载图像时显示图像占位符，并将占位符替换为带有淡入动画的实际图像。当我使用资产中的简单 png 图像时，这可以正常工作。以下是现有代码：

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

现在我想加载一个耀斑动画作为图像占位符。我正在使用FlareActor来显示耀斑动画，但 FlareActor 是 FadeInImage 中的一个小部件和占位符，需要ImageProvider。有没有办法将耀斑动画加载为图像占位符并将其替换为带有淡入动画的实际图像。

以下是加载简单耀斑动画的代码：

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

谢谢

Answer 1

你可以通过这样做来实现你想要的

Stack(
      children: <Widget>[
        AnimatedOpacity(
          opacity: showImage ? 0.0: 1.0,
          child: FlareActor("assets/images/image_placeholder.flr",
            animation: "Untitled"),
        ),
        AnimatedOpacity(
          opacity : showImage ? 1.0: 0.0,
          child: Image(
            image: NetworkImage(product.imageUrl),
            fit: BoxFit.cover,
            frameBuilder: (BuildContext context, Widget child, int frame,
                bool wasSynchronouslyLoaded) {
              if (wasSynchronouslyLoaded) return child;
              if (frame != null) {
                showImage = true;
              }
              return child;
            },
          ),
        )]

Answer 2

花了一些时间后，我能够使用 Stack 和 Image frameBuilder 解决问题。

以下是代码：

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