GoRouter + Riverpod best usage / integration

[lucavenir]

Hi there,

I think this discussion could be useful to improve these examples.
As stated in this comment of PR #1341, there could be several strategies when integrating GoRouter with Riverpod.

I'd like to start this discussion to gather some intel from the community about this matter. The objective is to leave a "best practice" to users on such topic.

Any kind of feedback or request would be useful to improve or find proper alternatives to this.

EDIT. The following content is outdated. Please take the following statements with a grain of salt, as there's better examples on the repo.

At the moment I personally like very much the approach I showed in the example above (ref.listen + ChangeNotifier), because:

1. It is beginner friendly for people coming from the Provider package;
2. It is beginner friendly for people trying GoRouter for the first time;
3. It is scalable, since listening to new states just needs to add another ref.listen directive;
4. It is easily customizable: just implement logic in the ref.listen 's callback when needed;
5. While we do need to remember to notifyListeners(), we can avoid the use of a (or many) stream and its dispose and we can avoid the ValueNotifier jargon. Also, notifyListeners make the routing decisions more flexible.

I'd like to know what you guys would do!

[neiljaywarner]

i'm interested in this..

[lucavenir]

Hi there, if you're looking for an example, you can check it here.

If you're interested in the discussion, please bring an alternative to such example so we can evaluate alternatives.

[XuanTung95]

@lucavenir Why do you need more than one routers for MaterialApp. It seems very strange.

[lucavenir]

If you move GoRouter() outside of the provider, you don't need ref to access it. You can still use ref for state management as normal.

I don't think I follow here; I do need the ref object inside the GoRouter so I can access state from other providers - such as the logged-in user. Another thing we need is to pass the ref object to our ChangeNotifier so we can listen to other state events change.

I do agree that it is an error-prone approach as you don't want your router to rebuild: you'd rebuild the whole app and as you said it would be bad. But I still think you'd notice that pretty quickly - the whole app would rebuild in response of certain events: that should ring a bell.

[XuanTung95]

I do need the ref object inside the GoRouter so I can access state from other providers

I did not notice you use ref in redirect and refreshListenable.

the whole app would rebuild in response of certain events: that should ring a bell.

The problem is not rebuilding the whole app or a screen.
go_router store the route data inside GoRouterDelegate and pass it to MaterialApp, when you rebuild the MaterialApp with another GoRouterDelegate, the old route data is lost, it then navigate to the home page. Imagine the page is changed by notifying a random provider but not context.goNamed().

[Chaitanyabsprip]

Just a thought, but could you use restoration logic to prevent loss of navigation data?

[XuanTung95]

@Chaitanyabsprip could you explain more about "restoration logic"?

[Chaitanyabsprip]

I hope this helps, https://github.com/csells/go_router/blob/main/go_router/example/lib/state_restoration.dart.

[PavelPZ]

Maybe off-topic information:

• there is a direct connection option riverpod => RouteDelegate (see simple or login flow examples)
• see also the challenges that Flutter for Web and Desktops brings to the Flutter asynchronous navigation (medium article)
• notice the riverpod_navigator package I created for my new project (with Typed navigation feature)

[neckaros]

i'm also interesed about the best practices for riverpod and go router or any kind of router.

i have a very structured flow:
user selected a server at path '/server' (fox ex server "a")
he then select a libray at path '/server/a/library' (for ex "1")
he then can access the library content for the library at path '/server/a/library/1/medias'

But i want user to be able to navigate directly (deeplinking or web) to '/server/a/library/1/medias'

what i do for now is that i have a selectedServerId statenotifier and a FutureProvider that depends (whatch) this selectedSeverId to load server data. Same for library (selectedLibraryId and a Library FutureProvider)

for now what i do is that for every page that is under server in the initState i set selectedServerId from the path parameter. Same for page under library where i set both serverSelectedId and LibrarySelectedId.

That does not look very elegant and is error prone!

[Errechydy]

@lucavenir Hi, is there a way to avoid the behaviour of the super(null); inside class UserState, because that null has no meaning except that it instantiate the User model, which act like if the user is logged out. So what happen is when a user is logged in and close the app, then when he opens it he gets the login screen for couple seconds because of that super(null); and then set the actual state of the user (read from SharedPreferences if the user exist or not) if it exists then it will change the state from null to User which will make the screen change from the Login to home.

So the user will always get the login screen first, if the user is logged out then that's fine, but if he's already logged in then he will get the login screen for couple seconds before he gets redirected to home screen, is there a way to avoid that?

[qrhfz]

@lucavenir I looked into your examples. I personally don't like ChangeNotifier. So i take the example no. 3 and modify it a bit by implementing my own listenable. It is working.

