[flutter] 플러터 애니메이션과 상태 관리 패턴 연계하기

11 Dec 2023

flutter

안녕하세요! 이번 포스트에서는 플러터(Flutter)에서 애니메이션과 상태 관리 패턴을 결합하여 어떻게 사용하는지 알아볼 것입니다. 애니메이션과 상태 관리 패턴을 연계하면 앱의 사용자 경험(UX)을 향상시키는 데 도움이 됩니다.

1. 애니메이션과는 무엇인가?

애니메이션은 플러터 애플리케이션에서 부드럽고 시각적으로 아름다운 UI를 구현하는 데 중요한 역할을 합니다. 플러터에서는 Animation 클래스와 AnimationController 클래스를 사용하여 애니메이션을 만들 수 있습니다.

import 'package:flutter/material.dart';

class FadeInAnimation extends StatefulWidget {
  @override
  _FadeInAnimationState createState() => _FadeInAnimationState();
}

class _FadeInAnimationState extends State<FadeInAnimation>
    with SingleTickerProviderStateMixin {
  AnimationController controller;
  Animation<double> animation;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
      duration: Duration(seconds: 1),
      vsync: this,
    );
    animation = Tween<double>(begin: 0.0, end: 1.0).animate(controller)
      ..addListener(() {
        setState(() {});
      });
    controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Opacity(
      opacity: animation.value,
      child: Container(
        // Widget 내용
      ),
    );
  }

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

2. 상태 관리 패턴과는 무엇인가?

상태 관리 패턴은 애플리케이션 상태를 관리하고 사용자 입력 또는 외부 데이터의 변화에 대응하는 방법입니다. 플러터에서는 setState, Provider, Bloc, GetX 등 다양한 상태 관리 패턴을 제공합니다.

3. 애니메이션과 상태 관리 패턴 연계하기

애니메이션과 상태 관리 패턴을 연계할 때는 주로 Provider나 GetX와 함께 사용하는 경우가 많습니다. 애니메이션의 상태를 관리하여 애니메이션을 시작하거나 중지하고, 상태에 따라 UI를 업데이트 할 수 있습니다.

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

class CounterProvider with ChangeNotifier {
  int _count = 0;
  get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }

  void reset() {
    _count = 0;
    notifyListeners();
  }
}

class AnimatedCounter extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counter = Provider.of<CounterProvider>(context);

    return Column(
      children: [
        FadeInAnimation(), // 애니메이션 적용
        Text('Count: ${counter.count}'),
        RaisedButton(
          onPressed: () {
            counter.increment();
          },
          child: Text('Increment'),
        ),
        RaisedButton(
          onPressed: () {
            counter.reset();
          },
          child: Text('Reset'),
        ),
      ],
    );
  }
}

결론

애니메이션과 상태 관리 패턴을 연계하면 앱의 사용자 경험을 향상시키는데 매우 유용합니다. 이를 통해 앱의 UI를 부드럽고 직관적으로 만들 수 있으며, 사용자와의 상호작용을 효율적으로 다룰 수 있습니다.

참고 문헌: