Bloc: back Navigation

[vepak]

Hi Felix, Thank you for the awesome library and examples.

I've followed your login and infinite list examples and combined both the flows.

Here is the flow: Splash Screen -> Landing for Sign up/Login -> Login -> Infinite List

In the landing for Signup/ Login page, if the user clicks the login button, we're showing login page by using events.

My question is how can we have the back button on the tab bar so that the user can go back to landing for signup/login page if the user wants to signup?

Here is the code for your reference, please suggest if I'm doing anything wrong as well.
https://github.com/vepak/login_infinite_list_flutter

Thank you,
Vamsi.

[abinvp]

This is because you are not pushing anything to the navigation stack instead, handling the state right from the MaterialApp. To achieve the result you need, just use Navigator to Login/SignUp pages so that the back button will show up automatically. Hope that helps.

[felangel]

Hi @vepak 👋
Thanks for opening an issue!

Like @abinvp mentioned, if you want to have a navigation stack with a back button that pops off the stack you just need to use Navigator.push instead of returning a different screen based on the AuthenticationState. Hope that helps 👍

[vepak]

Thank you @abinvp @felangel for guidance, I tried doing this based on the state instead of returning screen.

          Navigator.push(context, MaterialPageRoute(builder: (context) => LoginPage(userRepository: _userRepository)));

I got the following error. Do I need to do anything differently? Thank you for your time.

setState() or markNeedsBuild() called during build.
I/flutter (20465): This Overlay widget cannot be marked as needing to build because the framework is already in the
I/flutter (20465): process of building widgets. A widget can be marked as needing to be built during the build phase
I/flutter (20465): only if one of its ancestors is currently building. This exception is allowed because the framework
I/flutter (20465): builds parent widgets before children, which means a dirty descendant will always be built.
I/flutter (20465): Otherwise, the framework might not visit this widget during this build phase.

[felangel]

You should use BlocListener for navigation in response to state changes. Check out the SnackBar Recipe for an example. 👍

[vepak]

Thank you! Will try and let you know. Once again really appreciate your time & efforts in great documentation. 👍

[felangel]

No problem! Closing for now but feel free to respond with additional comments and I'm happy to continue the conversation 👍

[vepak]

Hi @felangel, I've tried using BlocListener, now I could see navigation to a page with the back arrow button, but its behaving strangely.

Here is the code, https://github.com/vepak/login_infinite_list_flutter/blob/master/lib/providers/app_start.dart

I see a flash of error "A build function returned null." before rendering login page and when I hit back arrow, I see the error

A build function returned null.
I/flutter (29748): The offending widget is: BlocBuilder
I/flutter (29748): Build functions must never return null. To return an empty space that causes the building widget to
I/flutter (29748): fill available room, return "new Container()". To return an empty space that takes as little room as
I/flutter (29748): possible, return "new Container(width: 0.0, height: 0.0)".

[abinvp]

@vepak, this is because you have a state in the app that doesn't return anything from the builder. Either make sure to handle all the states or try to return an empty Container() as default. This will fix the issue.

              if (state is AuthenticationUninitialized) {
                return SplashPage();
              }
              if (state is AuthenticationAuthenticated) {
                return PropertiesPage();
              }
              if (state is AuthenticationUnauthenticated) {
                return AuthenticationLandingPage();
              }
              if (state is AuthenticationLoading) {
                return BottomLoader();
              }
              if (state is AuthenticationSignup) {
                return AuthenticationLandingPage();
              }
              if (state is AuthenticationDemo) {
                return PropertiesPage();
              }


              return Container();

The builder should always return a widget.

[vepak]

Thank you @abinvp for your suggestion. I tried returning Container() and theoretically, it works without error, but the blank screen (container) is shown when I hit the back button.

I logged the state to understand the flow, when I press the back button in the login screen, the state which is used to do navigate to the login page in the listener is printed i.e. "AuthenticationLogin". Also, when I click the login button it doesn't do anything, but other buttons work. Strange!

I had to override the back button so that it dispatched the correct state. I feel like it's a workaround instead of smooth behavior. Please correct me if I'm wrong.

Here is the complete code for your reference.

https://github.com/vepak/login_infinite_list_flutter

[felangel]

@vepak I took a look at your code and I my recommendation is not to use BlocListener for navigation unless you need to navigate in response to a state change. If you are just navigating in response to a user pressing a button you don't need to use BlocListener and you can just use Navigator.of(context).push(...) in the onPressed. Hope that helps 👍

[vepak]

@felangel @abinvp Thank you guys for your time and suggestions.

[ShubhraDeshpande]

Hi, I do not wish to route using stack and Navigator push, instead, I am dispatching the class every time BlocListener listens to the event. Do we have any method that works opposite to dispatch (which would lead to previous page) because I needed the previous page to be in the same state?

[felangel]

Hey @ShubhraDeshpande 👋

In that case, I would recommend having a bloc to maintain the state of the previous page and a separate bloc to maintain the state of the current page. That way when you do Navigator.of(context).pop() the previous page will be in the same state.

Hope that helps 👍

[prasant10050]

I have four screens, in the first screen I move one screen to second screen with icon button which has added in App bar.The second screen also opens a simpledialog where two options are available, the first option is to go to the third screen and second option for fourth screen. Simple DialogBox has also open by Icon button of app bar from second screen .When I go to the third screen and come back to the second screen and want to open the dialog by pressing the add button again, it does not open.Can you give me an example for this so that I can give a good state management using it in my production app? It's urgent

[felangel]

@prasant10050 it doesn't sound like you need bloc for the experience you're describing. There is no business logic in that flow so you can just use the Navigator in the onPressed callbacks to accomplish the flow.