class RouteRefreshListenable extends Listenable {
  VoidCallback? _listener;
  @override
  void addListener(VoidCallback listener) {
    _listener = listener;
  }

  @override
  void removeListener(VoidCallback listener) {
    _listener = null;
  }

  void notify() {
    _listener?.call();
  }
}

// inside provider
  final listenable = RouteRefreshListenable();

  ref.listen<User?>(userProvider, (oldUser, next) {
    listenable.notify();
  });

[lucavenir]

Great, looks nice and it might be the right direction. Can the RouteRefreshListenable class be allowed to define custom attributes? I guess it is: I would pass a ref in there so that we can access state across our app via ref.read.

[julgog]

Any news on this topic? I'm trying to do a go_ruter integration in the best way and the repository with the example (go router-riverpod-firebase) is not to my liking, since the entire root widget is rebuilt.
is there a better way? And if so, where could I find an example? sorry @lucavenir but your example is reconstructed and if it were a flow that continually changes, we would have many reconstructions.

[AhmedLSayed9]

@lucavenir Sure! no problem 😃

[lucavenir]

Thank you. I mentioned you in the readme. That's the least I can do.

[rrousselGit]

nit: don't forget to dispose that ValueNotifier

[AhmedLSayed9]

nit: don't forget to dispose that ValueNotifier

I was just investigating that right now, thanks to @lucavenir 😄

[lucavenir]

I forgot to tell @AhmedLSayed9 about that! Thanks Remi 😄

In the GoRouter+Riverpod example repo I wrote this:

final isAuth = ValueNotifier<AsyncValue<bool>>(const AsyncLoading());
ref
  ..onDispose(isAuth.dispose) // don't forget to clean after yourselves (:

😆

[julgog]

Thanks for the answer, I really couldn't understand your code, I have tried to summarize mine, and it seems better to me than the example from the @lucavenir repository, if anyone has any comments or opinions they are welcome, this is an extract of my code and The best thing is that neither the tree nor the route is reconstructed.
It could be optimized by placing GoRoute in the init() of a ConsumerStatefulWidget, but in my opinion this code is very good.
well sorry for my english.
`@override
Widget build(BuildContext context, WidgetRef ref) {
log("inside main build root");
final _router= GoRouter(

  initialLocation: SplashPage.routeLocation,
  routes: [
     ...
  ],
  redirect: (context, state) {
    log("inside redirection");
    var authState = ref.read(authProvider);
    .....
  }

);
ref.listen(authProvider, (previoustValue, newValue) {
log("change value");
_router.refresh();
});
return MaterialApp.router(
routerConfig: _router,
title: "My example Go_router - Riverpod - Firebase",
);
}`

[lucavenir]

Please check the updated example in the repo, it might help you

[Maus3rSR]

I know this is not really likeable workaround, very straightforward and maybe subject to issues but I'll post it anyway if it can help:

In our project we created an AppContainer class:

import 'package:flutter_riverpod/flutter_riverpod.dart';

/// Singleton holding riverpod [ProviderContainer] instance.
///
/// You can read the [ProviderContainer] instance with `AppContainer.instance`.
/// ```dart
/// AppContainer.instance.read(someProvider)
/// ```
///
/// This class could be rewrite to hold some other container objects instance if you need to use them outside Flutter.
/// Be careful about why you are using [AppContainer].
class AppContainer {
  AppContainer._({
    ProviderContainer? parent,
    List<Override> overrides = const [],
    List<ProviderObserver>? observers,
  }) : _providerContainer = ProviderContainer(
          parent: parent,
          overrides: overrides,
          observers: observers,
        );

  static AppContainer? _singleton;

  static ProviderContainer get instance => _singleton!._providerContainer;

  final ProviderContainer _providerContainer;

  factory AppContainer({
    ProviderContainer? parent,
    List<Override> overrides = const [],
    List<ProviderObserver>? observers,
  }) {
    _singleton = AppContainer._(
      parent: parent,
      overrides: overrides,
      observers: observers,
    );

    return _singleton!;
  }
}

Which will hold the ProviderContainer instance.

Be careful that you will need to instantiate it before running app somehow (bootstraping phase) and provide the instance to the runApp function with UncontrolledProviderScope.

  runApp(UncontrolledProviderScope(
    container: AppContainer.instance,
    child: UltrashotApp(),
  ));

