Flutter bloc - 2

BlocProvider

BlocProvider는 BlocProvider.of<T>(context)를 통해 자식에게 블록을 제공하는 Flutter 위젯입니다. 종속성 주입(DI) 위젯으로 사용되어 블록의 단일 인스턴스가 하위 트리 내의 여러 위젯에 제공될 수 있습니다.

대부분의 경우 'BlocProvider'는 나머지 하위 트리에서 사용할 수 있는 새 블록을 만드는 데 사용해야 합니다. 이 경우 'BlocProvider'가 블록 생성을 담당하기 때문에 블록을 닫는 작업을 자동으로 처리합니다.

BlocProvider(
  create: (BuildContext context) => BlocA(),
  child: ChildA(),
);

어떤 경우에는 'BlocProvider'를 사용하여 위젯 트리의 새 부분에 기존 블록을 제공할 수 있습니다. 이것은 기존 블록을 새 경로에서 사용할 수 있어야 할 때 가장 일반적으로 사용됩니다. 이 경우 BlocProvider는 블록을 생성하지 않았기 때문에 자동으로 블록을 닫지 않습니다.

BlocProvider.value(
  value: BlocProvider.of<BlocA>(context),
  child: ScreenA(),
);

그다음 ChildA나 ScreenA 로부터 blocA를 얻을 수 있습니다.

// with extensions
context.read<BlocA>();

// without extensions
BlocProvider.of<BlocA>(context);

위의 스니펫은 한번 실행되며 변화에대한 알림을 받지 않습니다. 따라서 인스턴스를 얻고, 하위의 상태 변화에 대해 구독하기 위해서는 다음을 사용 할 수 있습니다.

// with extensions
context.watch<BlocA>();

// without extensions
BlocProvider.of<BlocA>(context, listen: true);

context.select 는 특정 상태를 얻기 위해 사용하며, 선택된 상태부분의 변화에만 반응하기 위해 사용합니다.

final isPositive = context.select((CounterBloc b) => b.state >= 0);

위 스니펫은 CounterBloc이 양수에서 음수 또는 그반대일 경우에만 rebuild 되며, BlocSelector와 기능적으로 동일합니다.

BlocListener

BlocListener는 BlocWidgetListener와 선택적 bloc을 사용하고 블록의 상태 변경에 대한 응답으로 listener를 호출하는 Flutter 위젯입니다. 탐색, SnackBar 표시, Dialog 표시 등과 같이 상태 변경당 한 번 발생해야 하는 기능에 사용해야 합니다.

listener는 BlocBuilder의 builder와 달리 각 상태 변경(초기 상태를 포함하여 NOT)에 대해 한 번만 호출되며 void 함수입니다.

bloc 매개변수가 생략되면 BlocListener는 BlocProvider와 현재 BuildContext를 사용하여 자동으로 조회를 수행합니다.

BlocListener<BlocA, BlocAState>(
  listener: (context, state) {
    // do stuff here based on BlocA's state
  },
  child: Container(),
)

BlocProvider 또는 현재 BuildContext를통해 접근하지 못하는 경우에만 bloc을 명시하기 바랍니다.

listenWhen 파라미터는 이전 bloc의 상태와 현재 bloc의 상태를 가지고 boolean을 반환합니다. 만약 true를 반환하면 state와 함께 호출이 되고 false를 반환하면 listener는 호출되지 않습니다.

BlocListener<BlocA, BlocAState>(
  listenWhen: (previousState, state) {
    // return true/false to determine whether or not
    // to call listener with state
  },
  listener: (context, state) {
    // do stuff here based on BlocA's state
  },
  child: Container(),
)