모바일 앱 개발에서 음악 앱은 매우 일반적인 유형입니다. 음악 앱을 개발할 때 중요한 기능 중 하나는 현재 재생 상태를 시각적으로 나타내는 것입니다. 이번 글에서는 플러터(Flutter)와 Lottie를 사용하여 음악 앱의 재생 상태를 표시하는 방법에 대해 알아보겠습니다.

Lottie란?

Lottie는 Airbnb에서 개발된 오픈 소스 라이브러리로, 애니메이션을 JSON 형식으로 가져와서 앱에 적용할 수 있습니다. Lottie를 사용하면 디자이너가 제작한 압도적인 애니메이션을 쉽게 앱에 통합할 수 있습니다.

플러터에서 Lottie 사용하기

플러터에서 Lottie를 사용하려면 lottie 패키지를 pubspec.yaml 파일에 추가해야 합니다.

dependencies:
  flutter:
    sdk: flutter
  lottie: ^1.0.1

pubspec.yaml 파일에 lottie 패키지를 추가한 후, 터미널에서 flutter packages get 명령을 실행하여 패키지를 가져옵니다. 이제 Lottie를 사용할 준비가 되었습니다.

Lottie 애니메이션 파일 가져오기

애니메이션 파일을 플러터 앱에 사용하려면 먼저 JSON 형식의 Lottie 애니메이션 파일을 가져와야 합니다. Lottie에서는 다양한 형식의 애니메이션 파일을 제공하므로, 디자인 요구에 맞는 파일을 선택하면 됩니다.

음악 재생 상태 표시하기

이제 Lottie 애니메이션 파일을 가져왔으므로, 음악 앱의 재생 상태를 표시하는 방법을 확인해보겠습니다. 예를 들어, 재생 버튼을 누를 때마다 플레이/일시정지 상태가 변경되는 애니메이션을 표시하려고 합니다.

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

class MusicApp extends StatefulWidget {
  @override
  _MusicAppState createState() => _MusicAppState();
}

class _MusicAppState extends State<MusicApp> {
  bool isPlaying = false;

  void togglePlay() {
    setState(() {
      isPlaying = !isPlaying;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('음악 앱'),
      ),
      body: Center(
        child: Lottie.asset(
          isPlaying ? 'assets/playing_animation.json' : 'assets/paused_animation.json',
          width: 200,
          height: 200,
          fit: BoxFit.cover,
          repeat: true,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: togglePlay,
        child: Icon(
          isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ),
    );
  }
}

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

위의 코드를 이용하면 음악 앱에서 재생 버튼을 누를 때마다 Lottie 애니메이션을 표시할 수 있습니다. 애니메이션이 일시정지 상태에서 재생 상태로 변경되거나, 재생 상태에서 일시정지 상태로 변경될 때마다 애니메이션이 자동으로 업데이트됩니다.

결론

이번 글에서는 플러터와 Lottie를 사용하여 음악 앱의 재생 상태를 표시하는 방법에 대해 알아보았습니다. Lottie를 사용하면 디자이너가 제작한 멋진 애니메이션을 쉽게 통합할 수 있으며, 플러터를 사용하여 간단한 음악 앱을 만들 수 있습니다.

더 자세한 내용은 Lottie 공식 문서를 참조하시기 바랍니다.