Then we are able to do this for example :

  GoRoute(
    path: AppRoutes.login.path,
    name: AppRoutes.login.name,
    builder: (context, state) {
      if (state.extra is RedirectionAfterLogin) {
        AppContainer.instance.read(storageProvider).write(
              'redirectionAfterLogin',
              jsonEncode(
                (state.extra as RedirectionAfterLogin).toJson(),
              ),
            );
      }
      return const LoginScreen();
    },
    routes: [
      GoRoute(
        path: AppRoutes.registerProfile.path,
        name: AppRoutes.registerProfile.name,
        builder: (context, state) => const RegisterProfileScreen(),
      ),
    ],
  ),

We are not facing any issue with this way, but we try to use it with a lot of care and only if we don't find any solution in a proper way.

[lucavenir]

I'd personally strongly discourage writing a singleton for this (warning: opinions mixed with facts below).

First, if redirection is what you care about for you to write that singleton, an alternative is clearly being shown in the example folder in the repo linked above. TL;DR: we show this snippet:

@override
FutureOr<String?> redirect(BuildContext context, GoRouterState state) async {
  final userRole = await ProviderScope.containerOf(context).read(permissionsProvider.future);

  return userRole.map(
    admin: (_) => const AdminRoute().location,
    user: (_) => const UserRoute().location,
    guest: (_) => const GuestRoute().location,
    none: (_) => null,
  );
}

But we also mention:

Important note on this redirect function: this isn't reactive.
No redirect will be triggered on a user role change.

Thus, passing and handling a refreshListenable is required with Riverpod, if you care about reactive redirects.

Finally, about this:

isn't a really likeable workaround [...] and maybe subject to issues

Don't write code smells if you know it's a smell from the start 😄
AFAIK, this approach is and will be subject to issues. The first one that comes to mind is that this:

  runApp(UncontrolledProviderScope(
    container: AppContainer.instance,
    child: UltrashotApp(),
  ));

This breaks your application if you try some top-level overrides. I'm not 100% sure, but I stumbled upon this issue more than once.

Yeah, I know, the documentation clearly shows how to initialize provider, but still, it may happen, so be aware of it. Even more so, let's follow what the docs say 😄

Furthemore, I don't get it, why not using a simple final container = ProviderScope.containerOf(context)?
You can access it from any redirect callback mentioned above.

[catalunha]

I also have doubts about the clear use of Riverpod and GoRouter. I think they are both powerful and if adjusted via recipe, by the wisest, it would help a lot to grow both.
Follow my solution, even if it is incomplete and dirty.

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:go_router/go_router.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

import 'routes.dart';

class App extends HookConsumerWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final notifier = ref.watch(routerListenableProvider.notifier);

    final key = useRef(GlobalKey<NavigatorState>(debugLabel: 'routerKey'));
    final router = useMemoized(
      () => GoRouter(
        navigatorKey: key.value,
        refreshListenable: notifier,
        initialLocation: AppPage.splash.path,
        debugLogDiagnostics: true,
        routes: routes,
        redirect: notifier.redirect,
      ),
      [notifier],
    );

    return MaterialApp.router(
      routerConfig: router,
      title: 'Fluxus 4',
      theme: ThemeData.dark(useMaterial3: true),
      debugShowCheckedModeBanner: false,
      localizationsDelegates: const [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: const [
        Locale('pt', 'BR'),
      ],
    );
  }
}

part 'routes.g.dart';

@riverpod
class RouterListenable extends _$RouterListenable implements Listenable {
  VoidCallback? _routerListener;
  bool _isAuth = false; // Useful for our global redirect function
  @override
  Future<void> build() async {
    final user = ref.watch(authUserProvider).asData?.value;
    if (user == null) {
      _isAuth = false;
    } else {
      _isAuth = true;
    }
    ref.listenSelf((_, __) {
      // One could write more conditional logic for when to call redirection
      if (state.isLoading) return;
      _routerListener?.call();
    });
  }

