How to make the structure of a dashboard (web) with go_router?

[jamolina2021]

Hello,

In the examples that you include, I have not seen the typical dashboard, an initial screen to login and when logging in, a base screen that is used to show the rest of the pages in its central zone, that is, the base screen contains a drawer located on the left, a title in the upper central area, and a central area in which the pages you are browsing are shown.

In fluro the code to do this is the following:

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Intl.defaultLocale = 'es_ES';
    //timeago.setLocaleMessages('es', timeago.FrMessages());
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      localizationsDelegates: const [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: const [
        Locale('en', 'US'), // English
        Locale('es', 'ES'), // Español
      ],
      title: 'Admin Dashboard',
      initialRoute: '/',
      onGenerateRoute: Flurorouter.router.generator,
      navigatorKey: NavigationService.navigatorKey,
      scaffoldMessengerKey: NotificationsService.messengerKey,
      builder: (_, child) {
        //print('token: ');
        //print(LocalStorage.prefs.getString('token'));
        final authProvider = Provider.of<AuthProvider>(context);

        if (authProvider.authStatus == AuthStatus.checking) {
          return const SplashLayout();
        }

        if (authProvider.authStatus == AuthStatus.authenticated) {
          return DashboardLayout(child: child!);
        } else {
          return AuthLayout(child: child!);
        }

        //return AuthLayout(child: child!);
        //return DashboardLayout(child: child!);
      },
      theme: ThemeData.light().copyWith(
        scrollbarTheme: const ScrollbarThemeData().copyWith(
          thumbColor: MaterialStateProperty.all(
            Colors.grey.withOpacity(0.5),
          ),
        ),
      ),
    );
  }
}

How can I do the same with go_router?

Thanks so much for the help.

Regards,
Jose

[ghost]

Is it impossible to do this kind of structure with go_router?

[csells]

To build this with go_router, I'd start by looking at the nested navigation docs and the navigator builder docs.

[devwaywin]

Hi Chris,
I'm new to flutter and tried to follow Go Router documentation for nested navigation and I found it really advanced to me.
I'm looking for the same functionality that @jamolina2021 asked for. Is there a simple example using nested navigation without Taps?

Thanks,
Ahmed.

[csells]

Hey, @devwaywin. I can see how the nested navigation sample would seem complicated. It relies on understanding the StatefulWidget lifecycle, which is certainly not immediately obvious. Here are some resources you might find helpful: https://www.google.com/search?q=flutter+stateful+widget+lifecycle

[esDotDev]

You can do this imperitive wrapping of different scaffold inside of navigatorBuilder as you did with fluro, ie:

navigatorBuilder: (_, __, child) {
    final authProvider = Provider.of<AuthProvider>(context);
    if (authProvider.authStatus == AuthStatus.checking) {
      return const SplashLayout();
    }
    if (authProvider.authStatus == AuthStatus.authenticated) {
      return DashboardLayout(child: child!);
    } else {
      return AuthLayout(child: child!);
    }
  },

Pretty sure this should work fine... the SplashView might be an issue because it doesn't return the child navigator.

[jamolina2021]

Thank you very much @esDotDev, this may be a correct solution,

navigatorBuilder: (_, __, child) {
    final authProvider = Provider.of<AuthProvider>(context);
    if (authProvider.authStatus == AuthStatus.checking) {
      return const SplashLayout();
    }
    if (authProvider.authStatus == AuthStatus.authenticated) {
      return DashboardLayout(child: child!);
    } else {
      return AuthLayout(child: child!);
    }
  },

however, every time I navigate to another page, an object of the DashboardLayout class is created again, that is, the following code is always executed:
return DashboardLayout(child: child!);

However, in the Fluro code

 builder: (_, child) {
        final authProvider = Provider.of<AuthProvider>(context);

        if (authProvider.authStatus == AuthStatus.checking) {
          return const SplashLayout();
        }

        if (authProvider.authStatus == AuthStatus.authenticated) {
          return DashboardLayout(child: child!);
        } else {
          return AuthLayout(child: child!);
        }
      },

it is only executed (return DashboardLayout(child: child!);) the first time the DashboardLayout is displayed, then when navigating to another page, the code is not executed again, which is much more optimal.

Do you have any idea how to do this?

Thank you very much for your help, you are a crack. :)

Regards,
Jose

[esDotDev]

I don't really understand. When changing pages the entire widget tree is always rebuilt, so in both cases DashboardLayout should be getting rebuilt in both fluro or GR

[ghost]

Well, curiously, in Fluro, in some way, they have optimized this process.
It may sound strange, but it is so. :)