navigation for riverpod
managing flutter navigation with riverpod.
usage
bootstrap
replace your root providerscope
with a riverpodnavigation
widget with your routing hierarchy and give the provided delegate
and parser
to your materialapp.router
factory.
final routes = routedefinition(
template: uritemplate.parse('/'),
builder: (context, entry) => materialpage(
child: homelayout(),
),
next: [
routedefinition(
template: uritemplate.parse('/articles/:id'),
builder: (context, entry) => materialpage(
child: articlelayout(
id: entry.parameters['id']!,
),
),
),
],
);
return riverpodnavigation( // replaces your root providerscope
routes: routes,
builder: (context, delegate, parser) => materialapp.router(
title: 'flutter demo',
routerdelegate: delegate,
routeinformationparser: parser,
),
);
navigate
from a provider
a navigationprovider
is exposed and can be used to read the current navigation state.
to access the underlying notifier that allows various actions, use the navigationprovider.notifier
provider.
final myprovider = provider<mystate>((ref) {
final navigation = ref.watch(navigationprovider.notifier);
return mystate(
navigatetoarticles: () {
navigation.navigate(uri.parse('/articles'))
},
pop: () {
navigation.pop();
}
);
},
);
from a buildcontext
the notifier can be accessed with the navigation
extension method from the buildcontext
.
@override
widget build(buildcontext context) {
return textbutton(
child: text('articles'),
onpressed: () {
context.navigation.navigate(uri.parse('/articles'))
}
);
}
pop behaviour
to customize the behaviour of pops when navigating back, a popbehavior
callback can be provided to the riverpodnavigation
instance. the result indicates whether the current pop action should be updated, cancelled or auto (default behavior which simply replace the route with the parent one).
riverpodnavigation(
popbehaviour: (notifier, stack) {
if (stack.lastroute?.key == key('share-article')) {
return popresult.update(uri.parse('/'));
}
return popresult.auto();
},
// ...
)
uri rewriting
the uri can be modified before they are processed by the router with the urirewriter
property. this can be useful for redirecting or normalizing uris.
riverpodnavigation(
urirewriter: (notifier, uri) {
if (uri == uri.parse('/home')) {
return uri.parse('/');
}
const publicprefix = 'https://example.com';
final stringuri = uri.tostring();
if (stringuri.startswith(publicprefix)) {
return uri.parse(stringuri.substring(publicprefix.length);
}
return uri;
},
// ...
);
Comments are closed.