  /// Redirects the user when our authentication changes
  String? redirect(BuildContext context, GoRouterState state) {
    // log('+++ redirect state');
    // log('_isAuth: $_isAuth');
    // log('state.fullPath: ${state.fullPath}');
    // log('state.location: ${state.location}');
    // log('state.matchedLocation: ${state.matchedLocation}');
    // log('state.name: ${state.name}');
    // log('state.pageKey: ${state.pageKey}');
    // log('state.extra.toString(): ${state.extra.toString()}');
    // log('state.path: ${state.path}');
    // log('state.pathParameters: ${state.pathParameters}');
    // log('state.queryParameters: ${state.queryParameters}');
    // log('state.queryParametersAll: ${state.queryParametersAll}');
    // log('--- redirect state');

    if (this.state.isLoading || this.state.hasError) return null;

    // final isAuthUnderLogin =
    //     _isAuth && state.location.startsWith(AppPage.login.path);
    // if (isAuthUnderLogin) {
    //   log('return if isAuthUnderLogin: AppPage.home.path');
    //   return AppPage.home.path;
    // }
    final isAuthUnderLogin = _isAuth &&
        state.location != AppPage.login.path &&
        state.location.startsWith(AppPage.login.path);
    if (isAuthUnderLogin) {
      //log('return if isAuthUnderLogin: AppPage.login.path');
      return AppPage.login.path;
    }
    final isPathUnderLogin =
        !_isAuth && state.location.startsWith(AppPage.login.path);
    if (isPathUnderLogin) {
      //log('return if isPathUnderLogin: null');
      return null;
    }

    final isSplash = state.location == AppPage.splash.path;
    if (isSplash) {
      //log('return if isSplash: ${_isAuth ? AppPage.home.path : AppPage.login.path}');
      return _isAuth ? AppPage.home.path : AppPage.login.path;
    }

    final isLoggingIn = state.location == AppPage.login.path;
    if (isLoggingIn) {
      //log('return if isLoggingIn: ${_isAuth ? AppPage.home.path : null}');
      return _isAuth ? AppPage.home.path : null;
    }

    //log('return final: ${_isAuth ? null : AppPage.splash.path}');

    return _isAuth ? null : AppPage.splash.path;
  }

  @override
  void addListener(VoidCallback listener) {
    _routerListener = listener;
  }

  @override
  void removeListener(VoidCallback listener) {
    _routerListener = null;
  }
}

