Bloc: Loader in BlocBuilder cleans the complete page

[snj07]

Thank you for this awesome library. I am facing some issues while using this library. When the state is RegistrationProcessing, I want to show the loader on the page itself rather than building the whole page again. I get the loader using listeners but it cleans the complete screen as now the state is RegistrationProcessing. Is it possible to show loader using listeners or should I put the loader in the registration page outside of BlocListener? Please let me know the best approach for it.

return BlocListener<RegistrationBloc, RegistrationBlocState>(
      listener: (context, state) {
        if (state is RegistrationFailure) {
          Scaffold.of(context).showSnackBar(
            SnackBar(
              content: Text('${state.error}'),
              backgroundColor: Colors.red,
            ),
          );
        } else if (state is RegistrationProcessing) {
          showLoadingDialog(context);
        }
      },
      child: BlocBuilder<RegistrationBloc, RegistrationBlocState>(
        builder: (context, state) {
          if (state is RegistrationWelcomePage) {
            return WelcomePage();
          } else if (state is RegistrationPageBlocState) {
            return AnimatedSwitcher(
              duration: Duration(milliseconds: 250),
              child: RegistrationPage(),
            );
          }
          return Container();
        },
      ),
    );

[felangel]

Hi @snj07 👋
Thanks for opening an issue and for the positive feedback!

Can you provide a link to a sample app which illustrates the issue you're having? I'm not sure I understand the question fully. What does showLoadingDialog do? If it's showing a dialog then it makes sense to have it in BlocListener because it's a side-effect. If you want to render different widgets in response to states, then you should use BlocBuilder. Hope that helps 👍

[snj07]

I am trying to navigate between screens using following code

 if (state is RegistrationWelcomePage) {
            return WelcomePage();
          } else if (state is RegistrationPageBlocState) {
            return AnimatedSwitcher(
              duration: Duration(milliseconds: 250),
              child: RegistrationPage(),
            );
          }

But when the state is RegistrationProcessing, I want to show a circular loader. But the state was also replacing the content. I fixed it by using putting one condition in BlocBuilder. Is there any better way of navigation between screens while sharing the BLOC between screens?

[felangel]

If your bloc can be showing the welcome page/registration page and be processing registration then you should add a registrationProcessing bool on the RegistrationState class rather than having a separate RegistrationProcessing state. Hope that helps 👍

[snj07]

Thank you so much for the response. Can you please help me with one more thing about the behavior of BlocListener. If I have two statements yield State1 and yield State2 in mapEventToState(), which are separated by a network call. Should the listener be invoked after the execution of yield State1? It's not getting invoked until mapEventToState() finishes its execution

[felangel]

@snj07 no problem! It should be triggered on each state change. Are you able to share a sample app which illustrates the issue you're having? Also check out the FAQs and see if that helps.

[snj07]

Thanks for all your help. I really appreciate it.