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

30 Nov 2023

flutter

애니메이션은 플러터 앱을 더 동적이고 생동감있게 만들어줍니다. 애니메이션 효과를 구현하기 위해 Get_it 라이브러리를 사용해볼 것입니다. Get_it는 의존성 주입(DI)과 서비스 로케이터 패턴을 플러터 앱에 적용할 수 있게 도와줍니다.

Get_it 라이브러리 설치

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

dependencies:
  flutter:
    sdk: flutter
  get_it: ^7.1.3

그런 후 터미널에서 다음 명령어를 실행하여 라이브러리를 설치하세요.

flutter pub get

애니메이션 효과 구현하기

먼저, get_it 패키지의 GetIt 클래스를 사용하여 애니메이션을 제어할 수 있는 클래스를 생성합니다.

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

class AnimationController {
  final _animation = ValueNotifier<double>(0.0);
  ValueListenable<double> get animation => _animation;

  void startAnimation() {
    // 애니메이션 코드 작성
  }

  void stopAnimation() {
    // 애니메이션 중지 코드 작성
  }
}

이제 앱 전역에서 이 AnimationController 클래스에 접근할 수 있도록 GetIt을 사용하여 등록합니다.

void main() {
  GetIt.instance.registerSingleton(AnimationController());
  runApp(MyApp());
}

이제 우리의 애니메이션 효과를 구현할 위젯을 작성해보겠습니다. 앱 전체에서 AnimationController에 접근하기 위해 GetIt을 사용합니다.

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

class AnimationWidget extends StatefulWidget {
  @override
  _AnimationWidgetState createState() => _AnimationWidgetState();
}

class _AnimationWidgetState extends State<AnimationWidget>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _animationController =
        GetIt.instance.get<AnimationController>() as AnimationController;
    _animation = CurvedAnimation(
      parent: _animationController.animation,
      curve: Curves.easeInOut,
    );
  }

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

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animation,
      builder: (BuildContext context, Widget child) {
        return Opacity(
          opacity: _animation.value,
          child: Container(
            // 애니메이션을 적용할 위젯
          ),
        );
      },
    );
  }
}

이제 애니메이션을 시작하고 중지하는 버튼을 추가합니다.

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

class AnimationControls extends StatelessWidget {
  AnimationController _animationController;

  @override
  Widget build(BuildContext context) {
    _animationController =
        GetIt.instance.get<AnimationController>() as AnimationController;

    return Row(
      children: [
        RaisedButton(
          onPressed: () {
            _animationController.startAnimation();
          },
          child: Text('Start Animation'),
        ),
        RaisedButton(
          onPressed: () {
            _animationController.stopAnimation();
          },
          child: Text('Stop Animation'),
        ),
      ],
    );
  }
}

결론

Get_it 라이브러리를 사용하여 플러터 앱에서 애니메이션 효과를 구현하는 방법을 살펴보았습니다. Get_it를 사용하면 앱 전체에서 동일한 인스턴스에 접근할 수 있으므로 애니메이션 컨트롤을 편리하게 할 수 있습니다. Get_it의 다양한 기능을 활용하여 플러터 앱에 다양한 애니메이션을 추가해보세요.