List<RouteBase> routes = [
  GoRoute(
    path: AppPage.splash.path,
    name: AppPage.splash.name,
    builder: (context, state) => SplashPage(
      key: state.pageKey,
    ),
  ),
  GoRoute(
    path: AppPage.login.path,
    name: AppPage.login.name,
    builder: (context, state) => UserLoginPage(
      key: state.pageKey,
    ),
    routes: [
      GoRoute(
        path: AppPage.emailRegister.path,
        name: AppPage.emailRegister.name,
        builder: (context, state) {
          final registerParams = state.extra as EmailParams?;
          if (registerParams == null) {
            throw 'Missing `VerificationPageParams` object';
          }
          return UserEmailRegisterPage(
            registerParams: registerParams,
            key: state.pageKey,
          );
        },
      ),
...

enum AppPage {
  ...
  // Basic Pages
  splash('/', 'splash'),
  login('/login', 'login'),
  emailRegister('emailRegister', 'emailRegister'),
  emailResetPassword('emailResetPassword', 'emailResetPassword'),
  home('/home', 'home'),
  userProfileEdit('userProfileEdit', 'userProfileEdit');

  final String path;
  final String name;
  const AppPage(this.path, this.name);
}

[Maxim-Filimonov]

I'm struggling to figure out how to migrate a simple direct navigation service with go_router to riverpod.
I'd rather not introduce 3 layers of abstraction through listeners but cannot figure out how to go otherwise
We have

class NavigationService {
  NavigationService({
    required this.router,
  });

  final GoRouter router;
}

Which handles all navigation using router instance. The question is how do I provide instantiated instance of it to riverpod?
In current code we do:

final _services = GetIt.instance;
void registerServices({required GoRouter router}) {
  if (!_services.isRegistered<NavigationService>()) {
    _services.registerSingleton<NavigationService>(
      NavigationService(router: router),
    );
  }
}

I want to replace GetIt with riverpod but have no idea how to replicate the same registration of singleton.
What I tried is to create a singletonInstance:

/// This is to push router instance into singleton for riverpod
@riverpod
GoRouter routerInstance(RouterInstanceRef ref, GoRouter router) {
  return router;
}

But as soon as I try to use that instance I'd need to provide router now everywhere. Is there a way to read it without providing a new instance?

[Maxim-Filimonov]

I did found a bit of a hacky way:
Create fake implementation which would return GoRouter

/// This is to push router instance into singleton for riverpod
@riverpod
GoRouter routerInstance(RouterInstanceRef ref) {
  throw UnimplementedError();
}

Override given implementation during init

    child: ProviderScope(
          child: App(appRouter: _router),
          overrides: [
            routerInstanceProvider.overrideWith((provider) => _router)
          ],
        ),

It feels quite hacky but it works 😬
Anybody knows a better way to register a singleton instance with parameter?

[lucavenir]

@Maxim-Filimonov please check the updated repo, as it shows a similar way to handle that, but without overrides.

[Colman]

Does anyone know a good way to use a route's params to initialize the Riverpod state? I would like to do the following:

final args = SomeArguments(id: 6);
context.go(someRoute, extra: args);

Then in the GoRouter I have the following:

GoRoute(
   path: someRoute,
   builder: (context, state) {
      final args = state.extra as SomeArguments;
      return SomeScreen(id: args.id);
   },
)

The problem with this is, the state in my app is very large and complex, and there's a lot of providers used in many widgets that use this id param. Therefore, it's very cumbersome to make a bunch of family providers and pass this parameter everywhere where it's needed. You end up having to pass it as a family param to totally unrelated providers only because that provider relies on another provider that relies on another provider that needs the param. Instead, it would be nice if I could just have a provider for the id.

However, if I do this then where do I initialize this provider? I could do it in initState of SomeScreen, however it would need to be in a postFrameCallback since you can't modify providers directly in initState. This means that the screen will build the first frame with the wrong data.

Another way is to use provider overrides like so:

GoRoute(
   path: someRoute,
   builder: (context, state) {
      final args = state.extra as SomeArguments;
       return ProviderScope(
          overrides: [
             idProvider.overrideWith((ref) => args.id),
          ],
          child: const SomeScreen(),
       );
   },
);

This however creates more problems since every provider that relies on idProvider will now have to be scoped. And every provider that relies on those providers will also have to be scoped and so on. This means that essentially every provider will have to be scoped. Not only does this seem complex and unnecessary but I also had problems with the generator using scoped dependencies.

I've also tried the following:

ref.read(idProvider.notifier).setId(6);
context.go(someRoute);

However, if the go router blocks navigation or redirects to a different page, now the idProvider has the wrong state.

One simplification I noticed in my app is that a route will never appear on the navigation stack twice. Therefore, I can treat idProvider as a singleton. So I shouldn't need to scoping or families. I just don't know where to set its value. Does anyone have any ideas?

[flikkr]

Hi @Colman, did you find a solution to your problem? I am in the same situation as you...

[Colman]

Hey, my current solution is to make a provider for the RouteMatchList object found in the GoRouter object that you pass to the MaterialApp by doing the following:

@Riverpod(keepAlive: true)
class AppRoute extends _$AppRoute {
  AppRoute() {
    _router?.routerDelegate.addListener(ref.invalidateSelf);
  }

  GoRouter? _router;

  @override
  RouteMatchList? build() {
    ref.onDispose(() {
      _router?.routerDelegate.removeListener(ref.invalidateSelf);
    });

    final lastMatch = _router?.routerDelegate.currentConfiguration.last;
    final matchList = lastMatch is ImperativeRouteMatch
        ? lastMatch.matches
        : _router?.routerDelegate.currentConfiguration;

    return matchList;
  }

  void setRouter(GoRouter router) {
    _router = router;
  }

  void go(String location, {Object? extra}) {
    _router?.go(location, extra: extra);
  }

  void push(String location, {Object? extra}) {
    _router?.push(location, extra: extra);
  }

  void pop() {
    _router?.pop();
  }
}

Then in initState of my app.dart I have:

@override
void initState() {
  _appRouter = AppRouter();
  final notifier = ref.read(appRouteProvider.notifier);
  notifier.setRouter(_appRouter.router); //setRouter modifies a variable in the notifier, not the state itself. So you don't need a post frame callback
}

Then, to provide the route args I have a provider like so:

@Riverpod(keepAlive: true)
int? someId(SomeIdRef ref) {
  final appRoute = ref.watch(appRouteProvider);
  if (appRoute?.uri.toString() == someRoute) {
    final args = appRoute!.extra as SomeArguments;
    return args.someId;
  }

  return ref.state; //This might give an error, I still have to fix it. I want to return the previous id if not on "someRoute" so we don't lose the state of the page when we push another one on the stack
}

This approach relies on there being no duplicate routes on your stack. If you:

1. Push "someRoute"
2. Push "someRoute2"
3. Push "someRoute" again
4. Click back twice

You will have to reload all of the providers that depend on "someIdProvider" since you would have overwritten the someId provider on step 3. The page will still show the correct data, but it'll just have to load again. However, with most app UI designs you won't be pushing a route you were previously on, so this shouldn't be an issue.

[joshuadutton]

I wasn't satisfied with anything I've seen with making a router provider and all the extra stuff required to make that work well. Since the redirect method takes a BuildContext, I wanted to see what it would take to implement Auth.of(context) while also working with Riverpod.

A big upside to this approach is that whenever my authUser changes, the InheritedWidget causes it's children that are using Auth.of(context) to rebuild. This includes the router! That means that redirects are automatically triggered by changing auth state. I've done some testing, and this only happens when I expect it to.

I created an issue here with some example code, and I would love feedback lucavenir/go_router_riverpod#36.