처음에 Bloc패턴은 State 관리라고 해서, 값 저장해두고 Provider를 사용해 전역에서 사용하여 state를 구독하고있다가 변경사항이 생기면 업데이트 해주는줄알았다.
전역사용과 더불어 클래스의 확장(extends)을 통해 state의 타입을 정의할 수 있어서, 현재 이게 어떤 상태의 값이냐! 에 따라서 뷰를 다르게 보여주거나 액션을 취할 수 있다.
Bloc패턴, 이게맞나?
Business Logic Component
나는 blocs라는 폴더 내에, 담당하는 부분에 따라 나눠 주었다.
- loading Bloc
로딩중에는 다른 액션이나 작업을 하지 못하도록 Stack과 AbsorbPointer를 사용한 로딩 레이어를 최상단에 씌워주는 형식으로 bloc을 사용해 전역에서 토글식으로 사용하였다. - embed
임베딩 내에서도 파일, 셋팅, 진행, 결과 등... 각각의 컴포넌트에서 필요한 부분만 가져다 쓰기 위하여 담당에 따라 분리해주었다. (다른 페이지에서의 공용 사용을 위한 확장을 위해서라도!)
- file Bloc
- setting Bloc : 유저의 입력을 받거나, 기존 정의된 값들을 json파일을 repository를 통해 초기값으로 가져온다.
- inProgress Bloc: 실행 중단시 데이터 동기화를 위해 필요했다.
- result Bloc : state가 initial인지 change 인지에 따라 결과창을 보여주도록 하였다. (작업하다 알게되었다보니 다른 부분도 이 형식으로 리팩토링중..)
. - page Bloc
원래는 결과페이지도 별도의 페이지이동 형식으로 작업하려 페이지index를 전역사용하려 하였으나, navigator에는 표시하고싶지 않아 각 페이지에서 레이어로 사용하였고 로그인페이지처럼 nav에는 없지만 추가 페이지가 생길 예정이라 전역으로 유지
BlocBuilder<ResultBloc, ResultState>(
builder: (resultContext, resultState) {
if (resultState is ResultChange) {
return ...
}
},)이게 효율적인 방법인지는 솔직히 플러터 입문한지 한달에 첫 프로젝트의 첫 Bloc패턴이라 이래저래 찾아가며 더 나은 플로우를 위하여 작업과 리팩토링을 동시에 하고있는 상황이다.
페이지에서 초기값 셋팅
각 페이지에 접근할 때 마다 모든 값을 초기화 해야한다.
초기화 되어야 하는 Bloc들은 provider를 각 페이지 내에서 사용하며, create 시 initial과 repository를 주입시켜 주어 초기값으로 유지할 수 있도록 해주었다.
MultiBlocProvider(
providers: [
BlocProvider<FileBloc>(
create: (_) => FileBloc(FileRepository()),
... 다른 Bloc,
]
)BlocBuild는 쪼개놓은 컴포넌트 내에서 필요에 따라 불러서 사용하였다.
BlocProvider로 감싸준 하위 위젯에서 BlocState 사용법
BlocBuilder
state 변경에 따른 UI 업데이트가 필요할 때 사용
BlocBuilder<MyBloc,MyState>(
builder: (context, state) {
....
}
)state가 0이었는데 + 버튼을 눌러 state가 1이 되었다.
UI에서 1로 변경이 되어야 한다.
context.read
이벤트를 가져오거나, state를 변경하지만 UI는 변경하지 않을 때
final myState = context.read<MyBloc>().state;실시간으로 변경되는 값을 감지하지는 못하지만, 값을 변경해두었다가 사용가능하다.
나의 경우는 탭을 선택하면 탭에 해당하는 값을 저장해두었다가, 해당 값을 사용해야 하는부분에서 불러서 사용했다.
이또한 나~중에보면 냄새나는 코드일지언정!
기능 한개씩 할때마다 쾌감있는 도장뽀개기 느낌이랄까...
얼마만에 느끼는것인지
기존 웹 작업하는것과 큰 차이가 없는듯 하면서도 성장 기회가 부족했던 찰나에 공부할게 많아서 다시 커브가 올라가는 느낌이 들어 지금은 나름 뿌듯하다.
reference
https://gr-st-dev.tistory.com/2895#google_vignette
https://blog.arong.info/flutter/2023/01/10/Flutter-BLoC-%ED%8C%A8%ED%84%B4-1.html
공부하며 정리&기록하는 ._. 씅로그
