상태 관리를 위한 큐빗 사용에 대한 간단한 개요

좋습니다. 저는 AiStickerMaker 앱을 개편하고 갤러리나 카메라에서 이미지를 선택하고 SliverAppBar 위젯이 해당 이미지로 업데이트되는 기능이 있습니다.

이를 위해 상태를 관리하고 전달하기 위해 싱글톤을 사용했지만 좋은 옵션이 아니었음을 짐작할 수 있듯이 싱글톤의 데이터를 변경해도 자식 위젯의 상태가 업데이트되지 않는 것으로 나타났습니다.

그래서 나는 blocs/cubits에게 기회를 주기로 결정했고 장기적으로 더 나은 선택이 될 것이라고 생각했기 때문에 공급자 대신 이것을 결정했습니다.

먼저 제가 사용한 큐빗의 구현을 살펴보겠습니다. 제가 큐빗을 모은 것은 확장되는 블록의 단순한 형태이지만BlocBase 한 가지 유형의 데이터만 보유하고 있습니다. 이것은 여러 필드가 있는 복잡한 클래스일 수도 있고 그냥 String .

class ImageSelectedCubit extends Cubit<String?> {
  // 1
  ImageSelectedCubit() : super('');
  // 2
  void getNewImage(ImageSource fileSource) async {
    final ImagePicker picker = ImagePicker();
    final XFile? pickedFile = await picker.pickImage(source: fileSource);
    emit(pickedFile?.path);
  }
  // 3
  void resetImage() {
    emit('');
  }
  // 4
  @override
  void onChange(Change<String?> change) {
    super.onChange(change);
    debugPrint(change.currentState);
    debugPrint(change.nextState);
  }
}

먼저 큐빗을 확장하고 큐빗을 보유한다고 선언하는 큐빗 클래스를 생성합니다String?.

클래스의 수퍼를 호출합니다. 이를 통해 초기 상태를 설정합니다

.

이것은 선택한 이미지로 상태를 업데이트하는 함수입니다. 여기서는 pickImage 함수를 호출하고 결과로 방출을 호출하여 큐빗 값을 업데이트합니다

.

상태를 재설정하는 기능

그러면 이를 통해 상태 변경을 디버깅할 수 있습니다.

좋아요 굉장하죠? 우리는 이제 큐빗이 무엇입니까?
우리는 올바른 장소에 이 블록을 제공하고 소비자를 사용하여 블록을 들어야 합니다.

MaterialApp( //...
home: MultiBlocProvider(providers: [
        BlocProvider(
          create: (context) => ImageSelectedCubit(),
        ),
      ], child: const HomePage()),
);

이제 이 작업을 수행하는 가장 좋은 방법은 MateralApp 위젯의 홈을 MultiBlocProvider 로 래핑하는 것입니다. 그런 다음 이 위젯 내부의 모든 공급자를 명시하고 이 컨텍스트를 따르는 자식 내부에서 사용할 수 있습니다.

실제로 사용하는 방법과 위젯을 업데이트하는 방법을 알아보겠습니다.
이를 위해 우리는 BlocConsumer 위젯을 사용해야 합니다. 앞에서 말했듯이 큐빗은 더 단순한 블록이므로 모든 블록 위젯을 사용할 수 있습니다.

BlocConsumer<ImageSelectedCubit, String?>(
  listener: (context, state) {
    final imgCubit = context.read<ImageSelectedCubit>();
    if (state == null) {
      showSnack('Error!', context);
      imgCubit.resetImage();
    }
  },
  builder: (context, state) {
    final imgCubit = context.read<ImageSelectedCubit>();
    return Image(image: FileImage(File(imgCubit.state!)));
})

여기에서 우리가 원하는 큐빗 유형과 여기에 보유하고 있는 데이터 유형BlocConsumer으로 <ImageSelectedCubit, String?>를 생성합니다.
그런 다음 이것은 선택 사항이지만 위젯을 빌드하기 전에 데이터 유효성 검사를 수행할 수 있습니다. 여기서 선택한 이미지가 null인지 확인하고 값을 빈 문자열로 재설정합니다.

이제 빌더 함수에서 context.read<T>()(T는 큐빗의 클래스임)를 사용하여 큐빗의 인스턴스에 액세스한 다음 .state를 읽고 큐빗의 값에 액세스할 수 있습니다.

그게 다야, 나는 cubits의 단순함이 정말 마음에 들었지만 앱의 나머지 부분에 대해 Blocs에 대해 더 깊이 파고들 것이라고 확신합니다. 개발을 따르고 싶다면 YT 비디오를 확인하세요! 😁