博客或教程，用于对不同的小部件进行分层，并使某些层保持透明

Question

我想达到的目的是，我在屏幕上有一个字母'A'。在文本主体内部，我想显示一个高度变化的容器。因此，在背景屏幕中，可以说颜色是绿色。屏幕上的文字“ A”是透明的。在“ A”文本内部用黄色填充。但是颜色逐渐降低其高度水平。并为减少的高度空间显示了一种新的颜色，例如粉红色。

Answer 1

如果您说的是您使用的文字，请更改高度以更改颜色。这是我的三步解决方案。

1。使用堆栈2.使用动画容器降低高度3.使用计时器，持续时间为1秒。

@override
  void initState() {
    super.initState();
    Timer.periodic(Duration(seconds: 1), (Timer t) => changeHight());
  }

  changeHight(){
    setState(() {
      textHeight = 200;
    });
  }


               Stack(
                      children: <Widget>[
                      Container(
                      color: Colors.green,
                      width: 200.0,
                      height: 200.0,
                      child: Align(
                      alignment: Alignment.topCenter,
                      child: Text("A",style: TextStyle(fontSize: 200,color: Colors.yellow),))
                    ),

                    AnimatedContainer(
                      alignment: Alignment.topCenter,
                      duration: Duration(seconds: 2),
                      height: textHeight,
                      width: 200,
                      child:  Text("A",style: TextStyle(fontSize: 200,color: Colors.pink),)
                    )
                      ],
                    ),