플러터에서 로딩 인디케이터 추가하기: flutter_spinkit 패키지 사용 방법과 옵션 설명

 

플러터에서 로딩 인디케이터를 간편하게 구현할 수 있는 flutter_spinkit 패키지의 사용 방법과 주요 옵션에 대해 설명해드리겠습니다.

HourGlass

FadingFour

ThreeInOut

 

flutter_spinkit | Flutter package

 

1. flutter_spinkit 패키지 설치

먼저 flutter_spinkit 패키지를 프로젝트에 추가해야 합니다.

pubspec.yaml 파일에 다음과 같이 추가해 주세요

dependencies:
  flutter:
    sdk: flutter
  flutter_spinkit: ^5.1.0

그리고 터미널에서 flutter pub get 명령어를 실행하여 패키지를 다운로드합니다.

2. 기본 사용법

flutter_spinkit를 사용하여 간단한 로딩 인디케이터를 구현해보겠습니다.

import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: LoadingIndicatorExample(),
    );
  }
}

class LoadingIndicatorExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('로딩 인디케이터 예제'),
      ),
      body: Center(
        child: SpinKitCircle(
          color: Colors.blue,  // 인디케이터 색상 설정
          size: 50.0,           // 인디케이터 크기 설정
        ),
      ),
    );
  }
}

위 코드는 SpinKitCircle을 사용하여 원형의 로딩 인디케이터를 화면 중앙에 표시하는 간단한 예제입니다.

3. flutter_spinkit 패키지의 주요 옵션들

SpinKitCircle

• color: 인디케이터의 색상을 설정합니다.
• size: 인디케이터의 크기를 설정합니다.
• duration: 인디케이터의 회전 애니메이션 속도를 설정합니다.
• controller: 인디케이터의 애니메이션 컨트롤러를 설정합니다.

다양한 인디케이터 스타일 사용하기

flutter_spinkit 패키지는 다양한 인디케이터 스타일을 제공합니다. 몇 가지 예시를 살펴보겠습니다

• SpinKitWave: 파도 모양의 인디케이터
• SpinKitFadingCircle: 점점 사라지는 원형 인디케이터
• SpinKitRotatingCircle: 회전하는 원형 인디케이터

SpinKitWave(
  color: Colors.orange,
  size: 50.0,
),

SpinKitFadingCircle(
  color: Colors.red,
  size: 50.0,
),

SpinKitRotatingCircle(
  color: Colors.green,
  size: 50.0,
),

4. 고급 사용법

flutter_spinkit 패키지는 사용자 정의나 애니메이션을 추가할 수 있는 옵션도 제공합니다.

예를 들어, SpinKitThreeBounce를 사용하여 간단한 애니메이션을 구현할 수 있습니다.

SpinKitThreeBounce(
  color: Colors.blueAccent,
  size: 30.0,
  itemBuilder: (BuildContext context, int index) {
    return DecoratedBox(
      decoration: BoxDecoration(
        color: index.isEven ? Colors.red : Colors.green,
      ),
    );
  },
),

위 코드에서 itemBuilder를 사용하여 각 구성 요소에 대한 색상을 지정할 수 있습니다.

결론

flutter_spinkit 패키지는 플러터 애플리케이션에서 간편하게 다양한 스타일의 로딩 인디케이터를 구현할 수 있는 유용한 도구입니다.

다양한 옵션을 활용하여 디자인을 커스터마이즈하고, 사용자에게 보기 좋은 로딩 화면을 제공할 수 있습니다.

프로젝트에서 필요한 인디케이터 스타일을 선택하여 flutter_spinkit를 활용해 보세요.

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