Bloc: Event triggered, state changed, but screen doesn't update.

[alexanderevlos]

Hello everyone!

I would appreciate some assistance with a bug that's causing me nightmares. I apologize in advance just in case I did something wrong, I'm new to BLoCs.

The error is:
I have an Authentication BlocBuilder (followed the steps in the github example =P) and I finished all the steps to complete the login. When I am in the home (Authenticated) screen, I am able to return to Login screen clicking on my drawer through the following code:

BlocProvider.of<AuthenticationBloc>(context).add(LoggedOut());

But when I change from Home (Authenticated) to any other screens and try to click the drawer's Logout button, I get the following console prints but it doesnt change to my Login screen.

Console:

I/flutter (  731): LoggedOut
I/flutter (  731): Transition { currentState: AuthenticationAuthenticated, event: LoggedOut, nextState: AuthenticationLoading }
I/flutter (  731): Transition { currentState: AuthenticationLoading, event: LoggedOut, nextState: AuthenticationUnauthenticated }

BlocBuilder code:

child: BlocBuilder<AuthenticationBloc, AuthenticationState>(
          builder: (context, state) {
            if (state is AuthenticationAuthenticated) {
              print('test');
              return HomePage();
            }
            if (state is AuthenticationUnauthenticated) {
              return LoginPage(loginRepository: widget.loginRepository);
            }

            return SplashPage();
          },
        ),

*Logs *
flutter doctor -v:

[√] Flutter (Channel master, v1.18.0-7.0.pre.25, on Microsoft Windows [versão 10.0.18363.778], locale pt-BR)
    • Flutter version 1.18.0-7.0.pre.25 at C:\Tools\flutter
    • Framework revision 700663769e (4 days ago), 2020-04-22 07:18:01 -0400
    • Engine revision 4616931ead
    • Dart version 2.9.0 (build 2.9.0-2.0.dev 87b829bacd)


[√] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
    • Android SDK at C:\Users\locao\AppData\Local\Android\sdk
    • Platform android-29, build-tools 29.0.3
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b04)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[√] Android Studio (version 3.6)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin version 45.1.1
    • Dart plugin version 192.7761
    • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b04)

[√] VS Code (version 1.44.2)
    • VS Code at C:\Users\locao\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.9.1

[√] Connected device (3 available)
    • Android SDK built for x86 • emulator-5554 • android-x86    • Android 10 (API 29) (emulator)
    • Web Server                • web-server    • web-javascript • Flutter Tools
    • Chrome                    • chrome        • web-javascript • Google Chrome 81.0.4044.113

• No issues found!

Thanks in advance.

[narcodico]

@alexanderevlos Hi, no need to apologize, we've all been there at some point.

How are you navigating to other screens from your home screen ? .push, .pushReplacement or .pushAndRemoveUntil ? If your home screen is destroyed when you navigate using .pushReplacement for example it will also destroy your BlocBuilder so it won't be there anymore to react to state changes. Please use .push to navigate.

If you still encounter issues feel free to comment.

[alexanderevlos]

Hi, Rolly!

Here's the code I'm using to navigate through screens:

_navigateTo(BuildContext context, String routeName) {
    Navigator.pop(context);
    Navigator.pushNamed(context, routeName);
  }

I don't know if it's causing and harm, but even if I remove the pop(context) line, the behavior is still the same.

Other thing, I'm using different Scaffolds in Login Screen and the Authenticated pages, I don't think this would cause any issue, but I thought I should inform you.

Thanks again!

[narcodico]

That .pop would get rid of your home screen and cause the issue. But if you're still facing problems then please share a minimal reproduction of your issue and I'll have a look!

[alexanderevlos]

I'm preparing a main.dart file to upload here!

[alexanderevlos]

Hey @RollyPeres. Here's the code. I'm sorry, it's huge, but I wanted to give you all info I could.

Also, something funny happened, I was able to reproduce the error in a different way. In this example, the Login button calls a print I placed at Home Page (saying 'aaaaa'), but doesn't show the page at all.

Thanks again!
File:

main.zip

[alexanderevlos]

Oh, sorry, I forgot to tell: you have to place it in a project with flutter_bloc and equatable dependencies.

Thanks!

[narcodico]

I've modified your sample quite a bit, hope you don't mind.

• If you want to share larger examples like this one, I'd recommend directly linking to a repository, would be easier for someone to help you, instead of dropping everything in a main.dart.
  
  
  
  • I've took the approach of handling the top routing with a listener with named routes instead of a builder, since that is what you seemed you wanted to do.
  
  
  • I'd recommend breaking your widget tree into smaller reusable widgets; it's always harder to work with huge widgets.
  
  
  • You should avoid having BlocBuilder s on top of sub-trees that they don't care about the state, since you'll be rebuilding them on each state change, and that's to be avoided.
  
  
  • Try to avoid as much as possible injecting blocs into other blocs whenever possible. I've removed your LoginBloc's dependency on AuthenticationBloc and instead I used a simple event to add an auth event when the login succeeded.
  
  
  • I haven't touched on logic for navigating to other screens besides home, so you'll need to navigate based on your requirements.
  
  

demo.zip

[alexanderevlos]

GENIOUS!

Thank you so much, @RollyPeres, it worked so well!

And also thanks for the hints!! Greate value to my future codes!

Bye!

[alexanderevlos]

Oh, and sorry for the large example code, I didn't know the best way to send it haha.

[narcodico]

Oh, and sorry for the large example code, I didn't know the best way to send it haha.

No worries! If it's a small example you can create a gist and link it; as for larger examples you can create a public github repository and share the link to it. Good luck with your app!