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

Question

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

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

现在我想加载一个耀斑动画作为图像占位符。我正在使用 FlareActor 显示耀斑动画，但 FlareActor 是 FadeInImage 中的小部件和占位符需要 图片提供者 .
有没有办法将耀斑动画加载为图像占位符并将其替换为带有淡入动画的实际图像。
以下是加载简单耀斑动画的代码:

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