I am working on a mobile application using Riverpod with code generation without hooks as state management and Firebase for authentication. Innitally 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:
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:
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:
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(),
],
),
),
]
),
);
}
}
I’ve tried switching between global redirect, navigating through both named and unamed routes. Using both go and push, but nothing seems to be working.