[Flutter] 플러터 bloc 설정 및 사용하기

안녕하세요! 프뚜입니다.

bloc에 대해 포스팅합니다.

---

OS: Windows 10

Dart: Dart SDK version: 3.0.6 (stable) (Tue Jul 11 18:49:07 2023 +0000) on "windows_x64"

Flutter: Flutter 3.10.6

---

# bloc 연결하기

flutter pub add bloc
flutter pub add bloc_concurrency
flutter pub add flutter_bloc

프로젝트 경로에서 위 명령어를 실행합니다.

---

# bloc 파일 생성하기

import 'dart:async';

import 'package:bloc/bloc.dart';
import 'package:freezed_annotation/freezed_annotation.dart';
import 'package:johdaetgoo_flutter/commons/utils/status_enum.dart';
import 'package:johdaetgoo_flutter/main.dart';
import 'package:johdaetgoo_flutter/pages/subscriber/repositories/subscriber_repository.dart';

part 'subscriber_bloc.freezed.dart';
part 'subscriber_event.dart';
part 'subscriber_state.dart';

class SubscriberBloc extends Bloc<SubscriberEvent, SubscriberState> {
  final SubscriberRepository _repository;

  SubscriberBloc(this._repository): super(SubscriberState.initial()) {
    on<SubscriberEvent>((event, emit) async {
      await event.when<FutureOr<void>>(
        init: () => _onInit(emit),
      );
    });
  }

  Future<void> _onInit(Emitter<SubscriberState> emit) async {
    logger.d('onInit');
  }
}

freezed 세팅이 되어있어야 위 bloc구조를 사용할 수 있습니다.

freezed 세팅은 이전 포스팅에서 확인하실 수 있습니다.

---

# get_it 연관 관계 추가하기

import 'package:get_it/get_it.dart';
import 'package:johdaetgoo_flutter/pages/subscriber/blocs/subscriber_bloc.dart';
import 'package:johdaetgoo_flutter/pages/subscriber/repositories/subscriber_repository.dart';

final sl = GetIt.instance;

class ServiceLocator {
  static void init() {
    // 2023.08.25[holywater]: 싱글톤 Repository 연결
    sl.registerLazySingleton<SubscriberRepository>(() => SubscriberRepositoryImpl());
    sl.registerFactory(() => SubscriberBloc(sl()));
  }
}

이전 get_it 세팅에서 sl.registerFactory(() => SubscriberBloc(sl())); 의 주석을 해제합니다.

get_it 세팅은 이전 포스팅에서 확인하실 수 있습니다.

---

# event 파일 생성하기

part of 'subscriber_bloc.dart';

@freezed
class SubscriberEvent with _$SubscriberEvent {
  const factory SubscriberEvent.init() = _Init;
}

bloc과 page에서 사용할 수 있는 event 규격을 생성합니다.

---

# state 파일 생성하기

part of 'subscriber_bloc.dart';

@freezed
class SubscriberState with _$SubscriberState {
  const factory SubscriberState({
    required SubscriberStatus status,
  }) = _SubscriberState;

  factory SubscriberState.initial() => const SubscriberState(
    status: SubscriberStatus.init,
  );
}

bloc의 상태 값을 저장할 수 있는 state class를 생성합니다.

---

# status_enum 파일 생성하기

enum SubscriberStatus { init, failure }

state의 상태를 enum으로 관리합니다.

---

# bloc build

flutter pub run build_runner build --delete-conflicting-outputs

build_runner를 통해 freezed의 연관 관계를 생성합니다.

 

---

# bloc 연결 및 사용하기

import 'package:flutter/cupertino.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:johdaetgoo_flutter/commons/routers/service_locator.dart';
import 'package:johdaetgoo_flutter/pages/subscriber/blocs/subscriber_bloc.dart';

class TestView extends StatelessWidget {
  const TestView({super.key});

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => sl<SubscriberBloc>()..add(const SubscriberEvent.init()),
      child: BlocBuilder<SubscriberBloc, SubscriberState>(
        builder: (context, state) {
          return Container(child: Text('프뚜'),);
        },
      ),
    );
  }
}

BlocProvider class에 sl(get_It)에 연동 되어있는 Bloc을 연결해줍니다.

---

플러터 bloc 세팅이 많이 나와있지 않아서 직접 포스팅합니다.