animated_flip_counter

套件介紹

根據套件公開資料產生的選型評估，僅供參考。

一個 Flutter 小部件，在數字之間切換時創建平滑的動畫翻轉效果。它支援自訂樣式、小數位數和負值，非常適合應用程式中的動態計數器。動畫是隱式的，表示它會自動處理過渡，而不需要顯式的動畫控制器。非常適合用於分數顯示、計時器或任何需要視覺上吸引人的數字變化的 UI 元件。

適用情境

遊戲中的得分追蹤
計時器顯示
動態資料視覺化
進度指示器
Countdowns
財務儀表板

主要特色

平滑翻轉動畫
可自訂文字樣式
支援小數
處理負數
隱式動畫控制
跨平台相容性

適合對象

遊戲開發者
儀表板創建者
UI/UX 設計師
即時資料應用
互動式組件

使用建議

多個實例可能影響效能
僅限數值
需要仔細的樣式設定以確保可讀性
不適合高頻率更新
最適合與中等動畫持續時間搭配使用

原始 README

以下為關聯原始碼儲存庫的 README 原文快照，最新內容請造訪原始碼儲存庫。

An implicit animation widget that flips from one number to another.

Usage

It can be useful to display information that's constantly changing.

Animated Counter

Simply pass in a value and an optional duration and curve, just like any other implicit animation widget in Flutter.

AnimatedFlipCounter(
  duration: Duration(milliseconds: 500),
  value: _value, // pass in a value like 2014
)

Decimal Display

Use fractionDigits to specify how many digits to show after the decimal point. It handles negative values as well.

AnimatedFlipCounter(
  value: _value,
  fractionDigits: 2, // decimal precision
  suffix: "%",
  textStyle: TextStyle(
      fontSize: 40,
      color: _value >= 0 ? Colors.green : Colors.red,
  ),
)

Custom Style

Use the familiar TextStyle parameter for styling, and use prefix and suffix for additional texts.

AnimatedFlipCounter(
  value: _value,
  prefix: "Level ",
  textStyle: TextStyle(
    fontSize: 80,
    fontWeight: FontWeight.bold,
    letterSpacing: -8.0,
    color: Colors.yellow,
    shadows: [
      BoxShadow(
        color: Colors.orange,
        offset: Offset(8, 8),
        blurRadius: 8,
      ),
    ],
  ),
)

搜尋套件、儲存庫與 APP 分類