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

14 Dec 2023

flutter

플러터(Flutter) 앱에서 애니메이션 효과를 구현하는 가장 일반적인 방법 중 하나는 프로바이더(Provider)를 사용하는 것입니다. 프로바이더를 이용하면 상태 관리를 효과적으로 수행하고 애니메이션을 만들기 위한 데이터를 전달할 수 있습니다. 이를 통해 앱의 성능을 향상시키고, 보다 부드러운 애니메이션 효과를 구현할 수 있습니다.

프로바이더를 통한 애니메이션 구현 예제

다음은 플러터에서 프로바이더를 사용하여 애니메이션 효과를 구현하는 간단한 예제입니다.

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

void main() => runApp(MyApp());

class MyModel with ChangeNotifier {
  double _animationValue = 0.0;

  double get animationValue => _animationValue;

  void setAnimationValue(double value) {
    _animationValue = value;
    notifyListeners();
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<MyModel>(
      create: (context) => MyModel(),
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text('애니메이션 효과'),
          ),
          body: Center(
            child: Consumer<MyModel>(
              builder: (context, myModel, child) {
                return GestureDetector(
                  onTap: () {
                    // 애니메이션 값을 변경하고 리빌드
                    myModel.setAnimationValue(1.0);
                  },
                  child: TweenAnimationBuilder<double>(
                    duration: Duration(seconds: 1),
                    tween: Tween(begin: 0.0, end: myModel.animationValue),
                    builder: (BuildContext context, double value, Widget child) {
                      return Transform.scale(
                        scale: value,
                        child: Icon(
                          Icons.favorite,
                          color: Colors.red,
                          size: 100,
                        ),
                      );
                    },
                  ),
                );
              },
            ),
          ),
        ),
      ),
    );
  }
}

위 예제에서 MyModel 클래스는 애니메이션 값을 보유하고 알림을 전달하는 데 사용됩니다. changeNotifierProvider 위젯을 사용하여 프로바이더를 제공하고, Consumer 위젯을 통해 애니메이션 값을 구독하여 변경 사항을 감지합니다.

이제 프로바이더를 사용하여 플러터 앱에서 부드러운 애니메이션 효과를 구현할 수 있습니다.

참고 문헌:

Flutter 공식 문서: 프로바이더