Bloc: How do i use BlocBuilder across screen?

[abizareyhan]

I have BlocBuilder inside MaterialApp, like this

MultiBlocProvider(
      providers: [
        BlocProvider<ApplicationBloc>(
          create: (BuildContext context) => applicationBloc,
        ),
        BlocProvider<AuthenticationBloc>(
          create: (BuildContext context) => authenticationBloc,
        )
      ],
      child: MaterialApp(
        title: 'Dialogue Seller',
        debugShowCheckedModeBanner: false,
        home: BlocBuilder(
          bloc: applicationBloc,
          builder: (BuildContext context, ApplicationState applicationState) {
            if(applicationState is InitialApplicationState || applicationState is ApplicationLoading) {
              return SplashScreen();
            } else if(applicationState is ApplicationLoadSuccess) {
              return MainScreen();
            } else if(applicationState is NoInternetConnection) {
              // TODO : Create No Internet Connection Screen
              return Container();
            } else if(applicationState is ApplicationNeedsToBeUpdated) {
              // TODO : Create Application Update Screen
              return Container();
            } else if(applicationState is ApplicationUnderMaintenance) {
              // TODO : Create Under Maintenance Screen
              return Container();
            } else if(applicationState is ApplicationLoadFailed) {
              // TODO : Create Application Error Screen
              return Container();
            } else {
              // TODO : Create Unknown Error Screen
              return Container();
            }
          },
        ),
      ),
    );

i want to be able to rebuild the BlocBuilder every time i change the BlocState in every screen, so for example currently i opening MainScreen() and i do Navigator.push() to ProfileScreen() and at the profile screen i want to change the ApplicationState to ApplicationUnderMaintenance, for now it will not rebuild because when i push new screen it will be replace the blocbuilder. There is some way to do this?

[narcodico]

Hi @abizareyhan !

You can make use of MaterialApp's builder.

MaterialApp(
 builder: (_, widget) {
        return BlocListener<...>(
          listener: (context, state) {
          ...push routes based on ApplicationState 
          e.g.: _navigator.pushAndRemoveUntil(MainScreen.route(), (_) => false);
          }
         child: widget,
        );
      },
);

[abizareyhan]

Hi @abizareyhan !

You can make use of MaterialApp's builder.

MaterialApp(
 builder: (_, widget) {
        return BlocListener<...>(
          listener: (context, state) {
          ...push routes based on ApplicationState 
          e.g.: _navigator.pushAndRemoveUntil(MainScreen.route(), (_) => false);
          }
         child: widget,
        );
      },
);

I do like you said, but i got error this line

Navigator.pushAndRemoveUntil(context, MaterialPageRoute(builder: (context) => MainScreen()), (_) => false);

Unhandled Exception: Navigator operation requested with a context that does not include a Navigator.
The context used to push or pop routes from the Navigator must be that of a widget that is a descendant of a Navigator widget.

I use Flutter 1.17.0-3.3.pre, channel beta

[narcodico]

You'd need to use the navigator through it's key since the material app's navigator will be below your listener.

Have the widget containing your MaterialApp be stateful maybe and declare

final GlobalKey<NavigatorState> _rootNavigatorKey = GlobalKey<NavigatorState>();

NavigatorState get _navigator => _rootNavigatorKey.currentState;

and pass the key to material app's navigator

MaterialApp(navigatorKey: _rootNavigatorKey, ...);

Hope that helps 👍

[abizareyhan]

It works like a charm, Thank you