플러터(Flutter)는 Google에서 개발한 UI 프레임워크로, 다양한 플랫폼에서 동작하는 애플리케이션을 만들 수 있습니다. Lottie는 Airbnb에서 개발한 애니메이션 툴킷으로, JSON 형식의 애니메이션 파일을 읽어와서 재생하는 기능을 제공합니다. 소셜 미디어 앱에서는 피드에 다양한 애니메이션을 추가하여 사용자 경험을 향상시킬 수 있는데, 이번 블로그 포스트에서는 플러터 Lottie를 활용하여 피드 애니메이션을 동기화하는 방법을 알아보겠습니다.
1. Lottie 플러그인 추가하기
먼저, 플러터 앱에 Lottie 플러그인을 추가해야 합니다. pubspec.yaml 파일에 다음과 같이 의존성을 추가해주세요:
dependencies:
flutter:
sdk: flutter
lottie: ^1.1.0
의존성을 추가한 후, 터미널에서 다음 명령어를 실행하여 패키지를 가져옵니다:
flutter packages get
2. Lottie 애니메이션 파일 준비하기
Lottie 플러그인은 JSON 형식의 애니메이션 파일을 사용합니다. Lottiefiles 사이트나 Adobe After Effects를 통해 애니메이션 파일을 만들 수 있습니다. 만들어진 애니메이션 파일을 프로젝트 폴더에 추가해주세요.
3. 애니메이션을 피드에 추가하기
이제 애니메이션을 피드에 추가하는 작업을 시작할 수 있습니다. 먼저, Lottie 플러그인을 임포트해야 합니다:
import 'package:lottie/lottie.dart';
애니메이션을 피드에 추가하기 위해 ListView.builder와 Lottie.asset 위젯을 사용할 수 있습니다:
ListView.builder(
itemCount: feedItems.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text(feedItems[index].title),
subtitle: Text(feedItems[index].description),
leading: Lottie.asset(
'assets/animation.json',
width: 60,
height: 60,
),
);
},
)
위 예제에서 feedItems는 피드 아이템을 담고 있는 리스트입니다. 각 아이템은 제목, 설명과 함께 애니메이션을 가지도록 구성되어 있습니다. Lottie.asset 위젯은 애니메이션 파일의 경로를 입력받아 해당 애니메이션을 재생합니다. width와 height 속성을 사용하여 애니메이션의 크기를 설정할 수 있습니다.
4. 애니메이션 동기화하기
피드에 추가한 애니메이션을 동기화하려면, 각 애니메이션의 시작과 끝을 특정 조건에 맞춰 제어해야 합니다. 예를 들어, 스크롤이 멈추거나 피드 아이템이 보여질 때만 애니메이션이 재생되도록 설정할 수 있습니다:
ScrollController _scrollController;
bool _isScrolling = false;
@override
void initState() {
super.initState();
_scrollController = ScrollController();
_scrollController.addListener(_scrollListener);
}
void _scrollListener() {
if (_scrollController.position.isScrollingNotifier.value) {
setState(() {
_isScrolling = true;
});
} else {
setState(() {
_isScrolling = false;
});
}
}
ListView.builder(
controller: _scrollController,
itemCount: feedItems.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text(feedItems[index].title),
subtitle: Text(feedItems[index].description),
leading: _isScrolling
? Container() // 스크롤 중에는 애니메이션을 보여주지 않음
: Lottie.asset(
'assets/animation.json',
width: 60,
height: 60,
),
);
},
)
위 예제에서 ScrollController를 사용하여 스크롤 이벤트를 감지하고, _isScrolling 변수를 통해 스크롤 상태를 저장합니다. 애니메이션을 보여줄 때 _isScrolling 값에 따라 표시 여부를 결정합니다.
결론
플러터 Lottie와 소셜 미디어 앱의 피드 애니메이션을 동기화하는 방법에 대해 알아보았습니다. Lottie 플러그인을 통해 JSON 형식의 애니메이션 파일을 읽어와서 피드에 추가할 수 있으며, 스크롤 이벤트와 연동하여 애니메이션을 동기화할 수 있습니다. 플러터의 다양한 기능을 활용하여 사용자에게 더욱 흥미로운 경험을 제공해보세요.