플러터는 모바일 앱 개발을 위한 인기있는 프레임워크입니다. 이번 포스트에서는 Lottie라는 라이브러리를 통해 플러터 앱에서 멋진 미디어 플레이어의 애니메이션을 구현하는 방법을 알아보겠습니다.
Lottie란?
Lottie는 Airbnb에서 개발한 오픈소스 라이브러리로, JSON 형식의 애니메이션 파일을 사용하여 네이티브 앱에서 로드하고 재생할 수 있습니다.
Lottie 패키지 설치하기
플러터에서 Lottie를 사용하기 위해서는 먼저 lottie 패키지를 프로젝트에 추가해야 합니다.
flutter pub add lottie
또는 pubspec.yaml 파일에 아래의 의존성을 추가하고, 패키지를 가져올 수 있습니다.
dependencies:
lottie: ^0.7.0
프로젝트에 Lottie 애니메이션 파일 추가하기
먼저, Lottie 애니메이션 파일을 프로젝트에 추가해야 합니다. 애니메이션 파일은 JSON 형식으로 되어 있으며, 디자이너나 애니메이터가 제작한 파일을 사용할 수 있습니다.
-
플러터 프로젝트의
assets폴더에 애니메이션 파일(animation.json)을 추가합니다. -
pubspec.yaml파일에 아래와 같이 애니메이션 파일의 경로를 추가합니다.
flutter:
assets:
- assets/animation.json
Lottie 애니메이션을 플러터 앱에서 사용하기
이제 Lottie 애니메이션을 플러터 앱에서 사용해볼 차례입니다. 먼저 Lottie.asset() 위젯으로 애니메이션을 로드하고, LottieBuilder로 애니메이션이 재생되도록 구현해보겠습니다.
import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';
class MediaPlayer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Lottie.asset(
'assets/animation.json',
width: 200,
height: 200,
fit: BoxFit.fill,
),
),
);
}
}
위의 코드에서는 Lottie.asset() 위젯을 사용하여 Lottie 애니메이션을 로드하고, width, height, fit 등의 속성을 설정하여 애니메이션의 크기와 적용 방식을 지정할 수 있습니다.
앱에 플레이어 컨트롤러 추가하기
이제 플레이어 컨트롤러를 추가하여 애니메이션을 제어해보겠습니다. 플러터 앱에서 주로 사용되는 GestureDetector를 이용하여 탭 동작에 따라 애니메이션을 재생 및 일시정지할 수 있도록 구현해보겠습니다.
class MediaPlayer extends StatefulWidget {
@override
_MediaPlayerState createState() => _MediaPlayerState();
}
class _MediaPlayerState extends State<MediaPlayer> {
bool isPlaying = false;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: GestureDetector(
onTap: () {
setState(() {
isPlaying = !isPlaying;
});
},
child: LottieBuilder.asset(
'assets/animation.json',
width: 200,
height: 200,
fit: BoxFit.fill,
repeat: isPlaying,
),
),
),
);
}
}
위의 코드에서는 isPlaying 변수를 통해 애니메이션의 재생 여부를 관리하고, GestureDetector의 onTap 이벤트에서 해당 변수를 토글하도록 구현했습니다. 애니메이션의 재생 여부에 따라 repeat 속성을 설정하여 반복 재생되도록 만들 수 있습니다.
마무리
이번 포스트에서는 플러터 앱에서 Lottie를 사용하여 미디어 플레이어의 애니메이션을 구현하는 방법을 알아보았습니다. Lottie의 강력한 기능을 활용하여 더 다양한 UI 애니메이션을 구현하고, 앱에 동적인 요소를 추가해보세요!