Flutter - I have nested navigation(go_router), how can I use a single BlocProvider in nested widgets

Murlodin
January 12, 2024
245 views
0 votes
2 Answers

I can’t use the MultiBlocProvider in the root widget, because when the user logs out of the account, the data in the bloc is saved.

Router

StatefulShellBranch(
  navigatorKey: _rentShellNavigatorKey,
  routes: <RouteBase>[
    GoRoute(
      path: AppRouter.rentCarList.routePath,
      pageBuilder: (BuildContext context, GoRouterState state) => const NoTransitionPage<dynamic>       (child: RentCarsScreen()),
      routes: <RouteBase>[
        GoRoute(
          path: "${AppRouter.rentCarDesc.routeName}/:id",
          name: AppRouter.rentCarDesc.routeName,
          builder: (BuildContext context, GoRouterState state) =>
            RentCarDescScreen(id: state.pathParameters["id"]!),
          routes: <RouteBase>[
            GoRoute(
              path: AppRouter.carReservation.routeName,
              name: AppRouter.carReservation.routeName,
              builder: (BuildContext context, GoRouterState state) =>
                 CarReservationScreen(id: state.pathParameters["id"]!),
            ),
          ]
        ),
     ])
 ]),

RentCarsScreen

@override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF0F2F4),
      body: BlocProvider<RentCarBloc>(
        create: (BuildContext context) => locator<RentCarBloc> 
           ()..add(GetRentCarListEvent()),
        child: BlocBuilder<RentCarBloc, RentCarState>(
        builder: (BuildContext context, RentCarState state) {
          //ui code

RentCarDescScreen

  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF0F2F4),
      body: BlocBuilder<RentCarBloc, RentCarState>(
          builder: (BuildContext context, RentCarState state) {
          // ui code

Answers

Chosen as BEST ANSWER

Replcace

StatefulShellBranch(
  navigatorKey: _rentShellNavigatorKey,
  routes: <RouteBase>[
    GoRoute(
      path: AppRouter.rentCarList.routePath,
      pageBuilder: (BuildContext context, GoRouterState state) => const NoTransitionPage<dynamic>       (child: RentCarsScreen()),
      routes: <RouteBase>[
        GoRoute(
          path: "${AppRouter.rentCarDesc.routeName}/:id",
          name: AppRouter.rentCarDesc.routeName,
          builder: (BuildContext context, GoRouterState state) =>
            RentCarDescScreen(id: state.pathParameters["id"]!),
          routes: <RouteBase>[
            GoRoute(
              path: AppRouter.carReservation.routeName,
              name: AppRouter.carReservation.routeName,
              builder: (BuildContext context, GoRouterState state) =>
                 CarReservationScreen(id: state.pathParameters["id"]!),
            ),
          ]
        ),
     ])
 ]),

StatefulShellBranch(
            navigatorKey: _rentShellNavigatorKey,
            routes: <RouteBase>[
              GoRoute(
                path: AppRouter.rentCarList.routePath,
                pageBuilder: (BuildContext context, GoRouterState state) => 
                  NoTransitionPage<dynamic>(child:
                  BlocProvider<RentCarBloc>.value(
                    value: locator<RentCarBloc>()..add(GetRentCarListEvent()),
                    child: const RentCarsScreen(),
                  )
                ),
                routes: <RouteBase>[
                  GoRoute(
                    path: "${AppRouter.rentCarDesc.routeName}/:id",
                    name: AppRouter.rentCarDesc.routeName,
                    builder: (BuildContext context, GoRouterState state) =>
                        BlocProvider<RentCarBloc>.value(
                          value: locator<RentCarBloc> 
                            ()..add(GetRentCarListEvent()),
                          child: RentCarDescScreen(id: 
                            state.pathParameters["id"]!),
                        ),
                    routes: <RouteBase>[
                      GoRoute(
                        path: AppRouter.carReservation.routeName,
                        name: AppRouter.carReservation.routeName,
                        builder: (BuildContext context, GoRouterState state) =>
                          BlocProvider<RentCarBloc>.value(
                            value: locator<RentCarBloc> 
                              ()..add(GetRentCarListEvent()),
                            child: CarReservationScreen(id: 
                              state.pathParameters["id"]!),
                          )
                      ),
                    ]
                  ),
                ])
            ]),

(Edit)

late BuildContext parentContext;          // add this

StatefulShellBranch(
navigatorKey: _rentShellNavigatorKey,
  routes: <RouteBase>[
    GoRoute(
      path: AppRouter.rentCarList.routePath,
      pageBuilder: (BuildContext context, GoRouterState state) {

        parentContext = context;                            // add this

        BlocProvider(
          create: (context) => locator<RentCarBloc>(),
          child: const NoTransitionPage<dynamic>(child: RentCarsScreen()),
        ),
      ),
      routes: <RouteBase>[
        GoRoute(
          path: "${AppRouter.rentCarDesc.routeName}/:id",
          name: AppRouter.rentCarDesc.routeName,
          builder: (BuildContext context, GoRouterState state) =>
            BlocProvider.value(
              value: BlocProvider.of<YourBloc>(parentContext),            // change context to parentContext
              child: RentCarDescScreen(id: state.pathParameters["id"]!),
            ),
          routes: <RouteBase>[
            GoRoute(
              path: AppRouter.carReservation.routeName,
              name: AppRouter.carReservation.routeName,
              builder: (BuildContext context, GoRouterState state) =>
                 CarReservationScreen(id: state.pathParameters["id"]!),
            ),
          ]
        ),
     ])
 ]),

Then in RentCarsScreen, if you want to add event, do like this

BlocProvider.of<RentCarBloc>(context).add(GetRentCarListEvent());

Please signup or login to give your own answer.

Click here to cancel reply.

Flutter – I have nested navigation(go_router), how can I use a single BlocProvider in nested widgets

Answers