injectNavigator static method
Injecting a Navigator 2 that holds a RouteData state.
final myNavigator = RM.injectNavigator(
routes: {
'/': (RouteData data) => HomePage(),
'/page1': (RouteData data) => Page1(),
},
);
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp.router(
routeInformationParser: myNavigator.routeInformationParser,
routerDelegate: myNavigator.routerDelegate,
);
}
}
See also RouteData and RouteWidget
Parameters:
routes: Required Map<String, Widget Function(RouteData data)>.
A map of route names and a callbacks that return the corresponding widget. The callback exposes a RouteData object. RouteData objects holds information about routing data such as RouteData.location, RouteData.path, RouteData.pathParams and RouteData.queryParams.
Example:
final myNavigator = RM.injectNavigator(
routes: {
'/': (RouteData data) => Home(),
// redirect all paths that starts with '/home' to '/' path
'/home/*': (RouteData data) => data.redirectTo('/'),
'/page1': (RouteData data) => Page1(),
'/page1/page11': (RouteData data) => Page11(),
'/page2/:id': (RouteData data) {
// Extract path parameters from dynamic links
final id = data.pathParams['id'];
// OR inside Page2 you can use `context.routeData.pathParams['id']`
return Page2(id: id);
},
'/page3/:kind(all|popular|favorite)': (RouteData data) {
// Use custom regular expression
final kind = data.pathParams['kind'];
return Page3(kind: kind);
},
'/page4': (RouteData data) {
// Extract query parameters from links
// Ex link is `/page4?age=4`
final age = data.queryParams['age'];
// OR inside Page4 you can use `context.routeData.queryParams['age']`
return Page4(age: age);
},
// Using sub routes
'/page5': (RouteData data) => RouteWidget(
builder: (Widget routerOutlet) {
return MyParentWidget(
child: routerOutlet;
// OR inside MyParentWidget you can use `context.routerOutlet`
)
},
routes: {
'/': (RouteData data) => Page5(),
'/page51': (RouteData data) => Page51(),
},
),
},
);
initialLocation: Optional String. Defaults to '/'.
The initial location the app route to when first starts.
unknownRoute: Optional callback that exposes the location to navigate to.
Define the widgets to display if the location can not be resolved to known route.
builder: Optional callback that exposes the router outlet widget.
Used to display the matched widget inside another widget.
In the following example, all pages will be rendered inside Padding widget.
final myNavigator = RM.injectNavigator(
builder: (routerOutlet) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: routerOutlet,
);
},
routes: {
'/': (RouteData data) => Home(),
'/page1': (RouteData data) => Page1(),
},
);
pageBuilder: Optional callback that exposes MaterialPageArgument object.
By default, app pages are wrapped with MaterialPage widget. If you want to get more options, you can define your implementation.
pageBuilder: (MaterialPageArgument arg) {
return MaterialPage(
key: arg.key,
child: arg.child,
);
},
shouldUseCupertinoPage: Optional callback that exposes MaterialPageArgument object.
By default, app pages are wrapped with MaterialPage widget. If you want to
use CupertinoPage instead, set shouldUseCupertinoPage to true.
You can use pageBuilder for more customization.
transitionsBuilder: Optional callback.
Define the page transition animation. You can use predefined transition using RM.transitions or just define yours.
The animation transition defined here are global and will be used for each page transition. You can override this default behavior for a particular route using RouteWidget.transitionsBuilder.
You can also define a particular page transition animation for a single navigation call:
myNavigator.to('/page1', transitionsBuilder: RM.transitions.rightToLeft())
onNavigate: Optional callback that exposes RouteData object.
Callback fired after a location is resolved and just before navigation.
It can be used for route guarding and global redirection.
Example:
final myNavigator = RM.injectNavigator(
onNavigate: (RouteData data) {
final toLocation = data.location;
if (toLocation == '/homePage' && userIsNotSigned) {
return data.redirectTo('/signInPage');
}
if (toLocation == '/signInPage' && userIsSigned) {
return data.redirectTo('/homePage');
}
//You can also check query or path parameters
if (data.queryParams['userId'] == '1') {
return data.redirectTo('/superUserPage');
}
},
routes: {
'/signInPage': (RouteData data) => SignInPage(),
'/homePage': (RouteData data) => HomePage(),
},
);
onNavigateBack: Optional callback that exposes RouteData object.
Called when the route is popping back. It can be used to prevent leaving a page if returns false value.
Example:
final myNavigator = RM.injectNavigator(
onNavigateBack: (RouteData data) {
final backFrom = data.location;
if (backFrom == '/SingInFormPage' && formIsNotSaved) {
RM.navigate.toDialog(
AlertDialog(
content: Text('The form is not saved yet! Do you want to exit?'),
actions: [
ElevatedButton(
onPressed: () => RM.navigate.forceBack(),
child: Text('Yes'),
),
ElevatedButton(
onPressed: () => RM.navigate.back(),
child: Text('No'),
),
],
),
);
return false;
}
},
routes: {
'/SingInFormPage': (RouteData data) => SingInFormPage(),
'/homePage': (RouteData data) => HomePage(),
},
);
navigatorObservers: Optional List<NavigatorObserver>
A lost of NavigatorObserver for this navigator
debugPrintWhenRouted: Optional bool. Defaults to false
Print log a debug message when the state of the navigator is changed.
Implementation
static InjectedNavigator injectNavigator({
//ORDER OF routes is important (/signin, /) home is not used even if skipHome slash is false
required Map<String, Widget Function(RouteData data)> routes,
String? initialLocation,
Widget Function(RouteData data)? unknownRoute,
Widget Function(Widget routerOutlet)? builder,
Page<dynamic> Function(MaterialPageArgument arg)? pageBuilder,
bool shouldUseCupertinoPage = false,
Widget Function(
BuildContext context,
Animation<double> animation,
Animation<double> secondAnimation,
Widget child,
)? transitionsBuilder,
Duration? transitionDuration,
Redirect? Function(RouteData data)? onNavigate,
bool? Function(RouteData? data)? onNavigateBack,
bool debugPrintWhenRouted = false,
bool ignoreUnknownRoutes = false,
List<NavigatorObserver> navigatorObservers = const <NavigatorObserver>[],
}) {
return createNavigator(
routes: routes,
unknownRoute: unknownRoute,
transitionsBuilder: transitionsBuilder,
transitionDuration: transitionDuration,
builder: builder,
initialLocation: initialLocation,
shouldUseCupertinoPage: shouldUseCupertinoPage,
onNavigate: onNavigate,
debugPrintWhenRouted: debugPrintWhenRouted,
pageBuilder: pageBuilder,
onNavigateBack: onNavigateBack,
ignoreUnknownRoutes: ignoreUnknownRoutes,
navigatorObservers: navigatorObservers,
);
}