OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

GoRouter rebuilds on redirect with Firebase and Riverpod

  • Thread starter Thread starter Atanas Nankinski
  • Start date Start date
A

Atanas Nankinski

Guest
I am working on a mobile application using Riverpod with code generation without hooks as state management and Firebase for authentication. Innitially i was using the defalt navigation but after finding out about the possibility to redirect using GoRouter i decided to refactor and implement GoRouter into my project. So far i managed to implement the routes insde riverpod provider that then i provide to the MaterialApp.router and the redirect logic for when the user is unauthenticated is working just fine, but there is one issue that i can't find solution to - when user auth state changes and it redirects(on login or loggout for example) it rebuilds the whole GoRouter and calls the declared initial route again which in this case is custom splash screen with delay of 3 seconds that shows after the native splash screen. From the logs of GoRouter i see how every time the app redirects GoRouter gets all known routes and initializes the initial route all over again. When i call some of the subroutes it navigates just fine and doesn't rebuild GoRouter.

Here is the GoRouter implementation:

Code:
part 'go_router.g.dart';

final navigatorKey = GlobalKey<NavigatorState>();

@riverpod
GoRouter router(RouterRef ref) {
  final auth = ref.watch(userProvider);

  return GoRouter(
    initialLocation: RoutingConst.splashRoute,
    debugLogDiagnostics: true,
    navigatorKey: navigatorKey,
    routes: [
      GoRoute(
        name: RoutingConst.splashRoute,
        path: RoutingConst.splashRoute,
        pageBuilder: (context, state) => NoTransitionPage(child: SplashScreenPage()),
      ),
      GoRoute(
        redirect: (context, state) {
          if(auth.isLoading || auth.hasError) {
            return null;
          }
          final isAuth = auth.valueOrNull != null;

          if(isAuth) return RoutingConst.home;
          return null;
        },
        name: RoutingConst.loggedOut,
        path: RoutingConst.loggedOut,
        pageBuilder: (context, state) => MaterialPage(child: SignInPage()),
        routes: [
          GoRoute(
            name: RoutingConst.login,
            path: RoutingConst.login,
            pageBuilder: (context, state) => MaterialPage(child: LoginPage()),
          ),
          GoRoute(
            name: RoutingConst.signInWithEmail,
            path: RoutingConst.signInWithEmail,
            pageBuilder: (context, state) => MaterialPage(child: SignInWithEmailPage()),
          ),
        ]
      ),
      GoRoute(
        redirect: (context, state) {
          if(auth.isLoading || auth.hasError) {
            return null;
          }
          final isAuth = auth.valueOrNull != null;

          if(!isAuth) return RoutingConst.loggedOut;
          return null;
        },
        name: RoutingConst.home,
        path: RoutingConst.home,
        pageBuilder: (context, state) => MaterialPage(child: NewsPage()),
      ),
    ],
  );
}

Here is the app.dart file implementing Material.route:

Code:
class MyApp extends ConsumerWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    Locale currentLocale = ref.watch(localizationControllerProvider);
    GoRouter router = ref.watch(routerProvider);

    return MaterialApp.router(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: ConfigReader.isDebug(),
      routerConfig: router,
      localizationsDelegates: AppLocalizations.localizationsDelegates,
      supportedLocales: AppLocalizations.supportedLocales,
      locale: currentLocale,
      theme: mainTheme,
    );
  }
}

Here is the splash screen where the initial route leads to:

Code:
class SplashScreenPage extends ConsumerStatefulWidget {
  const SplashScreenPage({super.key});

  @override
  ConsumerState<SplashScreenPage> createState() => _SplashScreenPageState();
}

class _SplashScreenPageState extends ConsumerState<SplashScreenPage> {
  Timer? _timer;

  @override
  void initState() {
    _timer = Timer(const Duration(seconds: 4), () {
      final router = ref.watch(routerProvider);
      router.push(RoutingConst.home);
    });
    super.initState();
  }

  @override
  void dispose() {
    _timer!.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      body: Stack(
        children: [
        Container(
          decoration: const BoxDecoration(
            image: DecorationImage(
              image: AssetImage("assets/images/background.png"),
              fit: BoxFit.cover,
            ),
          ),
        ),
        const Padding(
          padding: EdgeInsets.symmetric(horizontal: 16),
          child: Column(
            children: [
              Spacer(),
              Spacer(),
              Spacer(),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Flexible(
                    child: Text(
                      "SCOUTS NEWS",
                      maxLines: 2,
                      overflow: TextOverflow.ellipsis,
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        fontFamily: 'Inter',
                        color: Colors.white,
                        fontSize: 40,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ],
              ),
              Spacer(),
            ],
          ),
        ),
      ]
      ),
    );
  }
}

Here are the routing values that i've usedboth for path and for names:

Code:
class RoutingConst {
  // Main Route Names
  static const String loggedOut = "/logged_out";
  static const String home = "/home";
  static const String splashRoute = "/splash";
  // Logged Out Route Names
  static const String signInWithEmail = "sign_in_with_email";
  static const String login = "login";
}

And here is the extension on String i am using to get the nested routes path:

Code:
extension StringExtentions on String {
  String loggedOutRoute() => "${RoutingConst.loggedOut}/$this";
  String homeRoute() => "${RoutingConst.home}/$this";
}

