[flutter] Flutter Riverpod에서 애니메이션 효과 주기

14 Dec 2023

flutter

Riverpod은 Flutter 애플리케이션의 상태 관리를 위한 훌륭한 도구입니다. 이번 블로그에서는 Riverpod을 사용하여 Flutter 애플리케이션에서 애니메이션 효과를 주는 방법에 대해 알아보겠습니다.

1. Riverpod 및 Flutter 애니메이션 라이브러리 import

먼저, pubspec.yaml 파일에 다음과 같이 riverpod와 flutter의 애니메이션 라이브러리를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  flutter_riverpod: ^1.0.3
  flutter_hooks: ^0.18.0
  provider: ^5.0.0
  animations: ^2.0.0

2. Riverpod Provider 및 애니메이션 설정

다음으로, Riverpod을 사용하여 애니메이션을 설정합니다.

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:animations/animations.dart';

final animationProvider = StateProvider((ref) => false);

class MyAnimationPage extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final isAnimated = watch(animationProvider).state;
    return GestureDetector(
      onTap: () {
        context.read(animationProvider).state = !isAnimated;
      },
      child: AnimatedContainer(
        duration: Duration(seconds: 1),
        curve: Curves.easeInOut,
        color: isAnimated ? Colors.blue : Colors.red,
        width: isAnimated ? 200 : 100,
        height: isAnimated ? 100 : 200,
        child: Center(
          child: Text(
            isAnimated ? 'Expanded' : 'Shrinked',
            style: TextStyle(color: Colors.white),
          ),
        ),
      ),
    );
  }
}

3. 화면에 위젯 추가

마지막으로, 화면에 MyAnimationPage 위젯을 추가하여 애니메이션 효과를 적용합니다.

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Riverpod Animation Example'),
      ),
      body: Center(
        child: MyAnimationPage(),
      ),
    );
  }
}

위와 같이, Riverpod을 사용하여 Flutter 애플리케이션에서 애니메이션 효과를 쉽게 추가할 수 있습니다. 만약 Riverpod에 대해 더 자세히 알아보고 싶다면 Riverpod 공식 문서를 참고하시기 바랍니다.