[flutter] 플러터 Lottie 컨트롤러 사용하기

05 Dec 2023

flutter

플러터(Flutter)는 크로스 플랫폼 앱 개발 프레임워크로, 애니메이션을 쉽게 구현할 수 있는 기능을 제공합니다. Lottie는 플러터에서 애니메이션을 만들고 제어하기 위한 강력한 라이브러리입니다.

이번 글에서는 플러터에서 Lottie 컨트롤러를 사용하는 방법을 알아보겠습니다.

1. Lottie 라이브러리 추가

먼저, pubspec.yaml 파일에 Lottie 라이브러리를 추가해야 합니다. 다음 코드를 dependencies 블록에 추가하세요.

dependencies:
  flutter:
    sdk: flutter
  lottie: ^1.1.0

이후 터미널에서 flutter pub get 명령어를 실행하여 라이브러리를 다운로드합니다.

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

Lottie 라이브러리는 LottieAnimationController와 함께 작동하며, 애니메이션 파일이 필요합니다. 먼저, Lottiefiles (https://lottiefiles.com)나 LottieStudio (https://lottiefiles.com/studio) 와 같은 웹사이트에서 원하는 애니메이션 파일을 다운로드하고 프로젝트에 추가하세요.

3. Lottie 컨트롤러 생성

다음으로, Lottie 컨트롤러를 생성해야 합니다. 플러터 위젯의 상태를 관리하기 위해 StatefulWidget을 사용할 것입니다. 또한, SingleTickerProviderStateMixin을 상속받아 애니메이션을 제어할 수 있는 컨트롤러를 선언해야 합니다.

class LottieController extends StatefulWidget {
  @override
  _LottieControllerState createState() => _LottieControllerState();
}

class _LottieControllerState extends State<LottieController>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(vsync: this);
  }

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

  @override
  Widget build(BuildContext context) {
    // Lottie 애니메이션을 표시하는 플러터 위젯 추가
  }
}

4. Lottie 애니메이션 제어

이제 Lottie 컨트롤러를 사용하여 애니메이션을 제어할 수 있습니다. 예를 들어, 애니메이션을 시작하거나 일시정지하고 싶을 때 startAnimation()과 pauseAnimation() 메서드를 호출할 수 있습니다.

void startAnimation() {
  _animationController.forward();
}

void pauseAnimation() {
  _animationController.stop();
}

이제 build 메서드에서 Lottie 애니메이션을 표시하는 위젯을 추가하고, 컨트롤러를 전달합니다.

@override
Widget build(BuildContext context) {
  return MaterialApp(
    title: 'Lottie Controller',
    home: Scaffold(
      appBar: AppBar(title: const Text('Lottie Controller')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // Lottie 애니메이션을 표시하는 위젯 추가
            // コントローラー（controller）パラメーターを渡すことを忘れないでください。
          ],
        ),
      ),
    ),
  );
}

위 코드에서는 Lottie 애니메이션을 표시하는 Lottie 위젯을 사용할 수 있습니다. controller 매개변수로 컨트롤러를 전달하여 애니메이션을 제어할 수 있습니다.

Lottie.asset(
  'assets/animation.json',
  controller: _animationController,
)

따라서 애니메이션을 시작하거나 일시정지하려면 앞서 정의한 startAnimation() 및 pauseAnimation() 메서드를 사용하면 됩니다.

이제 플러터 Lottie 컨트롤러를 사용하는 방법을 알았습니다. 손쉽게 애니메이션을 만들고 제어할 수 있는 Lottie 라이브러리를 활용하여 흥미로운 콘텐츠를 만들어보세요!

두서 없이 자세한 내용은 Lottie 라이브러리의 공식 문서를 참조하시기 바랍니다.