BlocBuilder
BlocBuilder
):
在UI里根据state的变化显示不同的内容(BlocBuilder란?
BlocBuilder
는 Bloc 패턴의 핵심 위젯 중 하나로, Bloc 또는 Cubit으로부터 발생하는 상태 변화에 반응하여 UI를 업데이트하는 데 사용됩니다. BlocBuilder
는 주어진 Bloc 또는 Cubit의 상태에 따라 조건부로 위젯을 빌드합니다.
사용 방법
BlocBuilder<BlocType, BlocState>(
builder: (context, state) {
if (state is SpecificState) {
return WidgetForSpecificState();
} else {
return OtherWidget();
}
},
)
BlocType
: 관찰하고자 하는 Bloc 또는 Cubit의 타입입니다.BlocState
: 해당 Bloc 또는 Cubit에서 관리하는 상태(state)의 타입입니다.builder
: 상태 변화에 따라 UI를 어떻게 빌드할 것인지 정의하는 함수입니다. 이 함수는context
와state
를 매개변수로 받습니다.
특징
- 반응형 프로그래밍:
BlocBuilder
는 Bloc 또는 Cubit의 상태가 변경될 때마다builder
함수를 호출하여 UI를 재구성합니다. - 상태 분리: UI를 상태 변화에 따라 업데이트하는 로직을 분리하여, 각 위젯이 상태 관리 로직에 직접적으로 의존하지 않게 합니다.
- 효율적인 렌더링: Bloc 또는 Cubit의 상태가 실제로 변경되었을 때만 위젯 트리를 다시 빌드합니다.
주의 사항
BlocBuilder
는 상태 변화에만 반응합니다. 사용자의 인터랙션과 같은 이벤트 처리는BlocListener
또는BlocConsumer
를 사용할 수 있습니다.- Bloc 패턴을 사용하기 위해서는
flutter_bloc
패키지를 의존성에 추가하고, 적절한 Bloc 또는 Cubit을 구현해야 합니다.
buildWhen
buildWhen
은 Flutter에서 Bloc 또는 Cubit 패턴을 사용할 때, 특정 조건에서만 위젯을 재구성(rebuild)하도록 설정하는 함수입니다. 주로 BlocBuilder
또는 BlocConsumer
와 함께 사용되며, 모든 상태 변화에 대해 UI를 재구성하는 대신, 특정 조건을 만족할 때만 UI를 업데이트합니다.
사용 방법
buildWhen
함수는 이전 상태와 현재 상태를 매개변수로 받고, 위젯이 재구성될 조건을 반환하는 부울 식을 정의합니다.
BlocBuilder<BlocType, BlocState>(
builder: (context, state) {
// UI 구성
},
buildWhen: (previousState, currentState) {
// 위젯이 재구성될 조건
return true or false;
},
)
BlocType
: 감시하고자 하는 Bloc 또는 Cubit의 타입입니다.BlocState
: 해당 Bloc 또는 Cubit의 상태 타입입니다.builder
: 상태 변화에 따라 UI를 어떻게 빌드할 것인지 정의하는 함수입니다.buildWhen
: 위젯이 재구성될 조건을 정의하는 함수입니다.
예시
BlocBuilder<CounterBloc, CounterState>(
builder: (context, state) {
return Text('Count: ${state.count}');
},
buildWhen: (previousState, currentState) {
// 카운트 값이 변경되었을 때만 위젯 재구성
return previousState.count != currentState.count;
},
)
이 예시에서 buildWhen
은 카운트 값이 변경될 때만 Text
위젯을 재구성하도록 조건을 설정합니다.
주의 사항
buildWhen
을 사용할 때는 위젯이 재구성될 정확한 조건을 명확하게 정의해야 합니다.- 모든 상태 변화에 대해 UI를 재구성하고 싶지 않을 때
buildWhen
을 사용하면 효과적입니다. buildWhen
은 UI의 재구성을 결정하지만, 상태 변화에 따른 부수 효과는 처리하지 않습니다. 부수 효과 처리가 필요하다면BlocListener
또는BlocConsumer
의listenWhen
을 사용하세요.buildWhen
은flutter_bloc
패키지의 일부이므로, 이를 사용하기 위해서는 해당 패키지를 프로젝트에 추가해야 합니다.