Flutter 颤振：图像覆盖图像，将上部图像部分显示为提供的值（例如1到10）

我有一个图像视图，显示两个图像（一个在另一个上）。（我使用堆栈实现）

现在，背面的图像将保持静止。（已完成此操作）

顶部的图像将从右下角显示。（我要问的问题）

就像下面的截图

如果你在截图中注意到，表情符号是如何从右下角显现出来的

显示有10个不同的步骤（例如，1表示完全显示，5表示一半，10表示完全隐藏）

我如何在颤振飞镖中实现这一点

编辑：

现在我有图像掩蔽的问题。（见下面的屏幕截图）

---

---

Dartpad不支持本地图像，所以我使用了一个简单的容器，但概念是一样的。

在stack的positioned widget中有一个width参数。或者使用已发布小部件的左、右参数。如果您需要示例代码，请发表评论。是的，如果您可以提供示例代码，那就太好了。理解您的问题有点困难，如果您有10个不同的步骤，您可以使用10个图像url（或资产路径）创建一个数组，然后根据步骤索引显示图像。喜欢列表图像；int _阶跃=0；返回容器（…src:image[\u步骤]…；但我不确定我是否正确理解了您想要实现的目标。@RasheshBosamiya当然感谢您的回答，我检查了您的解决方案。现在它工作了85%。我遇到的问题是图像掩蔽，背面的图像。虽然您的解决方案是100%正确的，但顶部图像必须有透明的掩蔽部分才能正常工作。我很快就要编辑我的问题了。。。

class Demo extends StatelessWidget {
  int step = 5;
  int maxStep = 10;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: ClipOval(
          child: Stack(
            children: [
              Img.back(),
              Positioned(
                child: Img.front(),
                top: step * 200 / maxStep,
                left: step * 200 / maxStep,
              ),
            ],
          ),
        ),
      ),
    );
  }
}


class Img extends StatelessWidget {
  final Color fill;

  Img.back([this.fill = Colors.green]);

  Img.front([this.fill = Colors.blue]);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: 200,
      color: fill,
    );
  }
}