Flutter：图像覆盖图像，部分显示上图作为提供的值例如 1 到 10

问题描述

我有一个图像视图，显示两个图像（一个在另一个之上）。 （我是用 Stack 实现的）

现在，背面的图像将保持静态。 （到此结束）

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

喜欢下面的截图。

如果您在屏幕截图中注意到，该表情符号是如何从右下角显示的。

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

如何在 Flutter Dart 中实现这一点？

编辑：

现在我遇到了图像遮罩的问题。 （见下图）

解决方法

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

---

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