Colin's Blog
[flutter] 플러터 Lottie로 날짜 선택 앱의 애니메이션 달력 구현하기

앱 개발 중인데, 사용자가 날짜를 선택할 수 있는 달력을 구현하고 싶다면, Lottie 라이브러리를 사용해보세요. Lottie는 Adobe After Effects 애니메이션을 앱에 통합하는 데 도움을 주는 도구로, 플러터 앱에 매끄럽고 멋진 애니메이션 효과를 쉽게 추가할 수 있습니다.

Lottie 라이브러리 설치하기

우선, Lottie 라이브러리를 플러터 프로젝트에 설치해야 합니다. pubspec.yaml 파일을 열고, dependencies 섹션에 다음과 같이 Lottie 패키지를 추가하세요.

dependencies:
  flutter:
    sdk: flutter
  lottie: ^1.0.0

패키지를 추가한 후, 터미널에서 flutter packages get 명령어를 실행하여 패키지를 다운로드 및 설치하세요.

Lottie 애니메이션 파일 준비하기

Lottie를 사용하기 위해 애니메이션 파일이 필요합니다. 공개적으로 사용 가능한 Lottie 애니메이션 파일을 검색하거나 직접 제작할 수 있습니다. Lottie 파일은 JSON 포맷으로 이루어져 있으며, After Effects 애니메이션을 내보낼 때 생성할 수 있습니다.

애니메이션 파일을 프로젝트에 추가한 후, assets 폴더에서 사용할 수 있도록 pubspec.yaml 파일에 추가해야 합니다. pubspec.yaml 파일에서 flutter 섹션 안에 다음과 같은 코드를 추가하세요.

flutter:
  assets:
    - assets/animation_file.json

이제 Lottie 애니메이션 파일을 사용할 준비가 되었습니다.

플러터 앱에서 Lottie 애니메이션 사용하기

이제 Lottie 애니메이션을 플러터 앱에서 사용해보겠습니다.

먼저, Lottie 패키지를 import 하세요.

import 'package:lottie/lottie.dart';

다음으로, 애니메이션을 보여주고 싶은 위치에 Lottie.asset 위젯을 추가하세요. assets 폴더에 저장된 애니메이션 파일의 경로를 지정해야 합니다.

Lottie.asset('assets/animation_file.json'),

위젯을 추가한 후, 앱을 실행하여 애니메이션을 확인해보세요.

날짜 선택 기능 추가하기

마지막으로, 날짜 선택 기능을 추가해보겠습니다. 날짜 선택에는 DatePicker 패키지를 사용할 수 있습니다. DatePicker 패키지도 pubspec.yaml 파일에 추가해야 합니다.

dependencies:
  flutter:
    sdk: flutter
  lottie: ^1.0.0
  date_picker_widget: ^1.0.0

DatePicker 패키지를 import 하세요.

import 'package:date_picker_widget/date_picker_widget.dart';

이제 DatePicker를 앱에 추가하고 선택된 날짜에 맞게 Lottie 애니메이션을 제어할 수 있습니다. Lottie 위젯의 controller 속성을 사용하여 애니메이션을 제어할 수 있습니다.

DateTime selectedDate;

void onDateSelected(DateTime date) {
  setState(() {
    selectedDate = date;
    // 날짜에 따라 애니메이션 제어 로직 추가
    if (selectedDate.weekday == DateTime.saturday ||
        selectedDate.weekday == DateTime.sunday) {
      controller.play();
    } else {
      controller.stop();
    }
  });
}

Widget build(BuildContext context) {
  return Column(
    children: [
      Lottie.asset('assets/animation_file.json', controller: controller),
      DatePickerWidget(onDateSelected: onDateSelected),
    ],
  );
}

위 코드에서 DatePickerWidget은 DatePicker 패키지에서 제공하는 위젯으로, 사용자가 날짜를 선택할 수 있는 UI를 제공합니다. onDateSelected 콜백 함수를 통해 선택한 날짜를 받아올 수 있습니다. 선택한 날짜에 따라 애니메이션은 제어되며, 토요일 및 일요일에는 애니메이션이 재생됩니다.

이제 플러터 Lottie 라이브러리를 사용하여 날짜 선택 앱의 애니메이션 달력을 구현했습니다. 사용자는 DatePicker를 사용하여 날짜를 선택하고, 선택한 날짜에 따라 애니메이션을 제어할 수 있습니다.

© 2018 Colin. All rights reserved.