[Flutter] BlocProvider 사용하기

 

먼저 Bloc을 사용하기 위한 dependecies를 추가하여 춥시다. (아래링크 참고)

 

https://pub.dev/packages/flutter_bloc

flutter_bloc | Flutter Package

 

https://pub.dev/packages/bloc

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
 
  bloc: ^8.1.0
  flutter_bloc: ^8.1.1

 

 

간단한 이벤트를 만들어 줍니다.

import 'package:bloc/bloc.dart';

class SampleBloc extends Bloc<SampleEvent, int> {
  SampleBloc() : super(0) {
    print('init Samplebloc');
    on<SampleEvent>((event, emit) {
      //동작하는 이벤트
      print('Sample Event Called');
    });
    on<AddSampleEvent>((event, emit) {
      // 동작하는 이벤트 emit 을 통하여 상태값을 반환시켜 준다.
      emit(state + 1);
    });
  }
}

class SampleEvent {}

class AddSampleEvent extends SampleEvent {}

 

만들어둔 이벤트를 보여줄 페이지를 만들어 준다.

 

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_bloc_widget_sample/src/bloc/sample_bloc.dart';

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

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      // BlocProvider 는 child 에서 영향력을 행사 한다.
      create: (context) => SampleBloc(),
      lazy: false, // 기본값은 ture 이며 false 인 경우 페에지 호출시 bloc 이 생성된다.
      child: SamplePage(),
    );
  }
}

class SamplePage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bloc Test'),
      ),
      body: Center(
        child:
            BlocBuilder<SampleBloc, int>(
              //BlocBuilder 를 사용하여 미리 만들어둔 bloc 이벤트를 이용하여 화면을 동적으로 만든다.
              builder: (context,state){
                // state SampleBloc 에서 반환하여 주는 값을 표시
                return Text(state.toString());
              },
              ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 미리 만들어둔 bloc 의 이벤트를 호출한다.
          context.read<SampleBloc>().add(AddSampleEvent());
        },
      ),
    );
  }
}

 

실행시킨 후 버튼을 누르면 숫자가 증가하는 것을 확인할 수 있다.

 

 

참고 : https://www.youtube.com/watch?v=wbv1tTIfmYM&list=PLgRxBCVPaZ_0ZJevIcngLXMrm-1RPXxRW&index=4