Flutter Bloc (Cubit) Managing Multiple Different States on One Page

Question

How to follow the path for multiple states on a screen in bloc(cubit) state management with Flutter?

First widget on my home screen is DropdownButton for cities, second Widget is CarouselSlider for announcements. Should I create a separate Cubit file for each state management or is it a unifying filename like HomeCubit?

When I create a unifying HomeCubit and wrap individual BlocBuilder<HomeCubit, HomeState> widgets, does setState() reload all the space?

Do I create CityCubit, CityState, AnnouncementCubit, AnnouncementState for a field whose only int index number will change?

Example Widget

BlocBuilder<HomeCubit, HomeState>(
                          builder: (context, state) {
                            return CarouselSlider(
                              items: announcements,
                              carouselController: carouselController,
                              options: CarouselOptions(
                                  viewportFraction: 1,
                                  enlargeCenterPage: false,
                                  onPageChanged: (index, reason) {
                                    selectedAnnouncements = index;
                                    context.read<HomeCubit>().changeCarouselIndicatorChanged(selectedAnnouncements);
                                  }),
                            );
                          }
                        ),

Answer 1

Changing the state of a bloc will rebuild any widget built with that bloc (inside the BlocBuilder). The best practice is having a bloc for every feature. When it comes to general data for different drop-downs, you should use different blocs/bloc. I assume the user chooses a city, then different announcements appear based on that city. I would recommend having a separate bloc for the announcements.