Измените значение текстового виджета, анимируя непрозрачность до 0 и обратно до 1 в Flutter

Question

Как я могу сделать это во Флаттере:

Я хочу обновить значение виджета Text при нажатии FloatingActionButton:

• Анимировать непрозрачность Text виджет уменьшается до 0 в течение 1 секунды (скрыть старое значение)
• Изменить значение виджета Text (установить новое значение - setState?)
• Анимация непрозрачности виджета Text до 1 в течение 1 секунды (показать новое значение)

Можно ли сделать это с помощью AnimatedOpacity?

Answer 1

Да, вы можете, не забудьте дождаться второго вызова setState, чтобы реанимировать текст обратно.

  String text = 'Text Initial';
  double opacity = 1.0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        floatingActionButton: FloatingActionButton(
          onPressed: () async {
            setState(() {
              opacity = 0.0;
            });
            await Future.delayed(const Duration(seconds: 1));
            setState(() {
              text = 'New Text';
              opacity = 1.0;
            });
          },
        ),
        body: Center(
          child: AnimatedOpacity(
            duration: const Duration(seconds: 1),
            opacity: opacity,
            child: Text(text),
          ),
        ),
      ),
    );
  }