[flutter] 플러터 Riverpod에서의 애니메이션 효과 구현 방법

30 Nov 2023

flutter

플러터(Flutter)는 Google에서 개발한 크로스 플랫폼 모바일 앱 개발 프레임워크로, 앱에 애니메이션 효과를 적용하는 것은 매우 중요합니다. 이번 포스트에서는 플러터의 상태 관리 라이브러리인 Riverpod를 사용하여 애니메이션 효과를 구현하는 방법에 대해 알아보겠습니다.

Riverpod 소개

Riverpod은 플러터의 상태 관리를 위한 라이브러리로, Provider 패턴을 기반으로 동작합니다. Riverpod는 의존성 주입(Dependency Injection)을 쉽게 구현할 수 있도록 도와주며, 상태 변화를 감지하여 자동으로 UI를 업데이트할 수 있습니다.

애니메이션 효과 구현하기

Step 1: 패키지 추가

먼저, pubspec.yaml 파일에 다음 패키지를 추가해야합니다.

dependencies:
  flutter:
    sdk: flutter
  flutter_riverpod: ^1.0.0
  animated_floatactionbuttons: ^2.2.0

Step 2: 상태 관리 클래스 생성

import 'package:flutter_riverpod/flutter_riverpod.dart';

final animationProvider = Provider<AnimationController>((ref) {
  return AnimationController(
    vsync: ref.read(vsyncProvider),
    duration: Duration(seconds: 1),
  );
});

위의 코드는 애니메이션을 관리하기 위한 AnimationController를 제공하는 Provider를 생성하는 코드입니다. vsyncProvider는 플러터의 TickerProvider를 사용하여 애니메이션을 동기화하는 Provider입니다.

Step 3: 애니메이션 효과 적용

class MyAnimatedWidget extends ConsumerWidget {
  const MyAnimatedWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final animationController = watch(animationProvider);

    return FloatingActionButton(
      onPressed: () {
        if (animationController.isAnimating) {
          animationController.stop();
        } else {
          animationController.repeat(reverse: true);
        }
      },
      child: AnimatedIcon(
        icon: AnimatedIcons.pause_play,
        progress: animationController,
      ),
    );
  }
}

위의 코드는 ConsumerWidget을 사용하여 애니메이션 효과를 적용하는 예시입니다. animationProvider를 watch하여 AnimationController를 가져오고, FloatingActionButton 위젯을 생성하여 애니메이션을 시작 및 정지하는 기능을 추가하였습니다.

Step 4: 위젯 트리에 추가

마지막으로, 생성한 MyAnimatedWidget을 위젯 트리에 추가합니다. 예를 들어, Scaffold 위젯 내부의 body 속성에 추가할 수 있습니다.

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Animated Widget Example'),
      ),
      body: Center(
        child: MyAnimatedWidget(),
      ),
    );
  }
}

마무리

플러터의 Riverpod를 사용하여 애니메이션 효과를 구현하는 방법에 대해 알아보았습니다. 애니메이션 효과는 모바일 앱의 사용자 경험을 향상시키는 데 중요한 역할을 합니다. Riverpod를 활용하면 간편하게 애니메이션 효과를 적용할 수 있으며, 코드의 가독성과 유지 보수성을 향상시킬 수 있습니다.

이번 포스트가 플러터 Riverpod를 사용하여 애니메이션을 구현하는 데 도움이 되었기를 바랍니다. 플러터를 사용한 앱 개발에 성공하시기를 기원합니다!