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

checkmark 封面
套件詳情v0.0.2+1

checkmark

動畫對勾。自訂顏色、曲線、持續時間等。

AndroidiOSWebmacOSWindowsLinux
近 30 天下載
10
喜歡數
26
Pub 分數
160

安裝套件

flutter pub add checkmark

套件介紹

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

一個 Flutter 套件,提供可動畫的勾選標記小工具,允許自訂顏色、動畫曲線、持續時間等。專為使用者介面中的順暢視覺反饋而設計,可增強表單驗證、任務完成與互動元件的效果。此套件支援所有主要平台,包括 Android、iOS、Web、macOS、Windows 與 Linux,確保跨裝置行為一致。非常適合尋求輕量級、可重複使用且視覺效果出色的勾選標記動畫的開發者。

適用情境

  • 表單驗證反饋
  • 任務完成指示器
  • 互動式按鈕狀態
  • 載入成功過渡
  • 引導進度指示器

主要特色

  • 可自訂顏色
  • 可調整的動畫持續時間
  • 平滑曲線動畫
  • 跨平台支援
  • 與 Flutter 的簡單整合
  • 可設定的描邊寬度

適合對象

  • 使用 Flutter 的 UI/UX 設計師
  • 開發表單或清單的開發者
  • 需要視覺確認動作的應用程式
  • 輕量級動畫需求
  • 需要一致回饋視覺效果的專案

使用建議

  • 僅限復選標記動畫
  • 無內建文字或標籤支援
  • 需要在佈局中手動定位
  • 動畫可能不適合高性能量遊戲
  • 不適合複雜的狀態轉換

原始 README

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

An animated check mark widget. It automatically animates when you toggle it on/off. It can also be styled.

Appearance

Parameters

class CheckMark extends ImplicitlyAnimatedWidget {
  const CheckMark({
    Key? key,
    Duration duration = const Duration(milliseconds: 300),
    Curve curve = Curves.linear,
    VoidCallback? onEnd,
    this.active = false,
    this.activeColor = const Color(0xff4fffad),
    this.inactiveColor = const Color(0xffe3e8ed),
    this.strokeWidth = 5,
    this.strokeJoin = StrokeJoin.round,
    this.strokeCap = StrokeCap.round,
  })
}

Usage

Check the /example folder for an example of the above functionality.

Minimal example:

SizedBox(
  height: 50,
  width: 50,
  child: CheckMark(
    active: checked,
    curve: Curves.decelerate,
    duration: const Duration(milliseconds: 500),
  ),
),

Additional information

If you find any problems, please file an issue if one doesn't already exist.

所屬分類

原始碼儲存庫

使用此套件的專案