Bloc: Logout issue while using flutter bloc

[karthikeyanp307]

Describe the bug
I am using the flutter_login example. For my application, the login and logout works fine with login screen and home screen. When I redirect to new screen from home screen and tried logout, although the event and state changes occur application is not getting logout properly.

To Reproduce
Steps to reproduce the behavior:

1. Go to login screen
2. Login into the application
3. From home screen, navigate to another page via Navigator.pushReplacementNamed(context, '/page_name')
4. Click on logout in the navigation menu from this screen
5. Bloc events and state are called properly but the app is not getting redirected to the login screen.

Expected behavior
Application needs to logout from any another screens after login.

Screenshots
If applicable, add screenshots to help explain your problem.

*Logs *
flutter doctor -v
[✓] Flutter (Channel stable, v1.17.0, on Mac OS X 10.15.4 19E287, locale en-GB)
• Flutter version 1.17.0 at /Applications/Flutter/flutter
• Framework revision e6b34c2b5c (12 days ago), 2020-05-02 11:39:18 -0700
• Engine revision 540786dd51
• Dart version 2.8.1

[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
• Android SDK at /Users/kpitchai/Library/Android/sdk
• Platform android-29, build-tools 28.0.3
• Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b4-5784211)
• All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.3.1)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Xcode 11.3.1, Build version 11C504
• CocoaPods version 1.9.1

[✓] Android Studio (version 3.6)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin version 45.1.1
• Dart plugin version 192.7761
• Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b4-5784211)

[✓] VS Code (version 1.44.2)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.9.1

[✓] Connected device (1 available)
• iPhone 11 • A7572DAB-CC54-4A89-8855-AAAFEE8CCB6D • ios • com.apple.CoreSimulator.SimRuntime.iOS-13-3 (simulator)

• No issues found!

Additional context
Based on my understanding, the authentication bloc belongs to home screen and when replaced with another new screen the authentication bloc is not available due to which the redirection is not happening. I tried loading states for different screens from home screen. But this as well does not work as I have bloc created for home screen as well. Please help me in resolving this.

[felangel]

Hi @karthikeyanp307 👋
Thanks for opening an issue!

This is likely because you are using pushReplacementNamed which is unmounting the BlocListener or BlocBuilder which is responsible for navigating. Check out https://github.com/felangel/bloc/issues/286 and let me know if that helps 👍

[karthikeyanp307]

Hi @felangel ,

Thanks very much for your reply. Gone through the reference link. With this do you mean to say to either use direct navigation as in https://bloclibrary.dev/#/recipesflutternavigation or use Navigator.push() instead of Navigator.pushReplacementNamed(). With the latter, do we want to pop the screens back to home always before redirecting to the next screen in navigation menu or whether we can use Navigator.pushReplacementNamed() in the new screen and poping it only during logout.

Please guide me on this.

Thanks

[felangel]

@karthikeyanp307 you can just do:

Navigator.of(context).pushAndRemoveUntil(
  MyScreen.route(),
  (route) => false,
);

in your BlocListener. This will pop all other routes and push the new one on top without replacing the existing route. Let me know if that helps, otherwise please share a link to a sample app and I'm happy to open a PR with suggestions 👍

[karthikeyanp307]

Hi @felangel ,

Thanks again. At present I am using the below way of navigation in menu drawer,

new ListTile(
onTap: () {
Navigator.pushReplacementNamed(context, '/screen_route');
},
title: new Text("Screen_Name", style: AppTheme().menuList,)),

and for logout option I have the below code,

BlocProvider.of(context).add(LoggedOut());

Scenario - 1:

• Login into the application
• Home Screen Appears
• Logout using menu drawer

This works fine.

Scenario - 2:

• Login into the application
• Home Screen Appears
• Navigate to another screen (Screen 1) via menu drawer
• Screen 1 Appears
• Logout using menu drawer.

This calls the state and events. But login screen is not shown as we have pushed the Screen 1 top of Home Screen. With Navigation.pop() below BlocProvider.of(context).add(LoggedOut()); this is working fine.

Scenario - 3 (With pushAndRemoveUntil):

Used the below code in Scenario - 2 below BlocProvider.of(context).add(LoggedOut()),

Navigator.of(context).pushNamedAndRemoveUntil(
'/login',
(route) => false,
);

This redirects to login screen. But I am unable to login again. On login events and states are called, page redirection not happening. Help me on this.

Thanks.

[felangel]

Can you please share a link to the github repo so I can run/debug it locally?

[felangel]

Closing for now since I don't feel I have enough information to give guidance. Feel free to comment with a link to a sample app and I'm happy to take a look and give feedback/suggestions 👍

[karthikeyanp307]

Hi @felangel ,

By following the direct navigation as in https://bloclibrary.dev/#/recipesflutternavigation, I am able to make this work. Thanks very much for your support.

Thanks.