用于分层不同小部件并保持某些层透明的博客或教程答案

【问题标题】：Blog or tutorial for layering different widgets and keeping some layers transparent用于分层不同小部件并保持某些层透明的博客或教程
【发布时间】：2020-05-04 23:49:31
【问题描述】：

我想要实现的是屏幕上有一个字母“A”。在文本正文中，我想显示一个高度变化的容器。所以在背景屏幕中可以说颜色是绿色。屏幕上的文字“A”是透明的。在“A”文本内填充黄色。但颜色逐渐降低其高度水平。并且为减少的高度空间揭示了一种新颜色，比如说粉红色。

【问题讨论】：

你能添加一张你真正想要的图片吗？
当我说降低它的高度时，我的意思是它的高度随着时间的推移而降低的动画形状。所以黄色的颜色水平不断下降到底部，粉红色的颜色不断增加到底部。
在您的原始问题中，您根本没有提到任何动画 - 但无论如何，您可以使用 ShaderMask 和 blendMode: BlendMode.srcIn 和线性渐变作为着色器
@pskink 您能否向我推荐我需要涵盖的任何内容（博客/文档），以简要了解与覆盖小部件相关的所有必需类/选项。或者我需要研究的各种颤振类是什么。
AnimatedBuilder / ShaderMask / LinearGradient

标签： flutter flutter-layout flutter-animation

【解决方案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),)
                    )
                      ],
                    ),

【讨论】：