안녕하세요. 오늘은 플러터에서 로딩바를 만드는 방법에 대해 알아볼게요. 로딩바는 사용자가 데이터나 페이지를 기다리는 동안 보여주는 이미지예요. 쉽게 말해 로딩 중임을 나타내는 ui요소인데요. 구현하는 방법은 여러 가지가 있지만 이번 시간에는 쉽게 구현이 가능하고, 다양한 로딩 애니메이션이 제공되는 오픈소스 패키지 flutter spinkit을 사용할 거예요.
flutter spinkit은 모양, 크기, 색상 등을 설정할 수 있고, 애니메이션 속도도 조절이 가능해요. 또한 외부 파일에 의존하지 않고 앱에서 독립적으로 애니메이션을 생성하기 때문에 움직임이 부드럽고 이미지 파일을 불러오는 것보다 빠르고 효율적이죠.
이제 실제로 플러터 앱에 적용을 해볼게요. pubspec.yaml 파일에 flutter_spinkit 패키지를 추가 후 Pub get 을 실행합니다.
dependencies:
flutter_spinkit: ^5.1.0
그다음 로딩바를 적용할 dart 파일에 flutter_spinkit.dart를 import 해주세요. 이제 글 상단에 올려놓은 showcase 이미지에서 마음에 드는 모양을 찾은 후 SpinKit+이미지명으로 위젯을 생성하면 됩니다. 예를 들어 PianoWave를 사용하고 싶다면 위젯명을 SpinKitPianoWave로 만들면 되는 거죠. 실제 구현 코드는 아래 3줄이 끝이에요!
import 'package:flutter_spinkit/flutter_spinkit.dart';
//Spinkit + '이미지별 이름'을 넣어준다 (ex: SpinkitRing , SpinkitWave 등등)
SpinKitWave(
// 색상을 파란색으로 설정
color: Color(0xFF6A7BA2),
// 크기를 50.0으로 설정
size: 50.0,
// 애니메이션 수행 시간을 2초로 설정
duration: Duration(seconds: 2),
)),
화면 중앙에 로딩바가 나오는 예제 전체 코드입니다. 앱 실행 시 바로 확인할 수 있어요.
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(
title: 'Flutter Spinkit Example', // 앱 타이틀 설정
theme: ThemeData(
primarySwatch: Colors.blue, // 앱 테마 설정
),
home: MyLoadingScreen(), // 앱 시작 시 로딩 화면으로 설정
);
}
}
class MyLoadingScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
//로딩바 구현 부분
child: SpinKitFadingCube( // FadingCube 모양 사용
color: Colors.blue, // 색상 설정
size: 50.0, // 크기 설정
duration: Duration(seconds: 2), //속도 설정
),
),
);
}
}
실행 화면 ▼
오늘은 이렇게 플러터 앱에서 로딩중 이미지인 로딩바를 구현해 보았습니다. 간단한 코드로 다양한 로딩바를 만들 수 있어서, 로딩 화면을 구성할 때 매우 유용하답니다. 저는 배경색 선정을 잘못해서 조금 어색해 보이는 거 같지만 어울리는 색으로 조합만 잘하면 앱을 멋지게 꾸밀 수 있습니다. - 끝 -