[flutter] get_it를 사용하여 플러터 앱에서 애니메이션을 어떻게 구현하는가?

30 Nov 2023

flutter

이번에는 Flutter 앱에서 애니메이션을 구현하는 방법에 대해 알아보겠습니다. 특히, get_it 라이브러리를 사용하여 애니메이션을 관리하는 방법에 대해서도 알아보겠습니다.

get_it 라이브러리란?

get_it 라이브러리는 종속성 주입(Dependency Injection)을 구현하기 위한 Flutter 패키지 중 하나입니다. 이를 사용하면 앱에서 객체를 생성하고 공유하는 데 필요한 모든 작업을 쉽게 할 수 있습니다.

애니메이션 구현을 위한 준비 작업

먼저, get_it 라이브러리를 사용하여 애니메이션을 관리하기 위한 서비스를 생성해야 합니다. 이 서비스는 앱에서 애니메이션을 설정하고 실행하는 데 사용됩니다.

import 'package:flutter/animation.dart';

class AnimationService {
  AnimationController _controller;

  AnimationService() {
    _controller = AnimationController(
      duration: Duration(seconds: 1),
      vsync: TickerProviderStateMixin,
    );
  }

  Animation<double> get animation => _controller.view;
  
  void startAnimation() {
    _controller.forward();
  }

  void stopAnimation() {
    _controller.stop();
  }
}

위의 코드에서는 AnimationController를 사용하여 애니메이션을 관리합니다. 생성자에서는 애니메이션의 지속 시간과 TickerProvider를 지정합니다. get 메소드를 사용하여 애니메이션을 가져올 수 있습니다. 또한 애니메이션을 시작하고 중지하기 위한 startAnimation 및 stopAnimation 메소드도 제공됩니다.

get_it를 사용하여 애니메이션 서비스 등록하기

이제 애니메이션 서비스를 get_it에 등록해야 합니다. 이를 위해서는 main.dart 파일에서 다음과 같은 작업을 수행해야 합니다.

import 'package:get_it/get_it.dart';

final getIt = GetIt.instance;

void main() {
  getIt.registerSingleton<AnimationService>(AnimationService());
  runApp(MyApp());
}

위의 코드에서는 getIt 인스턴스를 생성하고 AnimationService를 등록하고 있습니다. 이제 이 서비스를 어디서든 사용할 수 있게 되었습니다.

애니메이션 사용하기

이제 애니메이션 서비스를 사용하여 앱에서 애니메이션을 실행해보겠습니다. 예를 들어, 화면 전환 시에 애니메이션을 적용하고 싶다면 다음과 같은 방법을 사용할 수 있습니다.

class AnimatedScreen extends StatefulWidget {
  @override
  _AnimatedScreenState createState() => _AnimatedScreenState();
}

class _AnimatedScreenState extends State<AnimatedScreen> with TickerProviderStateMixin {
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _animation = getIt<AnimationService>().animation;
    getIt<AnimationService>().startAnimation();
  }

  @override
  void dispose() {
    super.dispose();
    getIt<AnimationService>().stopAnimation();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Animated Screen"),
      ),
      body: Center(
        child: AnimatedBuilder(
          animation: _animation,
          builder: (BuildContext context, Widget child) {
            return Opacity(
              opacity: _animation.value,
              child: child,
            );
          },
          child: Text(
            "Hello, Flutter!",
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

위의 코드에서는 AnimatedBuilder를 사용하여 애니메이션을 생성하고 애니메이션을 적용할 위젯인 Opacity를 사용하고 있습니다. 애니메이션 서비스에서 가져온 애니메이션을 상태에 저장하고, initState 메소드에서 애니메이션을 시작하며, dispose 메소드에서 애니메이션을 중지하고 있습니다.

결론

이제 애니메이션을 구현하는 방법과 get_it 라이브러리를 사용하여 애니메이션 서비스를 관리하는 방법을 알게 되었습니다. 이를 통해 플러터 앱에서 좀 더 동적이고 인상적인 애니메이션을 적용할 수 있습니다. 더 자세한 내용은 get_it 공식 문서를 참고해주세요.