搜尋套件、儲存庫與 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

所屬分類

原始碼儲存庫

使用此套件的專案

暫無相關資料。