728x90
반응형
SMALL
안녕하세요! 프뚜입니다.
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 세팅이 많이 나와있지 않아서 직접 포스팅합니다.
728x90
반응형
LIST
'프로그램 > FLUTTER' 카테고리의 다른 글
[Flutter] 플러터 go_router 세팅 및 설정하기 (0) | 2023.09.06 |
---|---|
[Flutter] 플러터 get_it 설정 및 사용하기 (0) | 2023.09.04 |
[Flutter] 플러터 freezed 설정 및 사용하기 (0) | 2023.09.01 |
[Flutter] 플러터 Hive 설정 및 사용하기 (0) | 2023.08.31 |
[Flutter] 플러터 Logger 로그 예쁘게 보기 (0) | 2023.08.30 |