[flutter] 플러터 Lottie로 사진 편집 앱의 필터 애니메이션 추가하기

05 Dec 2023

flutter

이번 블로그에서는 플러터(Flutter)를 사용하여 사진 편집 앱에 필터 애니메이션을 추가하는 방법을 알아보겠습니다. 이를 위해 Lottie 라이브러리를 사용할 것입니다.

필요한 패키지 설치하기

먼저, Lottie 라이브러리를 설치해야 합니다. pubspec.yaml 파일에 다음과 같이 의존성을 추가해주세요:

dependencies:
  lottie: ^1.1.0

의존성을 추가한 후, 패키지를 다운로드하고 업데이트하기 위해 flutter pub get 명령어를 실행해주세요.

로티 애니메이션 파일 준비하기

사용할 로티 애니메이션 파일을 준비해야 합니다. Lottie 사이트(https://lottiefiles.com/)에서 다양한 애니메이션 파일을 찾을 수 있습니다. 원하는 애니메이션 파일을 다운로드하고 프로젝트의 assets 폴더에 추가해주세요.

필터 애니메이션 추가하기

이제 앱에 필터 애니메이션을 추가해보겠습니다. 필터 애니메이션은 이미지 위에 효과적인 애니메이션을 제공해주며, 사용자에게 즐거운 사용자 경험을 제공합니다.

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

class FilterAnimation extends StatefulWidget {
  @override
  _FilterAnimationState createState() => _FilterAnimationState();
}

class _FilterAnimationState extends State<FilterAnimation> {
  bool isAnimating = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Filter Animation"),
      ),
      body: Column(
        children: <Widget>[
          Lottie.asset(
            'assets/filter_animation.json',
            height: 200,
            repeat: true,
            animate: isAnimating,
          ),
          RaisedButton(
            child: Text(isAnimating ? "Stop Animation" : "Start Animation"),
            onPressed: () {
              setState(() {
                isAnimating = !isAnimating;
              });
            },
          ),
        ],
      ),
    );
  }
}

위의 코드에서는 Lottie.asset() 위젯을 사용하여 로티 애니메이션을 표시합니다. repeat 매개변수를 true로 설정하여 애니메이션을 반복하도록 할 수 있습니다. animate 매개변수를 통해 애니메이션을 시작하거나 정지할 수 있습니다.

필터 애니메이션 사용하기

이제 FilterAnimation 위젯을 필터를 추가하고자 하는 화면에 추가하기만 하면 됩니다.

import 'package:flutter/material.dart';

class PhotoEditingScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Photo Editing"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text("Your Photo Here"),
            SizedBox(height: 20),
            FilterAnimation(),
          ],
        ),
      ),
    );
  }
}

위의 코드에서는 FilterAnimation 위젯을 PhotoEditingScreen 위젯에 추가하고, 원하는 위치에 배치할 수 있습니다.

결론

이제 플러터를 사용하여 사진 편집 앱에 필터 애니메이션을 추가하는 방법을 알아보았습니다. Lottie 라이브러리를 활용하여 다양한 애니메이션을 쉽게 적용할 수 있으며, 사용자에게 더욱 흥미로운 경험을 제공할 수 있습니다.