[flutter] flutter_bloc 패키지의 사용법은?

18 Dec 2023

flutter

flutter_bloc는 Flutter 애플리케이션에서 상태 관리를 위한 효율적인 패키지입니다. 이를 사용하여 간단한 카운터 애플리케이션부터 복잡한 애플리케이션까지 상태를 관리할 수 있습니다.

flutter_bloc 패키지 설치

먼저, pubspec.yaml 파일에 다음과 같이 flutter_bloc 패키지를 추가합니다.

dependencies:
  flutter_bloc: ^7.2.0

그리고 터미널에서 다음 명령어를 실행하여 패키지를 설치합니다.

flutter pub get

Bloc 및 Event, State 클래스 생성

flutter_bloc 패키지를 사용하기 위해서는 다음과 같이 bloc, event, state 클래스를 생성해야 합니다.

import 'package:flutter_bloc/flutter_bloc.dart';

// Event 클래스
enum CounterEvent { increment, decrement }

// State 클래스
class CounterState {
  final int count;

  CounterState(this.count);
}

// Bloc 클래스
class CounterBloc extends Bloc<CounterEvent, CounterState> {
  CounterBloc() : super(CounterState(0));

  @override
  Stream<CounterState> mapEventToState(CounterEvent event) async* {
    if (event == CounterEvent.increment) {
      yield CounterState(state.count + 1);
    } else if (event == CounterEvent.decrement) {
      yield CounterState(state.count - 1);
    }
  }
}

BlocProvider를 이용한 사용

이제 위에서 만든 CounterBloc을 화면에서 사용하기 위해 BlocProvider를 이용합니다.

BlocProvider(
  create: (context) => CounterBloc(),
  child: MyWidget(),
)

BlocBuilder를 이용한 화면 업데이트

BlocProvider로 Bloc을 제공한 후에는 BlocBuilder를 사용하여 상태에 따라 화면을 업데이트할 수 있습니다.

BlocBuilder<CounterBloc, CounterState>(
  builder: (context, state) {
    return Text('${state.count}');
  },
)

flutter_bloc 패키지의 기본적인 사용법은 위와 같습니다. 보다 복잡한 애플리케이션에서도 활용할 수 있으며, 공식 문서와 예제를 참조하여 상태 관리를 보다 효율적으로 할 수 있습니다.

더 많은 정보는 공식 문서를 참조하십시오.