animated_number

安装插件

flutter pub add animated_number

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

一个 Flutter 包，可为动态 UI 实现流畅的动画数字过渡。它会自动对整数值之间的变化进行动画处理，非常适合用于计数器、分数显示或任何随时间更新的数值数据。该包轻量且易于集成，支持所有主要平台，包括 Android、iOS、Web、macOS、Windows 和 Linux。通过自定义持续时间、曲线和格式选项，它在值变化时提供视觉反馈，从而提升用户体验。

适合场景

实时得分计数器
动态统计显示
进度指示器
动态价格更新
倒计时

主要特点

平滑数值插值
可自定义的动画持续时间
支持十进制数字
灵活的格式选项
跨平台兼容性

适合对象

游戏化应用
仪表板小部件
财务跟踪界面
教育类应用
交互式 UI 组件

使用建议

最适合整数或小数值
可能需要额外的样式设置以实现复杂格式化
仅限数值动画
不适合非数值型数据
高频更新带来的性能影响

原始 README

以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。

Animated Number flutter package

This is an custom widget developed for flutter with some awesome features that will make your users more satisfied when they look into their numbers.

Preview

Sample

Getting started

Supported platforms

	Android	iOS	Linux	macOS	Web	Windows
Support	SDK 16+	9.0+	Any	10.11+	Any	Any

Usage

To use this plugin, add animated_number as a dependency in your pubspec.yaml file.

Examples

AnimatedNumber(
    startValue: 0,
    endValue: 2000,
    duration: Duration(seconds: 2),
    isFloatingPoint: false,
    style: TextStyle(
    color: Colors.orange,
    fontSize: 24,
    ),
)

AnimatedNumber(
    startValue: 0,
    endValue: 5500.38273626732,
    duration: Duration(seconds: 5),
    isFloatingPoint: true,
    decimalPoint: 4,
    style: TextStyle(
        color: Colors.lightBlue,
        fontSize: 42,
    ),
)

Features

Properties	Type	Description
startValue	num	Desired start value.
endValue	num	Desired end value.
duration	Duration	Duration for the animation.
isFloatingPoint	bool	Flag that controls if the iteration of the animation will be integer or floating point.
decimalPoint	int	Desired decimal points.
style	TextStyle?	Text style.
textAlign	TextAlign?	How the text should be aligned horizontally.
prefixText	String?	Desired prefix text.
sufixText	String?	Desired sufix text.

Contact

Any questions, issues or improvements feel free to contact me.
yagon2395@gmail.com

License

MIT

所属分类

文本装饰、效果与动画

搜索插件、代码仓与 APP 分类