Flutter) Bloc 패턴 적용을 위한 flutter_bloc widget(1)

 bloc에 대한 설명은 했지만 flutter에서 사용하는 bloc widget을 설명하지 않아 두번에 거쳐 포스팅 하려한다. 기본적인 내용은 https://bloclibrary.dev/#/flutterbloccoreconcepts?id=blocbuilder 에서 참고하여 적은 것들이다. flutter에서는 flitter_bloc이란 dart pakage를 제공하여 준다. 해당 패키지는 아래의 페이지서 볼 수 있으며 사용전 pubspec.yaml파일에 추가할수 있도록 하자!

https://pub.dev/packages/flutter_bloc

flutter_bloc | Flutter Package

1. BlocBuilder

• BlocBuilder의 필수 요건은 bloc과 builder 옵션이다.
• bloc : widget에서 사용하게 되는 bloc을 받게 된다.
• builder : state들이 업데이트 될때 새로이 그려지게되는 부분으로 Widget을 return해야 한다.
• 아래와 같은 구조로 만들어 지게 된다.

...
BlocBuilder<ExampleBloc, ExampleState>(
    bloc : _exampleBloc;
    builder : (BuilderContext cotext, ExampleState state){
    	return ...
    }
)
...

2. BlocProvider

• 새로운 bloc을 만들거나, 만들어진 블럭을 다른 페이지로 넘겨 계속 사용할수 있도록 해주는 역할을 한다.
• 새로이 bloc을 만들때

BlocProvider<ExampleBloc>(
     create: (BuildContext context) => ExampleBloc(),
     child: Widget...
)

• 원래 있던 블록을 다른 곳에서 사용하고 싶을때는 BlodProvider.value를 사용하게 된다.

...
BlocProvider<ExampleBloc>.value(
    value : BlocProvider.of<ExampleBloc>(context),
    child : Widget...
)
...

 

3. MultiBlocProvider

• Bloc을 사용하다 보면 여러개의 bloc을 사용하는곳이 생기게 된다. 이때 사용되는 것이 MultiBlocProvider이다.
• 초기에는 해당 위젯을 제공하여 주지 않아 BlocProvider를 중첩하여 사용했다. 그 때문에 코드의 가독성이 떨어졌다.
• 해당 위젯의 제공으로 코드의 가독성이 한층 올라가게 됐다.

...
MultiBlocProvider(
    povider : [
        BlocProvider<ExampleBlocA>(
            create : (BuildContext context) => ExampleBlocA(),
        ),
        BlocProvider<ExampleBlocB>(
            create : (BuildContext context) => ExampleBlocB(),
        ),
        BlocProvider<ExampleBlocC>(
            create : (BuildContext context) => ExampleBlocC(),
        ),
    ],
    child : Widget...
)
...

 

4. BlocListner

• BlocListener의 경우 state의 변화에 대해 반을을 하는 것이다.
• BlocListener의 경우 상태 변경시 한번씩 발생해야 하는 기능에 대해서 사용이 되어야 한다.(다른 페이지로의 라우팅 같은것들)
• state의 변화가 생겼을때 한번 불려서 사용이 되게 된다. 

BlocListener<ExampleBloc, ExampleState>(
    bloc : exampleBloc,
    listener : (BuildeContext context, ExampleState state){
       //state의 변경에 따라 실행 되어야 하는것들
    }
)

 

5. MulitiBlocListener

• MultiBlocProvider와 같이 listner또한 여러 bloc이 존재할때에 사용하기 위해 만들어진 widget이다.
• 이 또한 MultiBlocProvider처럼 가독성이 좋다.

...
MultiBlocListener(
    listener : [
        BlocListener<ExampleBlocA, ExampleStateA>(
            listener : (BuildContext context){},
        ),
        BlocListener<ExampleBlocB, ExampleStateB>(
            listener : (BuildContext context){},
        ),
        BlocListener<ExampleBlocC, ExampleStateC>(
            listener : (BuildContext context){},
        ),
    ],
    child : Widget...
)
...

 

 flutter_bloc에서 제공해주는 위의 widget들을 사용하면 좀 더 쉽게 Bloc Pattern을 통한 코딩을 할 수가 있게 된다.