Search packages, repositories and app categories

checkmark cover
Package detailsv0.0.2+1

checkmark

Animated check mark. Customise colors, curves, duration, and more.

AndroidiOSWebmacOSWindowsLinux
30-day downloads
10
Likes
26
Pub points
160

Install package

flutter pub add checkmark

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

A Flutter package that provides an animated checkmark widget, allowing customization of colors, animation curves, duration, and more. Designed for smooth visual feedback in user interfaces, it enhances form validation, task completion, and interactive elements. The package supports all major platforms including Android, iOS, Web, macOS, Windows, and Linux, ensuring consistent behavior across devices. Ideal for developers seeking a lightweight, reusable, and visually appealing checkmark animation.

Use cases

  • Form validation feedback
  • Task completion indicators
  • Interactive button states
  • Loading success transitions
  • Onboarding progress indicators

Key features

  • Customizable colors
  • Adjustable animation duration
  • Smooth curve animations
  • Cross-platform support
  • Simple integration with Flutter
  • Configurable stroke width

Suitable for

  • UI/UX designers using Flutter
  • Developers building forms or checklists
  • Apps needing visual confirmation of actions
  • Lightweight animation needs
  • Projects requiring consistent feedback visuals

Considerations

  • Limited to checkmark animation only
  • No built-in text or label support
  • Requires manual positioning in layout
  • Animation may not suit high-performance games
  • Not suitable for complex state transitions

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

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.

Categories

Source repository

Projects using this package