플러터(Flutter)는 구글에서 개발한 모바일 애플리케이션 개발 프레임워크로, 다양한 기기에서 동작하는 네이티브 수준의 앱을 만들 수 있습니다. Lottie는 애프터이펙트로 만든 애니메이션을 앱에 쉽게 통합할 수 있도록 도와주는 라이브러리입니다. 이번 포스트에서는 플러터에서 Lottie를 사용하는 방법에 대해 알아보겠습니다.
1. Lottie 패키지 설치
Lottie를 사용하기 위해서는 먼저 lottie 패키지를 설치해야 합니다. pubspec.yaml 파일에 다음과 같이 의존성을 추가합니다:
dependencies:
lottie: ^1.0.0
의존성을 추가한 후, 패키지를 가져오기 위해 터미널에서 flutter packages get 명령을 실행합니다.
2. Lottie 애니메이션 파일 준비
Lottie는 JSON 형식의 애니메이션 파일을 지원합니다. Lottie 파일은 애프터이펙트와 같은 애니메이션 툴을 사용하여 만들 수 있습니다. Lottie 파일은 프로젝트의 assets 폴더에 저장되어야 합니다.
3. Lottie 애니메이션 불러오기
Lottie 애니메이션을 플러터 프로젝트에 불러오려면 Lottie.asset 위젯을 사용합니다. 다음은 간단한 예제 코드입니다:
import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';
class LottieAnimation extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Lottie.asset(
'assets/animation.json',
width: 200,
height: 200,
fit: BoxFit.cover,
),
);
}
}
위 코드에서 Lottie.asset 위젯은 assets/animation.json 경로에 있는 Lottie 애니메이션을 불러옵니다. width와 height 속성은 애니메이션의 크기를 조정하며, fit 속성은 애니메이션을 화면에 맞게 조절합니다.
4. Lottie 애니메이션 제어하기
Lottie 애니메이션은 다양한 상태에 따라 제어할 수 있습니다. 애니메이션이 실행 중인지, 반복되는지, 일시정지되었는지 등의 상태를 제어할 수 있습니다. 예를 들어, LottieController 클래스를 사용하여 애니메이션을 재생하거나 정지할 수 있습니다.
다음은 Lottie 애니메이션을 재생하고 정지하는 예제 코드입니다:
import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';
class PlayPauseAnimation extends StatefulWidget {
@override
_PlayPauseAnimationState createState() => _PlayPauseAnimationState();
}
class _PlayPauseAnimationState extends State<PlayPauseAnimation> {
bool _isPlaying = false;
LottieController _animationController;
@override
void initState() {
super.initState();
_animationController = LottieController(vsync: this);
}
@override
void dispose() {
_animationController.dispose();
super.dispose();
}
void _toggleAnimation() {
setState(() {
_isPlaying = !_isPlaying;
if (_isPlaying) {
_animationController.repeat();
} else {
_animationController.stop();
}
});
}
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: _toggleAnimation,
child: Center(
child: Lottie.asset(
'assets/animation.json',
controller: _animationController,
width: 200,
height: 200,
fit: BoxFit.cover,
),
),
);
}
}
위 코드에서 Lottie.asset 위젯의 controller 속성을 이용하여 애니메이션을 제어할 수 있습니다. _toggleAnimation 메소드를 통해 애니메이션의 상태를 변경하고, _isPlaying 변수에 따라 애니메이션을 재생하거나 정지합니다.
플러터에서 Lottie를 사용하는 방법에 대해 알아보았습니다. Lottie를 사용하면 멋진 애니메이션을 손쉽게 앱에 적용할 수 있으므로, 다양한 사용자 경험을 제공하는 애플리케이션을 개발할 때 유용합니다.