Utilizing cubits for state administration

Alright so I am making a revamp of my AiStickerMaker app and I’ve a performance the place you choose a picture from the gallery or the digital camera and a SliverAppBar widget will replace with that picture.

For this i used to be utilizing a singleton to handle the state and passing that round, however as you possibly can guess it wasn’t a fantastic choice, it seems altering the information within the singleton wasn’t updating the state of the kid widget.

So I made a decision to present blocs/cubits a shot, a determined this as a substitute of supplier as a result of I believed that in the long term can be a greater choice.

Let’s first see the implementation of the cubit I used, for what I gathered a cubit is a straightforward type of a bloc because it extends BlocBase, nevertheless it solely holds one kind of knowledge, this generally is a complicated class with a number of fields or only a String.

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

First we create the cubit class extending cubit and declaring that it holds a String?

1. We name the tremendous of the category; with this we set the preliminary state
2. This one is the perform that updates the state with the chosen picture, right here we name the pickImage perform and with the end result we name emit to replace the worth of the cubit
3. A perform to reset the state
4. Then with this we will debug the change of state.

Alright superior proper? now we have a cubit now what?
Nicely we have to present this bloc in the suitable locations, and use a shopper to take heed to the bloc.

MaterialApp( //...
residence: MultiBlocProvider(suppliers: [
        BlocProvider(
          create: (context) => ImageSelectedCubit(),
        ),
      ], baby: const HomePage()),
);

Now one of the best ways I noticed how to do that is to wrap the house within the MateralApp widget with a MultiBlocProvider, then we will state all of our suppliers within this widget and use them inside any kids that follows this context.

Let’s examine find out how to truly use it and replace a widget
For this we have to use the BlocConsumer widget, as mentioned earlier than a cubit is only a less complicated Bloc so we will use any Bloc widget with it.

BlocConsumer<ImageSelectedCubit, String?>(
  listener: (context, state) {
    remaining imgCubit = context.learn<ImageSelectedCubit>();
    if (state == null) {
      showSnack('Error!', context);
      imgCubit.resetImage();
    }
  },
  builder: (context, state) {
    remaining imgCubit = context.learn<ImageSelectedCubit>();
    return Picture(picture: FileImage(File(imgCubit.state!)));
})

Right here we create a BlocConsumer with the kind of the cubit that we would like and the kind of knowledge it holds right here <ImageSelectedCubit, String?>
Then that is non-obligatory however we will do knowledge validation earlier than we construct the widget, right here we test if the picture chosen is null and we reset the worth to an empty string.

Now within the builder perform we will entry the occasion of the cubit utilizing context.learn<T>() ( T is the category of your cubit ) then studying .state we entry the worth of the cubit.

And that is it, I actually preferred the simplicity of cubits, however I am positive I will be diving deeper into Blocs for the remainder of the app, if you wish to comply with the event take a look at de YT vid! 😁