using multi bloc builder for one cubit (bloc)

Question

i have a cubit that has more than 2 lists, as follows

class HomeCubit extends Cubit<HomeState> {
  final HomeRepository homeRepository;

  HomeCubit(
    this.homeRepository,
  ) : super(HomeInitial());

  List<SubCatModal> mySubCat = [];
  List<SubCatModal> subCat() {
    emit(HomeLoaded());
    homeRepository.getSubCatRepository().then((respone) {
      emit(HomeSubCatSuccessCase(subCatList: respone));
      mySubCat = respone;
    });
    return mySubCat;
  }

  List<FirstSlideModal> myFirstSlider = [];
  List<FirstSlideModal> sliderListCubit() {
    emit(HomeLoaded());
    homeRepository.getFirstSliderRepository().then((respone) {
      try {
        emit(HomeFirstSliderSuccessCase(firstSliderList: respone));
      } catch (e) {
        emit(HomeErrorCase(message: respone));
      }
      myFirstSlider = respone;
    });
    return myFirstSlider;
  }
}

and in the app route, I use the following

case Routes.homeScreen:
        return MaterialPageRoute(
          builder: (_) => BlocProvider(
            create: (BuildContext context) =>
                HomeCubit(HomeRepository(homeApi: HomeApi())),
            child: const Homepage(),
          ),
        );

and I call the cubit by using

  void initState() {
    super.initState();
    var subCubit = BlocProvider.of<HomeCubit>(context).subCat();
  }

so how can I build a multi bloc builder for each myFirstSlider and subCat in the UI through one cubit

Answer 1

short answer - no way. you don't need multi bloc builder. moreover, if you thinking this way then there is something you don't get clear enough.

anyway, you shouldn't hold lists in cubit. they should be in state, that should be equatable or freezed e.g.:

class HomeState extends Equatable {
  const HomeState({
    this.isLoading = false,
    this.mySubCat = const [],
    this.myFirstSlider = const [],
  });

  final bool isLoading;
  final List<SubCatModal> mySubCat;
  final List<FirstSlideModal> myFirstSlider;

  @override
  List<Object?> get props => [isLoading, mySubCat, myFirstSlider];

  HomeState copyWith({
    bool? isLoading,
    List<SubCatModal>? mySubCat,
    List<FirstSlideModal>? myFirstSlider,
  }) =>
      HomeState(
        isLoading: isLoading ?? this.isLoading,
        mySubCat: mySubCat ?? this.mySubCat,
        myFirstSlider: myFirstSlider ?? this.myFirstSlider,
      );
}

You can pass repos to your cubit:

class HomeCubit extends Cubit<HomeState> {
   const HomeCubit({
     required this.homeRepository,
     required this.profileRepository,
     required this.whateverYouNeedRepository
   });

   final HomeRepository homeRepository;
   final ProfileRepository profileRepository;
   final WhateverYouNeedRepository whateverYouNeedRepository;
...
   void subCat() {
     emit(state.copyWith(isLoading: true));
     homeRepository.getSubCatRepository().then((respone) {
      emit(
       state.copyWith(
              subCatList: respone, isLoading: false,
       ),
      );
     });
}

one more potential problem here that you create your cubit in router. more clear:

...
case Routes.homeScreen:
        return MaterialPageRoute(
          builder: (_) =>  const Homepage(),
          ),
        );

where Homepage is:

class HomePage extends StatelessWidget {
  const HomePage({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => 
        HomeCubit(HomeRepository(homeApi: 
          HomeApi()))
            ..subCat()
            ..subCat() ,
      child: const HomeView(),
    );
  }
}

then you use BlocBulder for whole screen or just for one widget, that need this data:

class HomeView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        BlocBuilder<HomeCubit, HomeState>(
          builder: (context, homeState) {
            return Container(
            .. get data from state that you need
            );
          },
        ),
        //widget1,
        //widget2,
        //...
        BlocBuilder<HomeCubit, HomeState>(
          builder: (context, homeState) {
            return Container(
            .. get data from state that you need
            );
          },
        )
      ],
    );
  }
}