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

odometer 封面
插件详情v3.0.0

odometer

高度可定制的控件,可用于数字过渡和计数器动画。

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
836
喜欢数
100
Pub 分数
150

安装插件

flutter pub add odometer

插件介绍

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

里程表是一个Flutter包,提供高度可定制的组件,用于实现平滑的数字过渡和计数器动画。它使开发者能够创建视觉上引人入胜的数字显示,如倒计时、得分计数器或动态值更新,并带有优雅的动画效果。该包支持多种样式选项,包括数字大小、颜色、间距和动画持续时间,非常适合仪表板、游戏或实时数据可视化。该包注重性能,可在Android、iOS、Web、macOS、Windows和Linux平台上无缝运行。

适合场景

  • 实时得分追踪
  • 倒计时计时器
  • 动态数据展示
  • 仪表板指标
  • 游戏得分计数器
  • 动画统计

主要特点

  • 平滑的数字过渡动画
  • 可自定义的数字外观
  • 可配置的动画速度
  • 支持负数
  • 响应式设计集成
  • 跨平台兼容性

适合对象

  • 游戏化功能
  • 数据可视化仪表板
  • 交互式 UI 元素
  • 教育类应用
  • 实时事件追踪器

使用建议

  • 多个实例可能影响性能
  • 需要仔细调整以适应高频更新
  • 仅限数值
  • 不适用于非数值过渡
  • 最好与稳定的数据源一起使用

原始 README

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

Build Status pub stars style: lint

Odometer

The package which was inspired by the package Odometer js.

Examples of counter animation customization are made using this package:

Examples Gif

In this package you will find pre-built widgets:

  • AnimatedSlideOdometerNumber
  • SlideOdometerTransition

and high modifiable widgets:

  • AnimatedOdometer
  • OdometerTransition

AnimatedSlideOdometerNumber

The ImplicitlyAnimatedWidget uses the AnimatedOdometer with the sliding and fading digits transitions.

   AnimatedSlideOdometerNumber(
     numberTextStyle: TextStyle(fontSize: 15),
     odometerNumber: OdometerNumber(_counter),
     duration: Duration(seconds: 1))

SlideOdometerTransition

The ExplicitlyAnimatedWidget uses the OdometerTransition with the sliding and fading digits transitions.

    SlideOdometerTransition(
      numberTextStyle: TextStyle(fontSize: 15),
      odometerAnimation: _odometerAnimation,
      duration: Duration(seconds: 1))

Base widgets AnimatedOdometer and OdometerTransition

The AnimatedOdometer is based on implicit animation, and the OdometerTransition is based on explicit animation. To customize the odometer, you need to use two OdometerAnimationTransitionBuilders for new and old numbers. You will have access to:

  • The digit
  • The digit place
  • The animation progress of this digit

所属分类

源码仓库

使用此插件的项目

暂无相关数据。