inlavigo / gg_router

A lightweight routing system for flutter
BSD 2-Clause "Simplified" License
4 stars 0 forks source link

How to make the structure of a dashboard (web) with gg_router? #3

Open ghost opened 2 years ago

ghost commented 2 years ago

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 140539944-94d4e707-1f77-4871-8052-a4c2114d6646 140539965-92048dba-05d5-4789-bd82-4d622d51b342 . 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 gg_router?

Thanks so much for the help.

Regards, Jose

gatzsche commented 2 years ago

Heaps thanks for that great example.

Your requirement can currently not be expressed directly with gg_router. But I'd love to implement it. Here is the concept I'm thinking about:

  1. Define two routes with GgRouter, a loginRoute and a dashboardRoute.
  2. You hand over a an authentication delegate to GgRouter which makes a decision if a route is allowed to be opened or not.
  3. Depending on the result of the authentication delegate, one of the routes would be chosen.

What do you think about this concept?

ghost commented 2 years ago

It is a good concept, in addition all subsequent pages must be displayed within the dashboard (dashboardRoute) without the need for the elements found in the base dashboard to be repainted. Thanks.