[flutter] 플러터와 로티(Lottie)의 관계

05 Dec 2023

flutter

소개

플러터(Flutter)는 Google에서 개발한 오픈 소스 UI 프레임워크로, 모바일 애플리케이션 개발을 위한 도구로 널리 사용됩니다. 반면에 로티(Lottie)는 Airbnb에서 개발한 애니메이션 파일 포맷으로, JSON 형식으로 구성된 애니메이션 파일을 모바일 애플리케이션에 적용할 수 있게 해줍니다.

플러터와 로티의 연동

플러터에서 로티 애니메이션을 사용하려면, 먼저 플러터의 lottie 패키지를 설치해야 합니다. 이 패키지는 로티 애니메이션을 플러터 프로젝트에 통합하는 데 도움을 줍니다.

로티를 플러터에서 사용하는 방법은 다음과 같습니다.

플러터 프로젝트에 lottie 패키지를 추가합니다.
```
dependencies:
  lottie: ^1.0.0
```
플러터 프로젝트에서 로티 애니메이션 파일을 로드합니다.
```
import 'package:lottie/lottie.dart';

Lottie.asset('assets/animation.json');
```
위 예제에서는 애니메이션 파일을 앱의 assets 폴더에 저장하고 로드합니다.

로티 애니메이션을 위젯으로 표현합니다.

class LottieAnimation extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Lottie.asset('assets/animation.json');
  }
}

위젯으로 정의된 로티 애니메이션을 앱의 UI에 표시할 수 있습니다.

추가 기능

플러터와 로티를 연동하여 사용하는 것 외에도, 플러터의 다양한 기능을 활용하여 로티 애니메이션을 제어하고 사용자 경험을 향상시킬 수 있습니다. 예를 들어, 플러터의 애니메이션 컨트롤러를 사용하여 애니메이션을 일시 정지하거나 재생할 수 있습니다.

아래는 AnimationController를 사용하여 로티 애니메이션을 제어하는 예시입니다.

import 'package:lottie/lottie.dart';

class LottieAnimation extends StatefulWidget {
  @override
  _LottieAnimationState createState() => _LottieAnimationState();
}

class _LottieAnimationState extends State<LottieAnimation>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 2),
    );
  }

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

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        if (_controller.isAnimating) {
          _controller.stop();
        } else {
          _controller.repeat();
        }
      },
      child: Lottie.asset(
        'assets/animation.json',
        controller: _controller,
        onLoaded: (composition) {
          _controller
            ..duration = composition.duration
            ..repeat();
        },
      ),
    );
  }
}

위 예시에서는 AnimationController를 사용하여 애니메이션의 재생 시간을 조정하고, 애니메이션을 반복하는 기능을 추가했습니다.

결론

플러터와 로티는 강력한 도구로, 애니메이션 기능을 갖춘 멋진 모바일 애플리케이션을 만드는 데 사용될 수 있습니다. 플러터의 유연성과 로티의 다양한 애니메이션을 통해 사용자 경험을 개선하고 흥미로운 UI를 구현할 수 있습니다. 플러터에서 로티를 사용하는 방법을 익히고, 추가적인 기능을 활용하여 훌륭한 애플리케이션을 개발해보세요.

참고 자료

플러터 공식 문서: Flutter Animation