[go_router] 5.2.1 version, Shell Route is not working properly

[hpomgithub]

THE shell route in go_router version is not working properly because nothing is happening on path changes and state object is not getting updated.

[hpomgithub]

only 5.0.1 version is working well

[exaby73]

Hello @hpomgithub. Thank you for filing this issue. Can you please provide the following information?

• A complete and minimal, reproducible example. Ideally, a single main.dart file that can be run directly.
• The output of flutter doctor -v

Please provide the information in the form of text. See how to make collapsible sections with Markdown here.

[hpomgithub]

final GlobalKey<NavigatorState> _rootNavigatorKey =
    GlobalKey<NavigatorState>(debugLabel: 'root');
final GlobalKey<NavigatorState> _shellNavigatorKey =
    GlobalKey<NavigatorState>(debugLabel: 'shell');

void main() {
  usePathUrlStrategy();

  runApp(ShellRouteExampleApp());
}

/// An example demonstrating how to use [ShellRoute]
class ShellRouteExampleApp extends StatelessWidget {
  /// Creates a [ShellRouteExampleApp]
  ShellRouteExampleApp({Key? key}) : super(key: key);

  final GoRouter _router = GoRouter(
    navigatorKey: _rootNavigatorKey,
    initialLocation: '/a',
    routes: <RouteBase>[
      GoRoute(
          path: '/new',
          builder: (a, b) => Text('new'),
          parentNavigatorKey: _rootNavigatorKey),

      /// Application shell
      ShellRoute(
        navigatorKey: _shellNavigatorKey,
        pageBuilder:
            (BuildContext context, GoRouterState goRouterState, Widget child) {
              print(
                  "State name in Builder of shell builder:-${goRouterState.name}");
              print(
                  "State location  in Builder of shell builder:-${goRouterState.location}");
              print(
                  "State  path in Builder of shell builder:-  ${goRouterState.path} ");
          return MaterialPage(
              child: ScaffoldWithNavBar(child: child), maintainState: true);
        },
        routes: <RouteBase>[
          /// The first screen to display in the bottom navigation bar.
          GoRoute(
            name: 'a',
            path: '/a',
            builder: (BuildContext, goRouterState) {
              print(
                  "State name in Builder of route:-${goRouterState.name}");
              print(
                  "State location  in Builder of route:-${goRouterState.location}");
              print(
                  "State  path in Builder of route:-  ${goRouterState.path}");
              return Text("a");
            })])
)
]
)
}

CONSOLE OUTPUT :- State name in Builder of shell builder:-null State location in Builder of shell builder:-/a State path in Builder of shell builder:-

SUMMARY :- -> IN OUTPUT ONLY SHELL BUILDER GIVES THE OUTPUT. -> ROUTE BUILDER DEFINED FOR PATH /a ID NOT GETTING CALLED NOR EXECUTED ON CALLING THAT PARTICULAR PATH. -> ALSO STATE NAME AND PATH IS NULL AND BLANK SPACE RESPECTIVELY.

[exaby73]

Please provide a complete code sample, along with main() and the pages you're using, ideally in a single file

[hpomgithub]

Hi @exaby73 The code is same as that of shell route example code in documentation

[hpomgithub]

The only difference is that of print statements which I have added to print the values of state.name and path.

[exaby73]

Using the following code sample, I get expected results:

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  MyApp({super.key});

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

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

  late final GoRouter _router = GoRouter(
    navigatorKey: _rootNavigatorKey,
    initialLocation: '/a',
    routes: [
      ShellRoute(
        navigatorKey: _shellNavigatorKey,
        builder: (context, state, child) {
          if (kDebugMode) {
            print('Shell: state.name: ${state.name}');
            print('Shell: state.location: ${state.location}');
            print('Shell: state.path: ${state.path}');
          }

          return Scaffold(
            appBar: AppBar(title: const Text('Shell')),
            body: child,
          );
        },
        routes: [
          // This screen is displayed on the ShellRoute's Navigator.
          GoRoute(
            path: '/a',
            builder: (context, state) {
              if (kDebugMode) {
                print('Route: state.name: ${state.name}');
                print('Route: state.location: ${state.location}');
                print('Route: state.path: ${state.path}');
              }

              return const Center(
                child: Text('Screen A'),
              );
            },
          ),
          // Displayed ShellRoute's Navigator.
        ],
      ),
    ],
  );

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'Flutter Demo',
      routerConfig: _router,
    );
  }
}

flutter: Shell: state.name: null
flutter: Shell: state.location: /a
flutter: Shell: state.path: 
flutter: Route: state.name: null
flutter: Route: state.location: /a
flutter: Route: state.path: /a

state.name is null because the name argument is not passed to the routes

[hpomgithub]

@exaby73 In my example I have given the name in route of path \a. The main issue is this only that route builder is not getting called and the shell builder is giving null values of path and name .

[hpomgithub]

PFA THE FLUTTER DOCTOR Flutter (Channel stable, 3.3.9, on macOS 12.4 21F79 darwin-arm, locale en-IN) • Flutter version 3.3.9 on channel stable at /Users/yashgogna/FlutterDev/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision https://github.com/flutter/flutter/commit/b8f7f1f9869bb2d116aa6a70dbeac61000b52849 (2 weeks ago), 2022-11-23 06:43:51 +0900 • Engine revision 8f2221fbef • Dart version 2.18.5 • DevTools version 2.15.0

[exaby73]

path is not null. It's an empty string at first since the ShellRoute is loading first with the default path of ''. Then the /a path is loading which you can see printed out. name is null because you haven't passed a name to the route. Try changing the GoRoute to add the name property:

          GoRoute(
            name: 'a', // Add this
            path: '/a',
            builder: (context, state) {
              if (kDebugMode) {
                print('Route: state.name: ${state.name}');
                print('Route: state.location: ${state.location}');
                print('Route: state.path: ${state.path}');
              }

              return const Center(
                child: Text('Screen A'),
              );
            },
          ),

[hpomgithub]

GoRoute( name: 'a', path: '/a', builder: (BuildContext, goRouterState) { print( "State name in Builder of route:-${goRouterState.name}"); print( "State location in Builder of route:-${goRouterState.location}"); print( "State path in Builder of route:- ${goRouterState.path}"); return Text("a"); })])

[hpomgithub]

Its already there please see.

[exaby73]

Seems you have already raised an issue with the name being null https://github.com/flutter/flutter/issues/116516. And since path is also working as expected, I am not sure what the issue here is

[hpomgithub]

Hi @exaby73 will continue on that thread now.. I have tried to explain in detail.

[github-actions[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.