[Flutter] BlocListener vs BlocBuilder vs BlocConsumer 차이

BlocBuilder vs BlocListener

 

상태 변경 시 UI를 다시 그림	상태 변경 시 side effect (로직 실행)
Widget build 안에서 사용	보통 Scaffold 근처에 위치
예: ListView, 버튼 상태 변경	예: SnackBar, Navigator.pop() 등

 

return BlocListener<TestBloc, TestState>(
  listenWhen: (previous, current) =>
      previous.status != current.status, // 상태가 변할 때만 반응
  listener: (context, state) {
    if (state.status == ApiStatus.error) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text(state.errMsg)),
      );
    }
    if (state.status == ApiStatus.succeeded) {
      Navigator.of(context).pop(); // 혹은 다른 처리
    }
  },
  child: Scaffold(
    appBar: AppBar(title: Text('Sample Test')),
    body: ...,
  ),
);

 

BlocConsumer

만약 UI를 다시 그리고 side effect도 같이 하고 싶다면 BlocConsumer를 쓰면 됩니다

 

BlocConsumer<TestBloc, TestState>(
  listener: (context, state) {
    if (state.status == ApiStatus.error) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text(state.errMsg)),
      );
    }
  },
  builder: (context, state) {
    return state.status == ApiStatus.loading
        ? CircularProgressIndicator()
        : YourMainUI();
  },
);