csells / go_router

The purpose of the go_router for Flutter is to use declarative routes to reduce complexity, regardless of the platform you're targeting (mobile, web, desktop), handling deep linking from Android, iOS and the web while still allowing an easy-to-use developer experience.
https://gorouter.dev
441 stars 97 forks source link

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

Closed jamolina2021 closed 3 years ago

jamolina2021 commented 3 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.

login

base_screen

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