Bloc: BlocBuilder vs BlocListener and navigation

[nhwilly]

I originally had a BlocBuilder building and returning different HomePage screens depending on state values. Worked great during the experimentation stage.

Now I'm starting to get deeper into the app and I'm wondering if I should be using a BlocListenerTree to catch those states, since they all result in navigation.

If I do that, what would my child object be for the tree? A splash page?

If I'm using flutter_bloc to control navigation and menus, are BlocListeners better than BlocBuilders?

I know it's a vague question, but in general.

[felangel]

Hi @nhwilly 👋
Thanks for opening an issue!

It all depends on if you route-based navigation (where you push routes onto the navigation stack and have routing animations etc...). If you don't care about that, then using BlocBuilder to return different widgets is totally fine.

If you do, however, decide that you want to refactor your app to use route-based navigation, then I would highly recommend using BlocListener or BlocListenerTree to handle the navigation when it needs to occur as a result of a state change.

When using BlocListener or BlocListenerTree your child can be any other widget. They don't have an impact on the UI and are simply a listener.

In general, I would say BlocBuilder should only be used to return different widgets in response to different bloc states whereas BlocListener should be used if you want to "do things" in response to state changes. If you haven't already, I highly recommend checking out the Show Snackbar Recipe as well as the Navigation Recipe.

Hope that helps and great questions! 👍

[Virendra-Varma]

Hi @felangel I am Developing an Page in that page I have 6 widget and I have to fetch there data from server and update it, to achieve this I know only two ways 1. create different-different bloc for every API call(some where suggested by you only) 2. use one bloc but ignore whole page refreshing problem.
Is there have any other way by which I can solve this if yes please let us know if not then is there have any way by which we can use bloc listener inside the bloc builder what I am Planning to do here is build the whole UI by listening the initial state or any particular condition after that just listen Api call using bloc listener and update the particular widget.

[felangel]

Hi @Virendra-Varma 👋

I would recommend having a single API Client (assuming the 6 APIs are all part of a single backend system). Then if all 6 requests are needed for a single feature I would expose a single method in a repository which makes all 6 requests and aggregates them into a domain model. With that setup you only need a single feature bloc (since we made the assumption that this is all 1 feature), and that bloc simple manages fetching data from the single method in the repository (with loading/success/error states).

In general, only the lowest layer (data layer) should be built with API calls in mind. Every other layer should generally be driven by the business/feature requirements.