패키지, 저장소 및 앱 카테고리 검색

checkmark 표지
패키지 상세v0.0.2+1

checkmark

애니메이션 체크 마크. 색상, 곡선, 지속 시간 등을 맞춤설정하세요.

AndroidiOSWebmacOSWindowsLinux
30일 다운로드
10
좋아요
26
Pub 점수
160

패키지 설치

flutter pub add checkmark

패키지 개요

공개 정보를 바탕으로 생성한 선택 가이드입니다.

색상, 애니메이션 곡선, 지속 시간 등을 사용자 정의할 수 있는 애니메이션 체크마크 위젯을 제공하는 플러터 패키지입니다. 사용자 인터페이스에서 부드러운 시각적 피드백을 위해 설계되었으며, 폼 검증, 작업 완료 및 상호작용 요소를 향상시킵니다. 안드로이드, iOS, 웹, macOS, 윈도우, 리눅스 등 모든 주요 플랫폼을 지원하여 기기 간 일관된 동작을 보장합니다. 가볍고 재사용 가능하며 시각적으로 매력적인 체크마크 애니메이션을 찾는 개발자에게 이상적입니다.

사용 사례

  • 폼 검증 피드백
  • 작업 완료 표시기
  • 인터랙티브 버튼 상태
  • 로딩 성공 전환
  • 온보딩 진행률 표시기

주요 기능

  • 사용자 지정 색상
  • 조정 가능한 애니메이션 지속 시간
  • 부드러운 곡선 애니메이션
  • 크로스 플랫폼 지원
  • 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.

카테고리

소스 저장소

이 패키지를 사용하는 프로젝트