Bloc: Using Bloc that depended on state of other Bloc in Bloc Builder

[burcus]

Hi,
My issue is very similar to #182.

I'm trying to understand BloC patterns purpose and implement it correctly. So I'm developing a weather app which is my first Bloc example.
I have an WeatherBloc and LocalizationBloc. My LocalizationBloc has events for getting device location. I have a bloc builder for home screen.
When app started I'm checking user location service permission (with LocalizationBloc's CheckPermission event). If user permissioned my localization bloc returns always state (it has some other states). In my bloc builder if state is always then I add getLocation event to LocalizationBloc for getting city name. And if I can get city as result of GetLocation event, my state becomes LocationSucceed.

Also my weather Bloc gets weather informations of a city which given as GetWeatherInfo events city field.

So in my home screen if my Localization Blocs state is Location Succeed then I'm using my Weather Bloc. I want to handle my weather bloc's state in same bloc builder. I can use it for add an event but I can't listen Weather Bloc's State. (cause Bloc Builders cubit accept one bloc). I'm trying to make approach that similar to below. It seems to me it's a bad practice and not clean.

LoadedState is WeatherBloc's state which I expect return after running _weatherBloc.add(GetWeatherInfo(state.city));
Other states are from LocationBloc.

    final _locationBloc = BlocProvider.of<LocalizationBloc>(context);
    final _weatherBloc = BlocProvider.of<WeatherBloc>(context);

    return Scaffold(
      body: BlocBuilder(
        cubit: _locationBloc,
        builder: (context, state) {
          if(state is LocationInitialState) _locationBloc.add(CheckPermission());
          if(state is Always) _locationBloc.add(GetLocation());
          if(state is LocationFailed) return SearchScreen();
          if(state is LocationSucceed) _weatherBloc.add(GetWeatherInfo(state.city));
          if(state is LoadedState) return PresentScreen(state.weather);
          return CircularProgressIndicator();
        },
      ),
    );

I hope my question and problem sounds clear. So in a nutshell how can I listen multi Bloc's state in the same builder? Or how can I change my Home Screen view according to Bloc's state without showing progress indicator? Also I'm open to suggestions to approach.

[narcodico]

Hi @burcus 👋

Have you checked out the existing weather example ?

If you need to build widgets based on 2 different blocs you can always nest 2 bloc builders.
Don't think you need it in your case since you can just use a BlocListener and when location state is LocationSucceed navigate to your weather screen. You can provide your weather bloc there and immediately add the GetWeatherInfo event to it.

As a side note, you should avoid adding events inside a BlocBuilder since that could be rebuilt multiple times resulting in unwanted events being added to your bloc. Always use a BlocListener if you need to fire events in response to state changes.
If you both need a BlocListener and BlocBuilder then you can make use of BlocConsumer which brings those 2 widgets together.

Hope that helps you 👍

[burcus]

Hi @RollyPeres

Yes, I checked and viewed this example. It helped me e.g, undestanding bloc observer usage. But I'm trying to create my own app structure for really understand this pattern.

Actually I don't need build widget for LocalizationBloc even I'm trying to avoid create build widget for using it. I'm using this Bloc for only understand whether I have device location information or not. If I have user's city information I want to navigate PresentScreen which presents weather informations by using WeatherBlocs state. But if I don't have I want to show SearchScreen which gets city information from user. Maybe I don't even need to use LocalizationBloc cause I don't need reaction from UI. This is one of the cases that confuses me.

Also thanks for your answer it's so helpful and explanatory. I'll try to implement BlocConsumer instead of BlocBuilder. I got its use case thanks to you :pray:

[narcodico]

Glad you found my insights helpful ✌

Well there are multiple approaches to this and it comes down to where you want your weather bloc to be provided. You can have it on home screen or even better on your present screen only. This is usually decided by how your UI will look like and what kind of interactions your user will have.

Maybe I don't even need to use LocalizationBloc cause I don't need reaction from UI. This is one of the cases that confuses me.

Your approach to get user's location through a bloc is correct, even though you don't need to build UI from it's state. What you definitely need is to use a BlocListener and navigate to proper screens based on your location state.

If you still encounter issues or you don't really grasp the concepts feel free to join our discord and message me(Rolly). We can set up a quick call or something to discuss your concerns in a more efficient way.

[burcus]

Thanks for your help. I'll try to use BlocListener and BlocConsumer. Also thanks for your inviting. If I'm confused and can't solve this issue I'll message to you.

[felangel]

Thanks so much for taking the time to answer @RollyPeres! 💯 🙏

@burcus closing this for now but feel free to comment with any additional questions or as @RollyPeres mentioned join us on discord 😄