Flutter中钱包积分兑换时金额增长数字动画，求可用内置包

Flutter本身没有专门做数字增长的内置包，但有几个好用的第三方工具，也能自己手写简单逻辑实现你要的效果：

第三方包推荐 #

• countup：专门针对数字递增动画的包，支持自定义动画时长、小数位数、动画曲线，传入起始值和目标值就能直接用，非常省心。
• flutter_animate：通用动画库，不仅能实现数字增长，还能轻松和你的Lottie硬币动画做联动，灵活性拉满。
• animated_text_kit：里面的组件也能间接实现数字滚动效果，但相比专门的数字动画包，针对性稍弱。

手写原生实现（不依赖第三方） #

如果不想加额外依赖，用Flutter自带的动画组件就能搞定：

1. 用AnimationController控制动画的时长
2. 用Tween<double>定义数字从起始值到目标值的变化范围
3. 监听动画值的变化，实时更新显示的文本（还能顺手格式化金额，比如保留两位小数）

给你一段示例代码参考：

class NumberGrowAnimation extends StatefulWidget {
  final double targetAmount;
  const NumberGrowAnimation({super.key, required this.targetAmount});

  @override
  State<NumberGrowAnimation> createState() => _NumberGrowAnimationState();
}

class _NumberGrowAnimationState extends State<NumberGrowAnimation> with SingleTickerProviderStateMixin {
  late AnimationController _animController;
  late Animation<double> _numAnimation;

  @override
  void initState() {
    super.initState();
    // 初始化动画控制器，设置时长为1.5秒
    _animController = AnimationController(
      duration: const Duration(milliseconds: 1500),
      vsync: this,
    );
    // 定义从0到目标金额的动画曲线
    _numAnimation = Tween<double>(begin: 0, end: widget.targetAmount).animate(
      CurvedAnimation(parent: _animController, curve: Curves.easeOut)
    )..addListener(() {
        setState(() {});
      });
    // 启动动画
    _animController.forward();
  }

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

  @override
  Widget build(BuildContext context) {
    return Text(
      "¥${_numAnimation.value.toStringAsFixed(2)}",
      style: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
    );
  }
}

你可以把这段组件和你的Lottie硬币动画放在同一个页面，触发兑换操作时同时启动两个动画，就能实现和示例动图一样的效果了。

内容的提问来源于stack exchange，提问作者abdalrahman alenzi