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

Question

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

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

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

喜欢下面的截图。

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

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

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

编辑：

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

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

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

Flutter: Image over Image, show upper image partially as value provided (e.g. 1 to 10)

dart

flutter

flutter-layout

flutter-image