[flutter] 플러터 프로바이더를 활용한 애니메이션 처리

14 Dec 2023

flutter

플러터(Flutter)는 다양한 애니메이션을 손쉽게 처리할 수 있는 기능을 제공합니다. 이번 글에서는 플러터 프로바이더(Provider)를 활용하여 애니메이션을 처리하는 방법에 대해 알아보겠습니다.

1. 프로바이더(Provider) 소개

프로바이더는 플러터 앱의 상태 관리를 쉽게 해주는 라이브러리로, 앱 전역에서 사용되는 데이터나 함수를 손쉽게 관리할 수 있는 기능을 제공합니다.

2. 애니메이션 처리 방법

플러터에서 프로바이더를 활용하여 애니메이션을 처리하는 방법은 아래와 같습니다.

2.1. 프로바이더 선언

먼저, 해당 화면에서 사용할 애니메이션을 위한 프로바이더를 선언합니다.

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

class AnimationProvider with ChangeNotifier {
  bool _isAnimating = false;

  bool get isAnimating => _isAnimating;

  void startAnimation() {
    _isAnimating = true;
    notifyListeners();
  }

  void stopAnimation() {
    _isAnimating = false;
    notifyListeners();
  }
}

2.2. 애니메이션을 트리거하는 위젯

애니메이션을 트리거할 위젯 내에서 프로바이더의 메소드를 호출하여 애니메이션 상태를 변경합니다.

class MyAnimatedWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        Provider.of<AnimationProvider>(context, listen: false).startAnimation();
      },
      child: Container(
        width: 100,
        height: 100,
        color: Colors.blue,
      ),
    );
  }
}

2.3. 애니메이션 상태에 따른 UI 변경

UI를 구성하는 위젯에서 프로바이더의 상태를 감시하고, 상태에 따라 애니메이션을 적용합니다.

class AnimatedBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AnimatedContainer(
      duration: Duration(seconds: 1),
      width: Provider.of<AnimationProvider>(context).isAnimating ? 200 : 100,
      height: Provider.of<AnimationProvider>(context).isAnimating ? 200 : 100,
      color: Colors.red,
    );
  }
}

위와 같이 프로바이더를 활용하여 애니메이션 상태를 관리하고, UI에 적용할 수 있습니다.

플러터 프로바이더를 활용하여 애니메이션을 처리하는 방법에 대해 알아보았습니다. 프로바이더를 사용하여 상태 관리를 효율적으로 구현할 수 있으며, 이를 활용하여 복잡한 애니메이션도 쉽게 처리할 수 있습니다.