음성 메모 앱을 만들 때, 녹음이 진행 중인 동안 화면에 애니메이션을 표시하고 싶을 수 있습니다. 이때 플러터의 Lottie 라이브러리를 사용하면 쉽게 구현할 수 있습니다. Lottie는 디자이너가 만든 애니메이션 파일을 사용하여 앱에서 동적인 애니메이션을 보여줄 수 있는 라이브러리입니다.

Lottie 설치하기

플러터에서 Lottie를 사용하기 위해서는 먼저 Lottie 라이브러리를 프로젝트에 추가해야 합니다. pubspec.yaml 파일을 열고 아래 코드를 추가해주면 됩니다.

dependencies:
  flutter_lottie: ^1.0.0

변경 내용을 저장한 뒤, 터미널에서 flutter pub get 명령어를 실행하여 의존성을 설치해주세요.

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

Lottie 애니메이션 파일은 JSON 형식으로 제공됩니다. 인터넷에서 다운로드할 수도 있고, 직접 디자이너에게 요청하여 만들어 줄 수도 있습니다. Lottie 파일을 준비한 뒤, assets 폴더에 복사해주세요.

Lottie 애니메이션 표시하기

이제 Lottie 애니메이션을 표시하기 위해 Lottie 위젯을 사용할 수 있습니다. 다음은 Lottie를 사용하여 녹음 애니메이션을 표시하는 간단한 예제입니다.

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

class RecordingScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('음성 메모'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Lottie.asset(
              'assets/record_animation.json',
              width: 200,
              height: 200,
              controller: LottieController(
                duration: const Duration(seconds: 3),
                repeat: false,
              ),
            ),
            SizedBox(height: 16),
            Text('녹음 중...', style: TextStyle(fontSize: 16)),
          ],
        ),
      ),
    );
  }
}

위의 코드에서 Lottie.asset() 메소드를 사용하여 Lottie 애니메이션을 로드하고, width와 height로 애니메이션의 크기를 설정하고 있습니다. controller를 사용하여 애니메이션의 재생 시간 및 반복 여부를 설정할 수 있습니다.

이제 녹음이 진행 중일 때 RecordingScreen 위젯을 사용하면 Lottie 애니메이션이 화면에 표시됩니다.

참고 자료

• Lottie Files : 다양한 Lottie 애니메이션 파일을 다운로드할 수 있는 웹사이트입니다.
• Flutter Lottie : Flutter에서 Lottie를 사용할 수 있게 해주는 공식 라이브러리의 문서입니다.

이제 플러터의 Lottie 라이브러리를 사용하여 음성 메모 앱에서 애니메이션을 표시하는 방법을 알아보았습니다. Lottie를 사용하면 다양한 디자인 요소를 동적으로 표현할 수 있으며, UI에 생동감을 더할 수 있습니다.