如何在 Flutter 中创建一个字符串逐个字母的“淡入”效果？

Question

我正在尝试使用hintText制作具有字符串淡入淡出效果的文本字段，本例为“请输入您的密码”我希望淡入淡出效果显示该字符串的字符（“请输入您的密码”）一次按顺序排列字母/字符。我该怎么做呢？

这是我正在尝试做的事情的视频：

我知道如何使整个字符串一起淡入和淡出，但我不确定如何在字符串中一次制作一个字符的淡入动画。它就像淡入和闪光效果，但我已经尝试过这些，但它不是我想要的

Answer 1

-- 尝试使用此代码来创建动画文本。

import 'package:flutter/material.dart';

class FadingText extends StatefulWidget {
  const FadingText({Key? key, required this.text}) : super(key: key);

  final String text;

  @override
  State<FadingText> createState() => _FadingTextState();
}

class _FadingTextState extends State<FadingText> {
  late final AnimationController _controller;
  late final Animation<double> _opacityAnimation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(milliseconds: 300),
      vsync: this,
    );
    _opacityAnimation = CurvedAnimation(
      parent: _controller,
      curve: Curves.easeIn,
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _controller,
      builder: (context, child) => Opacity(
        opacity: _opacityAnimation.value,
        child: child,
      ),
      child: SingleChildScrollView(
        child: Text(
          widget.text,
          style: const TextStyle(fontSize: 24),
        ),
      ),
    );
  }

  void startAnimation() {
    _controller.forward();
  }
}