Bloc: Navigator issues while using bloc

Created on 5 Jun 2019  ·  3Comments  ·  Source: felangel/bloc

Hello,
I am using bloc code based on https://medium.com/flutter-community/flutter-login-tutorial-with-flutter-bloc-ea606ef701ad

For the most part the code works. I have a bottom navigation bar that has a default back button which is not working.

I realize that this issue is due to the fact that I need to add the screen via Navigator.push (of some sort), as there is nothing in the stack for it to pop.

I have tried several patterns

child: MaterialApp(
        home: BlocBuilder<DEvent, DState>(
          bloc: _dependentBloc,
          builder: (BuildContext context, DState state) {
            if (state is DIndividualState) {
              dynamic this_d = state.this_d;
              WidgetsBinding.instance.addPostFrameCallback((_){
               // No errors but does not navigate back
                Navigator.of(context).pushReplacement(MaterialPageRoute(builder: (context) =>
                    DScreen(this_d)));
                /*
                // No errors but does not navigate back
                Navigator.pushReplacement<Widget,Widget>(
                  context,
                  MaterialPageRoute<DScreen>(builder: (context) => DScreen(this_d)),
                );
                */

                /*
                // This goes into a infinite loop refreshing DScreen
                Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context) {
                  return DScreen(this_dependent);}));
                */
              });


               /*
              // Goes into an infinite loop. 
              Navigator.of(context).push(
                PageRouteBuilder(
                  pageBuilder: (_, __, ___) => DScreen(this_d),
                  transitionsBuilder:
                      (context, animation, secondaryAnimation, child) =>
                      FadeTransition(opacity: animation, child: child),
                ),
              );
              */
              return LoadingIndicator();

              //Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context) {return DependantScreen(this_dependent);}));



              //return DependantScreen(this_dependent);
            }

Apart from this, I have tried to dabble with BlocListener. I seem to get a error The method ‘BlocListener’ isn’t defined for the class ‘_MyAppState’

What is the right way to navigate between screens while using bloc?

Thanks,
Shekar

question

Most helpful comment

Ever since the BlocListener widget was added, it isn't recommended to handle navigation in a BlocBuilder. The main reason is to avoid having to create specific states for navigation which must be changed after being called once or else the builder will keep pushing new pages until a non-navigation state is set. Its also important to note that bloc isn't necessarily tied to navigation, you can still handle navigation as you would without using bloc (i.e. onTap () => Navigator.of(context).push()). But if you do need to trigger navigation directly from a state change, this is where a bloc listener comes into play. It will only fire once per state change so you don't have to worry about more and more pages being pushed every time the widget tree rebuilds. In my apps, I use a bloc listener to show the right content based on the user's authentication state (LoggedIn => show content, LoggedOut => show LoginScreen). But for all other means of navigating in the app, I use normal flutter functions to call the navigator like some button being pressed. Check out this example for a basic BlocListener implementation.

As for your error, all Bloc widgets use the same import, so just be sure your package is up-to-date and it should work if your BlocBuilder works.

All 3 comments

Ever since the BlocListener widget was added, it isn't recommended to handle navigation in a BlocBuilder. The main reason is to avoid having to create specific states for navigation which must be changed after being called once or else the builder will keep pushing new pages until a non-navigation state is set. Its also important to note that bloc isn't necessarily tied to navigation, you can still handle navigation as you would without using bloc (i.e. onTap () => Navigator.of(context).push()). But if you do need to trigger navigation directly from a state change, this is where a bloc listener comes into play. It will only fire once per state change so you don't have to worry about more and more pages being pushed every time the widget tree rebuilds. In my apps, I use a bloc listener to show the right content based on the user's authentication state (LoggedIn => show content, LoggedOut => show LoginScreen). But for all other means of navigating in the app, I use normal flutter functions to call the navigator like some button being pressed. Check out this example for a basic BlocListener implementation.

As for your error, all Bloc widgets use the same import, so just be sure your package is up-to-date and it should work if your BlocBuilder works.

Hi @ctippur 👋
Thanks for opening an issue!

Regarding your question, as @hawkinsjb1 mentioned, I would highly recommend updating your flutter_bloc version to the latest and using BlocListener. You can follow the Navigation Recipe. If after that you're still having trouble, please let me know and I'm more than happy to help! 👍

Felix/Ben,

Thanks for such a swift response. I will try implementing as suggested and
let you know.

Shekar

On Wed, Jun 5, 2019 at 5:48 PM Felix Angelov notifications@github.com
wrote:

Hi @ctippur https://github.com/ctippur 👋
Thanks for opening an issue!

Regarding your question, as @hawkinsjb1 https://github.com/hawkinsjb1
mentioned, I would highly recommend updating your flutter_bloc version to
the latest and using BlocListener. You can follow the Navigation Recipe
https://felangel.github.io/bloc/#/recipesflutternavigation. If after
that you're still having trouble, please let me know and I'm more than
happy to help! 👍


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/felangel/bloc/issues/334?email_source=notifications&email_token=AAQ7HFZJU52ZRXR6UILEMFDPZBNEZA5CNFSM4HUEBIQKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODXBNIKI#issuecomment-499307561,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAQ7HFYVAPCJA2ZX2HDTBJTPZBNEZANCNFSM4HUEBIQA
.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

clicksocial picture clicksocial  ·  3Comments

wheel1992 picture wheel1992  ·  3Comments

nhwilly picture nhwilly  ·  3Comments

RobPFarley picture RobPFarley  ·  3Comments

ricktotec picture ricktotec  ·  3Comments