{"id":32299928,"url":"https://github.com/mingsnx/animated_digit","last_synced_at":"2026-02-20T09:31:34.085Z","repository":{"id":45164178,"uuid":"360417357","full_name":"mingsnx/animated_digit","owner":"mingsnx","description":"A scrolling digit animation widget","archived":false,"fork":false,"pushed_at":"2025-09-25T02:40:37.000Z","size":28015,"stargazers_count":43,"open_issues_count":1,"forks_count":23,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-11-03T15:20:36.879Z","etag":null,"topics":["animated","animated-number","animation","dart","flutter","number"],"latest_commit_sha":null,"homepage":"","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mingsnx.png","metadata":{"files":{"readme":"README.cn-zh.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-04-22T06:38:36.000Z","updated_at":"2025-09-25T03:22:06.000Z","dependencies_parsed_at":"2025-08-16T14:44:06.538Z","dependency_job_id":null,"html_url":"https://github.com/mingsnx/animated_digit","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mingsnx/animated_digit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mingsnx%2Fanimated_digit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mingsnx%2Fanimated_digit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mingsnx%2Fanimated_digit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mingsnx%2Fanimated_digit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mingsnx","download_url":"https://codeload.github.com/mingsnx/animated_digit/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mingsnx%2Fanimated_digit/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29647657,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-20T09:27:29.698Z","status":"ssl_error","status_checked_at":"2026-02-20T09:26:12.373Z","response_time":59,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animated","animated-number","animation","dart","flutter","number"],"created_at":"2025-10-23T05:07:43.084Z","updated_at":"2026-02-20T09:31:34.079Z","avatar_url":"https://github.com/mingsnx.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://flutter.dev/\"\u003e\n    \u003cimg src=\"https://www.vectorlogo.zone/logos/flutterio/flutterio-ar21.svg\" alt=\"flutter\" style=\"vertical-align:top; margin:4px;\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://dart.dev/\"\u003e\n    \u003cimg src=\"https://www.vectorlogo.zone/logos/dartlang/dartlang-ar21.svg\" alt=\"dart\" style=\"vertical-align:top; margin:4px;\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://github.com/mingsnx/animated_digit/blob/master/README.md\"\u003eEnglish\u003c/a\u003e | 中文简体\n\u003c/p\u003e\n\n# animated_digit\n\n滚动的动画数字 widget，凡是需要动画效果的数字，简单易用。\n\n![示列 GIF 演示](https://raw.githubusercontent.com/mingsnx/animated_digit/master/example/animat-digit-example.gif)\n\n## Usage\n\n#### 🚴🏻 简单展示\n```dart\n// 只展示\nAnimatedDigitWidget(\n  value: 9999\n),\n```\n#### 🚄 简单展示 \u0026 🔥 状态\n```dart\n// 极简控制\nint value = 9999;\nAnimatedDigitWidget(\n  value: value\n  textStyle: TextStyle(color: Colors.pink, fontSize: 24),\n),\nsetState((){\n  value = 191919;\n});\n```\n\n#### 🎡 通过 Controller 来控制\n\u003e 内置精确度计算\n```dart\nAnimatedDigitController _controller = AnimatedDigitController(10240.987);\n\nAnimatedDigitWidget(\n  controller: _controller,\n  textStyle: TextStyle(color: Colors.pink, fontSize: 24),\n  fractionDigits: 2, // 保留的小数位数，只截取，不会四舍五入\n  enableSeparator: true, // 启用数字分隔，如这样 10,240.98\n),\n// UI结果 =\u003e 10,240.98\n\n// 累加一个数字\n_controller.addValue(1314);\n\n// 减 \n_controller.minusValue(1314); // 自 v3.1.0 起添加\n\n// 乘 \n_controller.timesValue(1314); // 自 v3.1.0 起添加\n\n// 除 \n_controller.divideValue(1314); // 自 v3.1.0 起添加\n\n// 重置一个数字\n_controller.resetValue(1314);\n\n// 最后\n_controller.dispose();\n```\n\n### 🖼 UI效果图 \u0026 💻 代码示列\n\n[![ex1.png](https://raw.githubusercontent.com/mingsnx/animated_digit/master/example/ex1.png)](https://raw.githubusercontent.com/mingsnx/animated_digit/master/example/ex1.png)\n```dart\nAnimatedDigitWidget(\n  value: 12531.98, // or use controller\n),\n```\n[![ex2.png](https://raw.githubusercontent.com/mingsnx/animated_digit/master/example/ex2.png)](https://raw.githubusercontent.com/mingsnx/animated_digit/master/example/ex2.png)\n```dart\nAnimatedDigitWidget(\n  value: 12531.98, // or use controller\n  enableSeparator: true,\n),\n```\n[![ex3.png](https://raw.githubusercontent.com/mingsnx/animated_digit/master/example/ex3.png)](https://raw.githubusercontent.com/mingsnx/animated_digit/master/example/ex3.png)\n```dart\nAnimatedDigitWidget(\n  value: 12531.98, // or use controller\n  fractionDigits: 2,\n  enableSeparator: true,\n),\n```\n[![ex4.png](https://raw.githubusercontent.com/mingsnx/animated_digit/master/example/ex4.png)](https://raw.githubusercontent.com/mingsnx/animated_digit/master/example/ex4.png)\n```dart\nSingleDigitProvider(\n  data: SingleDigitData(\n    useTextSize: true,\n    builder: (size, value, isNumber, child) {\n      return isNumber ? child : FlutterLogo();\n    },\n  ),\n  child: AnimatedDigitWidget(\n    value: 12531.98, // or use controller\n    textStyle: TextStyle(color: Colors.pink[200], fontSize: 30),\n    separateLength: 1,\n    separateSymbol: \"#\",\n    enableSeparator: true,\n  ),\n),\n```\n[![ex5.png](https://raw.githubusercontent.com/mingsnx/animated_digit/master/example/ex5.png)](https://raw.githubusercontent.com/mingsnx/animated_digit/master/example/ex5.png)\n```dart\nAnimatedDigitWidget(\n  value: 12531.98, // or use controller\n  textStyle: TextStyle(color: Colors.orangeAccent.shade700, fontSize: 30),\n  fractionDigits: 2,\n  enableSeparator: true,\n  separateSymbol: \"·\",\n  separateLength: 3,\n  decimalSeparator: \",\",\n  prefix: \"\\$\",\n  suffix: \"€\",\n),\n```\n\n### ✌ 如果想根据 `value` 来改变颜色\n通过 `valueColors` 添加一个 `ValueColor` 对象，它是一个数组，你可以添加更多，但始终取最后一个符合条件的。\n\u003e 颜色自 v3.3.1+1 起支持动画过渡，不再是直接切换颜色，避免切换生硬\n```dart\nint value = 9999; // 或使用 Controller.value\nAnimatedDigitWidget(\n  value: value,\n  textStyle: TextStyle(\n    color: Colors.orange[200],\n    fontSize: 30,\n  ),\n  valueColors: [\n    ValueColor(\n      // 当 value \u003c= 0 时，颜色变为红色\n      condition: () =\u003e value \u003c= 0,\n      color: Colors.red,\n    ),\n    // 你可以添加更多，但始终取最后一个符合条件的。\n  ],\n),\n```\n\n### 🍓如果第一次加载不需要从 0 开始的滚动动画可以设置\n```dart\nAnimatedDigitWidget(\n  ...,\n  firstScrollAnimate: false // 设置为 false，自 v3.3.1+1 开始\n),\n```\n\n### 🍓支持最小整数位不足补0\n\u003e 仅限范围 [0, 9]，像这样：🐧0 ➡️ 00、1 ➡️ 01、2 ➡️ 02 ...\n```dart\nAnimatedDigitWidget(\n  ...,\n  fractionDigits: 0, // 必须为 0，小数的话确实没必要了吧（痛苦面具）~\n  enableMinIntegerDigits: true // 设置为 true，自 v3.3.1+2 开始\n),\n```\n\n### 🐳 Widget 参数 - [文档](https://pub.flutter-io.cn/documentation/animated_digit/latest/animated_digit/AnimatedDigitWidget-class.html)\n\n#### **🚀 必填参数**\n\n\n| Prop     | Type  |           Default |         Description  |\n| -------  | ---- | ------------  | ------------ |\n| **controller**  |  AnimatedDigitController  | null  | **数字控制器**，可以通过`addValue` 和 `resetValue` 来控制显示的数字。 \u003cbr /\u003e ⚠️ `value` 和 `controller` 不能同时为 `null` |\n| **value** |  num  | null | **显示的数字**，当与 `controller` 同时存在时，**`controller` 具有更高的优先级**，\u003cbr /\u003e ⚠️ `value` 和 `controller` 不能同时为 `null` |\n\n---\n\n#### **🍑 设置文字样式和容器样式**\n\n| Prop     | Type  |           Default |         Description  |\n| -------  | ---- | ------------  | ------------ |\n| **textStyle**  |  TextStyle  | null / TextStyle(color: Colors.black,fontSize: 25);  | 数字字体样式 | numbers text style |\n| **boxDecoration** |  BoxDecoration  | null | 同 `Container` 的 `decoration` 使用 |\n\n---\n\n#### **🍇 设置整数（默认）或小数类型**\n\n| Prop     | Type  |           Default |         Description  |\n| -------  | ---- | ------------  | ------------ |\n| **fractionDigits**  |  int  | 0  | 小数位 ( `1000520.987` ) \u003cbr/\u003e `0` =\u003e `1000520`; \u003cbr/\u003e `1` =\u003e `1000520.9`; \u003cbr/\u003e `2` =\u003e `1000520.98`; \u003cbr/\u003e `3` =\u003e `1000520.987`; \u003cbr/\u003e `...` =\u003e `1000520.[...]`;  \u003cbr/\u003e 默认 `0` 为整数；当为小数时，值不足位数则向右补 `0`，采用的是截断方式，所以不存在四舍五入的情况|\n\n---\n\n#### **🍓 设置数字展示样式**\n\n| Prop     | Type  |           Default |         Description  |\n| -------  | ---- | ------------  | ------------ |\n| **decimalSeparator**  |  String  | `.`  | **小数分隔符**，默认 `.`，可以替换为其他的符号来代替小数分隔符 |\n| **enableSeparator** |  bool  | false | **是否启用数字分隔符** 默认 `false` 不开启，开启样例：`1000520` =\u003e `1,000,520` ， \u003cbr/\u003e **⚠️ 只有为 `true` 时，`separateLength` and `separateSymbol` 才会生效**  |\n| **separateSymbol**    |  String  | `,`   | ⚠️ **当 `enableSeparator = true` 有效。**⚠️ \u003cbr /\u003e 数字分隔的**符号**（例如：千分位符号） \u003cbr/\u003e `,` =\u003e `1,000,520` \u003cbr/\u003e `'` =\u003e `1'000'520` \u003cbr/\u003e `-` =\u003e `1-000-520` |\n| **separateLength**   |  int  | 3 | ⚠️ **当 `enableSeparator = true` 有效。**⚠️ \u003cbr /\u003e 数字分隔的**长度**，默认为 `3` (千分位)。\u003cbr\u003e 当 `separateSymbol` 为 `,` : \u003cbr/\u003e  `1` =\u003e `1,0,0,0,5,2,0` \u003cbr/\u003e `2` =\u003e `1,00,05,20` \u003cbr/\u003e `3` =\u003e `1,000,520`\n\n---\n\n#### **🥝 设置滚动动画**\n\n| Prop     | Type  |           Default |         Description  |\n| -------  | ---- | ------------  | ------------ |\n| **duration**  |  Duration  | Duration(milliseconds: 300) | 动画持续时间 |\n| **curve** |  Curve  | Curves.easeInOut | [观看动画曲线](https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in_out.mp4) |\n| **loop**    |  bool  |  true  | 是否采用无限循环滚动，默认 `true` 始终向下滚动，不会从 9 -\u003e 0 时向上滚动，反之上下来回滚动。  |\n\n---\n\n#### **🍎 设置数字的尺寸采用方式**\n\n| Prop     | Type  |           Default |         Description  |\n| -------  | ---- | ------------  | ------------ |\n| **autoSize**  |  bool  | true | 默认 `true` 根据（数字 / 符号）本身的大小来自动伸缩，`false`，采用数字 `0` 的文字大小作为每个数字的容器大小，这样能够保证等宽，不过看起来会觉得 `1` 与其他数字有细微的间隔 😊  |\n| **animateAutoSize** |  bool  | true | 默认 `true` 为使用动画来伸缩大小，`false` 则会直接变化到该数字/符号的大小 |\n\n---\n\n#### **🍒 设置数字前缀和后缀**\n\n| Prop     | Type  |           Default |         Description  |\n| -------  | ---- | ------------  | ------------ |\n| **prefix**  |  String  | null | 默认 `null` 不会添加前缀字符串。 |\n| **suffix** |  String  | null | 默认 `null` 不会添加后缀字符串。 |\n\n\n\n### 感谢\n[number_precision](https://pub.flutter-io.cn/packages/number_precision)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmingsnx%2Fanimated_digit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmingsnx%2Fanimated_digit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmingsnx%2Fanimated_digit/lists"}