パッケージ、リポジトリ、アプリカテゴリを検索

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.

カテゴリー

ソースリポジトリ

このパッケージを使用しているプロジェクト