Анимация флаттера без продолжительности

#flutter #animation #dart

#флаттер #Анимация #dart

Вопрос:

У меня есть виджет с отслеживанием состояния, в котором я пытаюсь изменить текстовый стиль, как показано ниже.

 AnimatedDefaultTextStyle(
                duration: Duration(seconds: 3),
                child: Text(word),
                style: hideWord
                    ? TextStyle(
                        color: Colors.white,
                        fontSize: 40,
                        fontWeight: FontWeight.w300)
                    : TextStyle(
                        color: Colors.black,
                        fontSize: 40,
                        fontWeight: FontWeight.w300),
              ),

Однако анимация выполняется мгновенно и не занимает определенные 3 секунды для завершения, на самом деле анимации вообще нет, просто изменение текста с черного на белый, а не длительность, установленная в animationDefaultTextStyle.

Я запускаю анимацию с помощью следующего из другого виджета с отслеживанием состояния при событии щелчка.

 cardlist[currentCardIndex].hideWord = true;

Чего мне здесь не хватает? Я мог бы реализовать BLOC и добавить слушателя в виджет card, а затем setState, но это кажется излишним для того, что должно быть основным триггером.

1. «Однако анимация происходит сразу после загрузки виджета» — duration: Duration(seconds: 3) означает продолжительность анимации, а не время ее запуска

2. Извините, мое объяснение было неверным. Переход от черного к белому происходит мгновенно. Это не займет 3 секунды.

3. class FooText extends StatefulWidget { @override _FooTextState createState() => _FooTextState(); } class _FooTextState extends State<FooText> { var colors = [Colors.black, Colors.orange]; var idx = 0; @override Widget build(BuildContext context) { return AnimatedDefaultTextStyle( child: InkWell( onTap: () => setState(() => idx ^= 1), child: Center(child: Text('click me')), ), style: TextStyle( color: colors[idx], fontSize: 64, ), duration: 500.milliseconds, ); } }

4. и? анимирует ли он цвета за промежуток времени 500 мс?

5. Я протестирую этот avo. Спасибо за код

Ответ №1:

если вы хотите запустить анимацию через 3 секунды после загрузки виджета .., вы можете использовать приведенный ниже код…

Длительность анимации — одна секунда

 class MyHome extends StatefulWidget {
  @override
  _MyHomeState createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> {
  var hideWord = true;

  @override
  void initState() {
    super.initState();
    Future.delayed(Duration(seconds: 3)).then((value) {
      setState(() {
        hideWord = false;
      });
    });
  }


  @override
  Widget build(BuildContext context) {

    return Scaffold(
        backgroundColor: Colors.white,
        body: AnimatedDefaultTextStyle(
          duration: Duration(seconds: 1),
          child: Text("word"),
          style: hideWord
              ? TextStyle(
              color: Colors.white,
              fontSize: 40,
              fontWeight: FontWeight.w300)
              : TextStyle(
              color: Colors.black,
              fontSize: 40,
              fontWeight: FontWeight.w300),
        ));
  }
}

1. Спасибо за ответ. Мое объяснение было неверным, анимация или переход происходят мгновенно, а не в течение 3 секунд

2. добро пожаловать! вы пробовали приведенный выше код? Я пытался сделать то, что вы хотите…