BLoC의 구조<1>

이거에 대해서 쓰신분들은 무진장 많은데 나같은 이해 잘 못하는 사람들을 위해서 쉽게 쓰신분들은 거의 없다... 거의 다들 밥아저씨
그래서 쉽게 설명해주는곳 없을까나 하다가 찾은 참고하기 좋은 코드
https://github.com/VGVentures/slide_puzzle
어떤식으로 구현했는지 하나하나 파헤쳐보려고한다

부트스트랩? 부트스트랩!

해당코드를 보면 bootstrap이나온다.. 웹에서 넘어와서그런지 이게 왜 튀어나오나했다. 하지만 여기서 말하는 부트스트랩은 그게아니라

부트스트랩(Bootstrap)이란, 일반적으로 한 번 시작되면 알아서 진행되는 일련의 과정을 뜻한다.

라는뜻! 일종에 처음시작할때 실행되는 코드라고 생각하면된다.

class AppBlocObserver extends BlocObserver {
  @override
  void onError(BlocBase bloc, Object error, StackTrace stackTrace) {
    super.onError(bloc, error, stackTrace);
    log('error: ${bloc.runtimeType},$stackTrace. $error');
  }

  @override
  void onChange(BlocBase bloc, Change change) {
    super.onChange(bloc, change);
    if (bloc is Cubic) log(change.toString());
  }

  @override
  void onTransition(Bloc bloc, Transition transition) {
    super.onTransition(bloc, transition);
    log(transition.toString());
  }
}

에러와 트렌지션 체인지부분에서 로그를 남길수있도록해주는 코드 삽입 먼가 자바에서의 aop같은게 연상이 되어진다. navigator 로 변경이 되어질대라던가 bloc에서의 상태가 변경되어질때 해당코드가 실행되며 여러모로 디버깅에 편리해진다.

void main() {
  BlocOverrides.runZoned(() => runApp(const BlocTest()),
      blocObserver: AppBlocObserver());
}

class BlocTest extends StatelessWidget {
  const BlocTest({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Splash(),
      ),
    );
  }
}

이렇게 runZoned 로 runApp을 시킨다면 해당 앱에서의 bloc의 변화를 추적할수있다.

boilerplate code......... 쓰고또쓰고

boilerplate code는 기본적으로 써야하는 코드이다. 기본적으로 동작하기위해서 써야하는 코드들인데 일단 bloc에서 필요한 코드들을 보자

-위젯폴더
ㄴbloc
--ㄴ 위젯_bloc.dart
--ㄴ 위젯_state.dart
--ㄴ 위젯_event.dart
ㄴview
--ㄴ 위젯_view.dart
ㄴwidget
--ㄴ 기타내부 위젯.dart
ㄴ위젯.dart

이걸 하나를 해야지 페이지 한개이다. 물론꼭이렇게 쓰라는건 아니지만, 다들 알만한 곳에서 이렇게 사용하고있다면그이유가 있지않을까?
그리고 이렇게 쓰다보면 깨끝하게 정리되어있는 코드를 볼수는 있다. 문제는 폴더가 무진장많지만.

그럼 하나하나 봐보자

위젯.dart 기타내부 위젯.dart

이부분은 간단하다 기타내부위젯에서 사용되는 간단한 상태정도는 stateful위젯을 사용해도 무관하고 위젯.dart는 해당 폴더 내부에 아이들을 export를 묶어주는 역활이다.

대략적으로 아래와 같다.

export './bloc/widget_bloc.dart
export './view/widget_view.dart
...
...

이렇게 코드없이 그냥 export만 해주는 파일이다.

위젯_view.dart

여기도 매우간단하지만 한가지 알아둬야할게있다
해당 위젯에서만 사용되는 bloc일경우
해당코드는 간단하게만적겠다.. 세부내용은 위에 깃허브에서도 나온다.

stless 위젯=>return BlocProvider(child:위젯_view,create:위젯bloc)....

stless 위젯_view => return 해당 위젯의 뷰

이런식으로 사용하면 된다.

나머지는 다음에 ㅋㅋ 고럼이만