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

flutter_spinkit 표지
패키지 상세v5.2.2

flutter_spinkit

flutter로 애니메이션 처리된 로딩 인디케이터 모음입니다. @tobiasahlin의 SpinKit에서 많은 영감을 받았습니다.

AndroidiOSWebmacOSWindowsLinux
30일 다운로드
51.1만
좋아요
4.7천
Pub 점수
140

패키지 설치

flutter pub add flutter_spinkit

패키지 개요

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

flutter_spinkit는 사용자 정의가 가능한 애니메이션 로딩 인디케이터를 제공하는 Flutter 패키지입니다. SpinKit에서 영감을 받아 다양한 앱 환경에 적합한 시각적으로 매력적인 스피너와 로더를 제공합니다. 이 패키지는 Android, iOS, Web, macOS, Windows, Linux 등 모든 주요 플랫폼을 지원합니다. 각 인디케이터는 Flutter의 렌더링 엔진을 사용하여 부드러운 애니메이션으로 구현되어 있으며, 장치 간 일관된 성능을 보장합니다. 데이터 가져오기, 페이지 전환 또는 백그라운드 작업 중 로딩 상태를 표시할 때 이상적입니다.

사용 사례

  • API 호출 중 로딩 상태 표시
  • 페이지 전환 중 사용자 경험 향상
  • 백그라운드 작업의 진행 상황 표시
  • 애니메이션 플레이스홀더를 사용한 UI 미적 요소 개선
  • 폼 제출 중 피드백 제공

주요 기능

  • 30개 이상의 사전 구축된 애니메이션 스피너
  • 높은 사용자 정의 색상 및 크기
  • 크로스 플랫폼 호환성
  • 경량이며 통합이 쉬움
  • 내장 애니메이션 컨트롤러
  • 다크 모드 테마를 지원합니다

적합한 대상

  • 즉시 사용 가능한 로딩 인디케이터를 찾는 개발자
  • 일관된 로딩 시각 효과가 필요한 앱
  • 마이크로 인터랙션에 집중하는 UI/UX 디자이너
  • 다중 플랫폼 대상 프로젝트
  • 빠른 UI 피드백 상태 프로토타이핑

고려 사항

  • 많은 지표를 사용할 경우 번들 크기가 증가할 수 있습니다
  • 사용자 정의 애니메이션은 플러터 애니메이션 시스템에 대한 더 깊은 지식이 필요합니다
  • 일부 지표는 매우 작은 화면에서 잘 확대되지 않을 수 있습니다
  • 기본 속성 외의 사용자 정의는 제한적입니다
  • 매우 높은 주파수 업데이트에 최적화되지 않음

원본 README

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

✨ Flutter Spinkit

Format, Analyze and Test codecov pub package

A collection of loading indicators animated with flutter. Heavily inspired by @tobiasahlin's SpinKit.

🎖 Installing

dependencies:
  flutter_spinkit: ^5.2.2
⚡️ Import
import 'package:flutter_spinkit/flutter_spinkit.dart';

🎮 How To Use

const spinkit = SpinKitRotatingCircle(
  color: Colors.white,
  size: 50.0,
);
final spinkit = SpinKitFadingCircle(
  itemBuilder: (BuildContext context, int index) {
    return DecoratedBox(
      decoration: BoxDecoration(
        color: index.isEven ? Colors.red : Colors.green,
      ),
    );
  },
);
final spinkit = SpinKitSquareCircle(
  color: Colors.white,
  size: 50.0,
  controller: AnimationController(vsync: this, duration: const Duration(milliseconds: 1200)),
);

For more info, please, refer to the showcase.dart in the example.

🚀 Showcase


RotatingPlain

DoubleBounce

Wave

WanderingCubes

FadingFour

FadingCube

Pulse

ChasingDots

ThreeBounce

Circle

CubeGrid

FadingCircle

RotatingCircle

FoldingCube

PumpingHeart

HourGlass

PouringHourGlass

PouringHourGlassRefined

FadingGrid

Ring

Ripple

SpinningCircle

SpinningLines

SquareCircle

DualRing

PianoWave

DancingSquare

ThreeInOut

WaveSpinner

PulsingGrid

Some GIF images gotten from Android Spinkit.

🐛 Bugs/Requests

If you encounter any problems feel free to open an issue. If you feel the library is missing a feature, please raise a ticket on Github and I'll look into it. Pull request are also welcome.

❗️ Note

For help getting started with Flutter, view our online documentation.

For help on editing plugin code, view the documentation.

☀️ Authors

Jeremiah Ogbomo

Ayush Agarwal

⭐️ License

MIT License

카테고리

소스 저장소

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