I've tried switching between global redirect, navigating through both named and unamed routes. Using both go and push but didn't work. Tried calling the .go/goNamed/push using both context and ref.watch(routerProvider).
<p>I am working on a mobile application using Riverpod with code generation without hooks as state management and Firebase for authentication. Innitially i was using the defalt navigation but after finding out about the possibility to redirect using GoRouter i decided to refactor and implement GoRouter into my project. So far i managed to implement the routes insde riverpod provider that then i provide to the MaterialApp.router and the redirect logic for when the user is unauthenticated is working just fine, but there is one issue that i can't find solution to - when user auth state changes and it redirects(on login or loggout for example) it rebuilds the whole GoRouter and calls the declared initial route again which in this case is custom splash screen with delay of 3 seconds that shows after the native splash screen. From the logs of GoRouter i see how every time the app redirects GoRouter gets all known routes and initializes the initial route all over again. When i call some of the subroutes it navigates just fine and doesn't rebuild GoRouter.</p>
<p>Here is the GoRouter implementation:</p>
<pre><code>part 'go_router.g.dart';

final navigatorKey = GlobalKey<NavigatorState>();

@riverpod
GoRouter router(RouterRef ref) {
final auth = ref.watch(userProvider);

return GoRouter(
initialLocation: RoutingConst.splashRoute,
debugLogDiagnostics: true,
navigatorKey: navigatorKey,
routes: [
GoRoute(
name: RoutingConst.splashRoute,
path: RoutingConst.splashRoute,
pageBuilder: (context, state) => NoTransitionPage(child: SplashScreenPage()),
),
GoRoute(
redirect: (context, state) {
if(auth.isLoading || auth.hasError) {
return null;
}
final isAuth = auth.valueOrNull != null;

if(isAuth) return RoutingConst.home;
return null;
},
name: RoutingConst.loggedOut,
path: RoutingConst.loggedOut,
pageBuilder: (context, state) => MaterialPage(child: SignInPage()),
routes: [
GoRoute(
name: RoutingConst.login,
path: RoutingConst.login,
pageBuilder: (context, state) => MaterialPage(child: LoginPage()),
),
GoRoute(
name: RoutingConst.signInWithEmail,
path: RoutingConst.signInWithEmail,
pageBuilder: (context, state) => MaterialPage(child: SignInWithEmailPage()),
),
]
),
GoRoute(
redirect: (context, state) {
if(auth.isLoading || auth.hasError) {
return null;
}
final isAuth = auth.valueOrNull != null;

if(!isAuth) return RoutingConst.loggedOut;
return null;
},
name: RoutingConst.home,
path: RoutingConst.home,
pageBuilder: (context, state) => MaterialPage(child: NewsPage()),
),
],
);
}
</code></pre>
<p>Here is the app.dart file implementing Material.route:</p>
<pre><code>class MyApp extends ConsumerWidget {
const MyApp({super.key});

@override
Widget build(BuildContext context, WidgetRef ref) {
Locale currentLocale = ref.watch(localizationControllerProvider);
GoRouter router = ref.watch(routerProvider);

return MaterialApp.router(
title: 'Flutter Demo',
debugShowCheckedModeBanner: ConfigReader.isDebug(),
routerConfig: router,
localizationsDelegates: AppLocalizations.localizationsDelegates,
supportedLocales: AppLocalizations.supportedLocales,
locale: currentLocale,
theme: mainTheme,
);
}
}
</code></pre>
<p>Here is the splash screen where the initial route leads to:</p>
<pre><code>class SplashScreenPage extends ConsumerStatefulWidget {
const SplashScreenPage({super.key});

@override
ConsumerState<SplashScreenPage> createState() => _SplashScreenPageState();
}

class _SplashScreenPageState extends ConsumerState<SplashScreenPage> {
Timer? _timer;

@override
void initState() {
_timer = Timer(const Duration(seconds: 4), () {
final router = ref.watch(routerProvider);
router.push(RoutingConst.home);
});
super.initState();
}

@override
void dispose() {
_timer!.cancel();
super.dispose();
}

@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
body: Stack(
children: [
Container(
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/background.png"),
fit: BoxFit.cover,
),
),
),
const Padding(
padding: EdgeInsets.symmetric(horizontal: 16),
child: Column(
children: [
Spacer(),
Spacer(),
Spacer(),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Flexible(
child: Text(
"SCOUTS NEWS",
maxLines: 2,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'Inter',
color: Colors.white,
fontSize: 40,
fontWeight: FontWeight.bold,
),
),
),
],
),
Spacer(),
],
),
),
]
),
);
}
}
</code></pre>
<p>Here are the routing values that i've usedboth for path and for names:</p>
<pre><code>class RoutingConst {
// Main Route Names
static const String loggedOut = "/logged_out";
static const String home = "/home";
static const String splashRoute = "/splash";
// Logged Out Route Names
static const String signInWithEmail = "sign_in_with_email";
static const String login = "login";
}
</code></pre>
<p>And here is the extension on String i am using to get the nested routes path:</p>
<pre><code>extension StringExtentions on String {
String loggedOutRoute() => "${RoutingConst.loggedOut}/$this";
String homeRoute() => "${RoutingConst.home}/$this";
}
</code></pre>
<p>I've tried switching between global redirect, navigating through both named and unamed routes. Using both go and push but didn't work. Tried calling the .go/goNamed/push using both context and ref.watch(routerProvider).</p>
Continue reading...
 

Latest posts

Top