flutter - Flutter：Image over Image，部分显示上部图像作为提供的值（例如1到10）

Question

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

现在，背面的图像将保持静止。（这个完成了）

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

像下面的截图。

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

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

如何在颤振 Dart 中实现这一目标？

编辑：

现在我有图像遮罩的问题。（见下面的截图）

标签： flutterdartflutter-layoutflutter-image

Answer 1

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，所以我使用了一个简单的容器，但概念是一样的。