搜索插件、代码仓与 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.

所属分类

源码仓库

使用此插件的项目