[flutter] 플러터 Lottie로 즐겨찾기 앱의 하트 애니메이션 추가하기

05 Dec 2023

flutter

본 글은 플러터 프레임워크를 사용하여 즐겨찾기 앱에 하트 애니메이션을 추가하는 방법에 대해 알려드리겠습니다. 이를 위해 Lottie 라이브러리를 사용할 것입니다.

1. Lottie 라이브러리 추가하기

첫번째로, pubspec.yaml 파일을 열어서 dependencies 섹션에 아래의 코드를 추가합니다.

dependencies:
  # Lottie 라이브러리 추가
  lottie: ^1.1.0

변경사항을 적용하기 위해 터미널에서 flutter pub get 명령을 실행합니다.

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

이제 Lottie 애니메이션 파일을 준비해야 합니다. Lottie 파일은 JSON 형식으로 되어있으며 LottieFiles 사이트에서 다운로드하거나 직접 제작할 수 있습니다.

다운로드한 Lottie 파일을 assets 폴더에 추가합니다.

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

다음으로, 애니메이션을 나타낼 위젯을 생성합니다. 예를 들어, FavoriteAnimation 위젯을 만들겠습니다.

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

class FavoriteAnimation extends StatefulWidget {
  @override
  _FavoriteAnimationState createState() => _FavoriteAnimationState();
}

class _FavoriteAnimationState extends State<FavoriteAnimation>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(milliseconds: 1500),
      vsync: this,
    )..repeat();
  }

  @override
  Widget build(BuildContext context) {
    return Lottie.asset(
      'assets/favorite_animation.json',
      controller: _controller,
      frameRate: FrameRate(60),
    );
  }

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

위 코드에서 Lottie.asset 위젯을 사용하여 Lottie 애니메이션을 렌더링합니다. controller 속성에는 애니메이션 컨트롤러를 전달하고, frameRate를 설정하여 원하는 프레임 레이트로 애니메이션을 재생할 수 있습니다.

4. 애니메이션 위젯 사용하기

이제 애니메이션 위젯을 실제 화면에 사용하는 방법을 알아보겠습니다. 예를 들어, 앱의 홈 화면에 즐겨찾기 아이콘 옆에 애니메이션을 추가하고 싶다면 다음과 같이 코드를 작성합니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Favorite App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Favorite App'),
      ),
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(Icons.favorite),
            SizedBox(width: 10),
            FavoriteAnimation(),
          ],
        ),
      ),
    );
  }
}

위 예제에서는 HomePage 위젯에서 FavoriteAnimation 위젯을 사용하여 화면에 하트 애니메이션을 추가합니다. FavoriteAnimation 위젯을 적절한 위치에 배치하고, 필요에 따라 애니메이션의 속성들을 조정하여 원하는 결과를 얻을 수 있습니다.

이제 앱을 실행하면 하트 아이콘 옆에 Lottie 애니메이션이 재생되는 것을 확인할 수 있습니다.

1. Lottie 라이브러리 추가하기

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

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

4. 애니메이션 위젯 사용하기

참고 자료