loading_animation_widget

패키지 설치

flutter pub add loading_animation_widget

패키지 개요

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

Flutter 패키지로 사용자 정의 가능한 로딩 애니메이션, 스피너 및 로더를 제공하여 앱에서 로딩 또는 처리 상태를 시각적으로 나타냅니다. 다양한 애니메이션 스타일을 지원하며 비동기 작업 중 사용자 경험을 향상시키기에 적합합니다. 위젯은 가볍고 통합이 쉬우며 Android, iOS, Web, macOS, Windows, Linux 등 모든 주요 플랫폼에서 작동합니다. 데이터를 가져오거나 작업이 진행되는 동안 진행 상황을 표시하는 데 이상적입니다.

사용 사례

API 호출 중 로딩 상태 표시
백그라운드 처리 표시
데이터 가져오기 중 UI 개선
앱 초기화 진행률 표시
화면 전환 중 사용자 경험 개선

주요 기능

여러 내장 애니메이션 스타일
사용자 지정 가능한 크기 및 색상
크로스 플랫폼 호환성
Flutter와의 간편한 통합
경량이며 성능이 뛰어남
순환형 및 선형 로더 모두 지원

적합한 대상

반응형 UI를 구축하는 개발자
비동기 작업 중 시각적 피드백이 필요한 앱
애니메이션 인디케이터를 찾는 UI/UX 디자이너
다중 플랫폼 대상 프로젝트

고려 사항

복잡한 디자인을 위해 추가 스타일링이 필요할 수 있습니다
기본 속성 외의 사용자 정의는 제한적입니다
매우 높은 주파수 업데이트에 최적화되지 않음

원본 README

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

How to use

Installation

Add loading_animation_widget: to your pubspec.yaml dependencies then run flutter pub get

 dependencies:
  loading_animation_widget:

Import

Add this line to import the package.

import 'package:loading_animation_widget/loading_animation_widget.dart';

All loading animation APIs are same straight forward. There is a static method for each animation inside LoadingAnimationWidget class, which returns the Object of that animation. Both size and color are required some animations need more than one color.

Loading animation with one color

Scaffold(
    body: Center(
      child: LoadingAnimationWidget.staggeredDotsWave(
        color: Colors.white,
        size: 200,
      ),
    ),

Loading animation with more than one color. You have to provide both required colors.

Scaffold(
    body: Center(
        child: LoadingAnimationWidget.twistingDots(
          leftDotColor: const Color(0xFF1A1A3F),
          rightDotColor: const Color(0xFFEA3799),
          size: 200,
        ),
      ),