Блог или учебник для наложения различных виджетов и сохранения прозрачности некоторых слоев

Question

Я пытаюсь добиться того, чтобы у меня был алфавит «А» на экране. В теле текста я хочу показать контейнер, высота которого варьируется. Итак, на фоне экрана, скажем, цвет зеленый. Текст «А» на экране прозрачный. Внутри «А» текст заполнен желтым цветом. Но цвет постепенно понижает уровень высоты. И новый цвет раскрывается для уменьшенного пространства высоты, скажем, розовый.

Answer 1

Если вы говорите, что используете текст, измените высоту, чтобы изменить цвет. Вот мое решение за три шага.

1. Используйте стек 2. Используйте Анимированный контейнер для уменьшения высоты 3. Используйте таймер с продолжительностью 1se c.

@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),)
                    )
                      ],
                    ),