[flutter] 플러터에서 bloc 패턴을 사용하여 앱의 애니메이션 구현하기

20 Dec 2023

flutter

앱의 사용자 인터페이스(UI)에 애니메이션을 구현하는 것은 사용자 경험을 향상시키는 데 중요합니다. 플러터(Flutter) 앱에서 애니메이션을 관리하고 상태를 효율적으로 관리하기 위해 bloc 패턴을 사용할 수 있습니다.

bloc 패턴 소개

bloc(business logic component) 패턴은 상태 관리와 비즈니스 로직을 분리하여 관리하는 디자인 패턴입니다. 이 패턴은 플러터에서 상태 관리를 쉽게 할 수 있도록 도와줍니다. 앱의 UI 변경과 관련된 로직을 분리하여 UI를 갱신하고 관리하는 것이 주요 목표입니다.

플러터에서 bloc 패턴을 활용하여 애니메이션 구현하기

다음은 bloc 패턴을 활용하여 플러터 앱의 애니메이션을 구현하는 간단한 예제 코드입니다.

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

// 애니메이션 이벤트
enum AnimationEvent { start, stop }

// 애니메이션 상태
class AnimationState {
  final bool isAnimating;

  AnimationState({required this.isAnimating});
}

// 애니메이션 블록
class AnimationBloc extends Bloc<AnimationEvent, AnimationState> {
  AnimationBloc() : super(AnimationState(isAnimating: false));

  @override
  Stream<AnimationState> mapEventToState(AnimationEvent event) async* {
    switch (event) {
      case AnimationEvent.start:
        yield AnimationState(isAnimating: true);
        break;
      case AnimationEvent.stop:
        yield AnimationState(isAnimating: false);
        break;
    }
  }
}

// 앱의 홈 화면
class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (BuildContext context) => AnimationBloc(),
      child: Scaffold(
        appBar: AppBar(title: Text('Animation Bloc Example')),
        body: Center(
          child: BlocBuilder<AnimationBloc, AnimationState>(
            builder: (context, state) {
              return AnimatedContainer(
                duration: Duration(seconds: 1),
                width: state.isAnimating ? 200.0 : 100.0,
                height: state.isAnimating ? 200.0 : 100.0,
                color: state.isAnimating ? Colors.blue : Colors.red,
              );
            },
          ),
        ),
        floatingActionButton: BlocBuilder<AnimationBloc, AnimationState>(
          builder: (context, state) {
            return FloatingActionButton(
              onPressed: () {
                if (state.isAnimating) {
                  context.read<AnimationBloc>().add(AnimationEvent.stop);
                } else {
                  context.read<AnimationBloc>().add(AnimationEvent.start);
                }
              },
              child: Icon(state.isAnimating ? Icons.stop : Icons.play_arrow),
            );
          },
        ),
      ),
    );
  }
}

위 예제에서는 bloc 패턴을 사용하여 애니메이션을 제어하는 간단한 앱의 홈 화면을 구현했습니다. AnimationBloc은 애니메이션의 시작 및 중지와 관련된 로직을 처리하고, BlocBuilder를 사용하여 애니메이션의 상태 변화에 따라 UI를 업데이트합니다.

결론

플러터에서 bloc 패턴을 사용하여 앱의 애니메이션을 구현하는 것은 애니메이션을 더 효율적으로 관리하고 상태를 관리하는 데 도움이 됩니다. bloc 패턴을 활용하면 앱의 사용자 경험을 향상시키는 더 나은 애니메이션을 구현할 수 있습니다.