안녕하세요! 오늘은 플러터(Flutter)를 사용하여 알람 앱에 간편하게 애니메이션 효과를 추가하는 방법에 대해 알아보겠습니다. 애니메이션 효과를 구현하기 위해 Lottie를 사용할 것입니다.

Lottie란?

Lottie는 Airbnb에서 개발한 오픈 소스 라이브러리로, 애프터 이펙트(Adobe After Effects)를 사용하여 제작한 애니메이션을 네이티브로 구현할 수 있게 도와줍니다. Lottie는 JSON 형식으로 애니메이션을 제공하며, Flutter에서는 이를 직접 사용할 수 있습니다.

Lottie 패키지 추가하기

먼저, pubspec.yaml 파일에 Lottie 패키지를 추가해야 합니다. 아래와 같이 dependencies 섹션에 lottie 패키지를 추가해주세요.

dependencies:
  flutter:
    sdk: flutter
  lottie: ^1.1.0

추가한 후에는 터미널에서 flutter pub get 명령어를 실행하여 패키지를 내려받아 주세요.

Lottie 애니메이션 적용하기

위에서 가져온 Lottie 패키지를 사용하여 알람 앱에 애니메이션 효과를 추가해보겠습니다.

1. Lottie 애니메이션 파일(.json)을 가져옵니다. 이 파일은 애프터 이펙트를 사용하여 제작된 애니메이션 파일입니다. 해당 파일이 있다면, 프로젝트의 assets 폴더에 이 파일을 추가해주세요.

2. 화면에 Lottie 애니메이션을 표시할 위젯을 생성합니다. 아래는 기본적인 Lottie 애니메이션을 표시하는 위젯입니다.

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

class LottieAnimationWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: 200,
      child: Lottie.asset(
        'assets/animation.json', // 위에서 추가한 애니메이션 파일 경로
        fit: BoxFit.cover,
      ),
    );
  }
}

1. 위젯을 알람 앱의 해당 화면에 추가합니다. 예를 들어, 알람이 울릴 때 Lottie 애니메이션을 표시하고 싶다면 해당 화면에 위젯을 추가해주세요.

import 'package:flutter/material.dart';

class AlarmScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Alarm App'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Wake up!',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            LottieAnimationWidget(), // Lottie 애니메이션 위젯 추가
          ],
        ),
      ),
    );
  }
}

1. 앱을 실행하고 알람이 울리면 Lottie 애니메이션이 표시됩니다!

마치며

위의 방법을 따라하면 플러터 앱에 간편하게 Lottie 애니메이션 효과를 추가할 수 있습니다. 좀 더 다양하고 효과적인 애니메이션을 구현하고 싶다면, Lottie 파일을 직접 제작하여 사용할 수도 있습니다. 여러분의 앱에 멋진 애니메이션을 추가해보세요!

참고

• Flutter Lottie 패키지