animated_text_lerp

패키지 개요

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

AnimatedTextLerp는 숫자 또는 문자열 값 사이를 부드럽게 애니메이션할 수 있는 간단한 위젯을 제공하는 Flutter 패키지입니다. 증가하거나 감소하는 숫자, 통화 업데이트, 시각적 연속성을 갖춘 텍스트 콘텐츠 변경과 같은 동적 텍스트에 유연한 전환을 가능하게 합니다. 대시보드, 카운터 및 실시간 데이터 표시에 적합하며, 복잡한 애니메이션 없이 보다 매끄러운 시각 효과를 위해 보간(Lerp)을 활용합니다. 이 패키지는 Android, iOS, Web, macOS, Windows, Linux 등 주요 플랫폼을 모두 지원합니다.

사용 사례

실시간 숫자 카운터
화폐 가치 업데이트
동적 텍스트 전환
대시보드 메트릭스
로딩 진행률 표시기
애니메이션 통계

주요 기능

lerp 기반의 부드러운 애니메이션
숫자와 문자열 모두를 지원합니다
최소한의 설정 필요
크로스 플랫폼 호환성
사용자 정의 가능한 지속 시간 및 곡선
내장된 이징 함수

적합한 대상

간단한 애니메이션 카운터
데이터 시각화 위젯
사용자 인터페이스 개선
교육 앱
재무 대시보드

고려 사항

복잡한 애니메이션에는 적합하지 않음
기본 속성 외의 맞춤 설정이 제한적
작은 텍스트 변경에 가장 적합
고주기 업데이트 시 성능에 영향을 미칠 수 있습니다
문자열 포맷팅을 신중하게 다뤄야 합니다

원본 README

연결된 소스 저장소의 README 원문 스냅샷입니다. 최신 내용은 저장소에서 확인하세요.

Simple widgets to animate between number or string text. Useful for number increase/decrease animation, currency value animation or string content changing animation.

Features

Similar to a simple Text widget.
Animating between number (int or double) with AnimatedNumberText.
Animating between string, which will lerp each character respectively with AnimatedStringText.
TextStyle animation supported.
Think of Flutter's pre-built animated widget like AnimatedOpacity, AnimatedAlign, ..., but with text.

Getting started

First import it:

import 'package:animated_text_lerp/animated_text_lerp.dart';

Usage

AnimatedNumberText

The widget support lerping between number values. Just setState with the current value and the widget will start animating to it.

AnimatedNumberText(
  value, // int or double
  curve: Curves.easeIn,
  duration: const Duration(seconds: 1),
  style: const TextStyle(fontSize: 30),
  formatter: (value) {
    final formatted =
    intl.NumberFormat.currency(locale: "en").format(value);
    return formatted;
  },
)

AnimatedStringText

The widget support lerping between string values. Just setState with the current value and the widget will start animating to it. Each character will lerp to the new corresponding one respectively.

AnimatedStringText(
  value, // string
  curve: Curves.easeIn,
  duration: const Duration(seconds: 1),
  style: const TextStyle(fontSize: 30),
)

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

패키지 설치