[flutter] 플러터 Lottie로 메모 앱의 추가 애니메이션 구현하기

05 Dec 2023

flutter

안녕하세요! 이번에는 Flutter 프레임워크에서 Lottie 애니메이션을 사용하여 메모 앱에 추가 애니메이션을 구현하는 방법에 대해 알아보겠습니다.

준비물

Flutter 개발 환경
Flutter Lottie 패키지
Lottie 애니메이션 파일 (json)
메모 앱의 프로젝트

단계별 구현 방법

1. Flutter Lottie 패키지 추가하기

먼저, 메모 앱의 pubspec.yaml 파일에 Flutter Lottie 패키지를 추가해야 합니다. 다음과 같이 dependencies 섹션에 아래 코드를 추가해주세요.

dependencies:
  flutter_lottie: ^1.0.0

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

Lottie 애니메이션 파일을 준비해야 합니다. Lottie는 Adobe After Effects, Adobe Illustrator 등에서 만들 수 있습니다. 애니메이션 파일은 JSON 형식으로 되어 있으며, Flutter 프로젝트의 assets 폴더에 저장해야 합니다.

3. 애니메이션 위젯 생성하기

이제 애니메이션을 표시할 위젯을 생성해야 합니다. Flutter Lottie 패키지를 사용하여 Lottie 애니메이션을 표시하는 위젯을 생성할 수 있습니다. 다음은 간단한 예시입니다.

import 'package:flutter/material.dart';
import 'package:flutter_lottie/flutter_lottie.dart';

class LottieAnimationWidget extends StatefulWidget {
  @override
  _LottieAnimationWidgetState createState() => _LottieAnimationWidgetState();
}

class _LottieAnimationWidgetState extends State<LottieAnimationWidget> {
  @override
  Widget build(BuildContext context) {
    return LottieView.fromFile(
      filePath: 'assets/animation.json', // Lottie 애니메이션 파일 경로
      autoPlay: true, // 자동 재생 여부
      loop: true, // 반복 재생 여부
    );
  }
}

4. 메모 추가 애니메이션 구현하기

이제 메모 추가 애니메이션을 메모 앱에 구현해보겠습니다. 메모 추가 버튼을 누를 때마다 애니메이션이 재생되도록 구현해보겠습니다.

import 'package:flutter/material.dart';

class MemoApp extends StatefulWidget {
  @override
  _MemoAppState createState() => _MemoAppState();
}

class _MemoAppState extends State<MemoApp> {
  bool isAnimating = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('메모 앱'),
      ),
      body: Container(
        child: Center(
          child: LottieAnimationWidget(),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            isAnimating = true;
          });
          // 메모 추가 로직 및 애니메이션 제어 코드 작성
          // ...

          // 애니메이션 종료 후 isAnimating 값 변경
          setState(() {
            isAnimating = false;
          });
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

5. 실행해보기

이제 모든 준비가 완료되었으므로, 메모 앱을 실행하여 메모 추가 애니메이션을 확인해볼 수 있습니다. 메모 추가 버튼을 클릭하면 Lottie 애니메이션이 재생되고, 애니메이션이 종료되면 버튼이 다시 클릭 가능한 상태로 변경됩니다.

결론

이번에는 Flutter 프레임워크에서 Lottie 애니메이션을 사용하여 메모 앱에 추가 애니메이션을 구현하는 방법에 대해 알아보았습니다. Lottie를 사용하면 애플리케이션에 다양한 동적 애니메이션을 구현할 수 있으므로, 창의적인 UI/UX를 구현할 때 유용하게 활용할 수 있습니다.

더 자세한 내용은 Flutter Lottie 패키지의 문서를 참고하시길 바랍니다.