개요

이번 프로젝트에서는 플러터와 Lottie를 사용하여 캘린더 앱의 날짜 선택 애니메이션을 구현해보겠습니다. Lottie는 애프터 이펙트로 만들어진 애니메이션 파일을 사용할 수 있는 라이브러리로, 다양한 화려한 애니메이션 효과를 쉽게 적용할 수 있습니다.

Lottie 설치하기

먼저, pubspec.yaml 파일에서 dependency에 “lottie_flutter” 패키지를 추가해주세요. 그런 다음, 터미널에서 flutter pub get 명령어를 실행하여 패키지를 설치합니다.

dependencies:
  flutter:
    sdk: flutter
  lottie_flutter: ^1.1.0

Lottie 애니메이션 사용하기

1. 애니메이션 파일 가져오기 LottieFiles 등의 사이트에서 원하는 애니메이션 파일(.json 형식)을 다운로드합니다.

2. 애니메이션 파일 추가하기 다운로드한 애니메이션 파일을 프로젝트의 assets 폴더에 추가합니다.

3. Lottie 애니메이션 위젯 추가하기 애니메이션을 사용할 화면의 위젯 트리에 Lottie 애니메이션 위젯을 추가합니다.

import 'package:lottie/lottie.dart';

class CalendarPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: [
          // 날짜 선택 애니메이션
          Lottie.asset('assets/calendar_animation.json'),
          // 캘린더 UI 등 나머지 위젯들...
        ],
      ),
    );
  }
}

애니메이션 제어하기

Lottie 애니메이션은 일반적인 애니메이션과 마찬가지로 재생, 일시정지, 정지 등의 제어가 가능합니다. 예를 들어, 사용자가 특정 날짜를 선택하면 애니메이션을 재생할 수 있습니다.

AnimationController _animationController;

@override
void initState() {
  super.initState();
  _animationController = AnimationController(vsync: this);
}

@override
void dispose() {
  _animationController.dispose();
  super.dispose();
}

void playAnimation() {
  _animationController.forward();
}

void pauseAnimation() {
  _animationController.pause();
}

void stopAnimation() {
  _animationController.stop();
}

애니메이션 컨트롤러를 사용하여 애니메이션을 제어할 수 있으며, 위와 같이 위젯의 initState(), dispose() 메서드에서 컨트롤러를 초기화하고 해제합니다.

결론

위의 단계를 따라가면 플러터와 Lottie를 사용하여 캘린더 앱의 날짜 선택 애니메이션을 구현할 수 있습니다. Lottie를 사용하면 화려하고 동적인 애니메이션 효과를 쉽게 적용할 수 있으므로, 다양한 사용자 경험을 제공할 수 있습니다.

이러한 애니메이션 효과는 앱의 사용성을 향상시킬 수 있으므로, 프로젝트에 적용해보세요!

참고 자료

• Flutter Lottie 패키지