Router Management

A plugin that wraps the Navigator 2.0 with a syntax sugar for Flutter Developers

Getting Started

  • Installing the package with Flutter CLI:

$ flutter pub add router_management

  • Installing the package manually:

Open the pubspec.yaml file, search for dependencies: and write this below:

dependencies:
   router_management: ^2.2.1
   ...

Usage

  1. Create a PageWidget that builds a Router for example:
class App extends PageWidget {
  const App();

  @override
  void onInit(BuildContext context) {
    print('onInit');
    super.onInit(context);
  }

  @override
  void onChangedDependencies(BuildContext context) {
    print('onChangedDependencies');
    super.onChangedDependencies(context);
  }

  @override
  void onDeactivate(BuildContext context) {
    print('onDeactivate');
    super.onDeactivate(context);
  }

  @override
  void onDispose(BuildContext context) {
    print('onDispose');
    super.onDispose(context);
  }

  @override
  Widget build(
     BuildContext context,
     RouteInformationProvider routeInformationProvider,
     RouteInformationParser<Object> routeInformationParser,
     RouterDelegate<Object> routerDelegate) {
   return MaterialApp.router(
     routeInformationProvider: routeInformationProvider,
     routeInformationParser: routeInformationParser,
     routerDelegate: routerDelegate,
     title: 'Router Management Example',
     localizationsDelegates: GlobalMaterialLocalizations.delegates,
    );
  }
}
  1. Create a Widget that represents a page for example:
class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  // Declare the path as constant
  static const path = '/home/:name';

  // Declare the name as constant
  static const name = 'Home';

  @override
  Widget build(BuildContext context) {
    final arguments = context.arguments; // Get the page's arguments

    return Scaffold(
      body: Center(
        child: Text(
          'Welcome ${arguments.params['name']}',
          style: const TextStyle(fontSize: 32, color: Colors.black),
        ),
      ),
    );
  }
}
  1. Implements the NavigationRouter into the void main() method for example:
void main() {
  runApp(NavigationRouter(
    child: const App(), // The PageWidget that builds a Router
    pages: [
      NavigationPage(
        path: SplashScreen.path,
        builder: () => const SplashScreen(),
        name: SplashScreen.name,
      ),
      NavigationPage(
        path: HomeScreen.path,
        builder: () => const HomeScreen(),
        name: HomeScreen.name,
      ),
    ], // The pages
    initialPage: SplashScreen.path,  // The initial page's path. Defaults to "/"
    unknownPage: NavigationPage(
      path: NotFound.path,
      builder: () => const NotFound(),
      name: NotFound.name,
    ), // A page that is built when an unknown path is passed
  ));
}
  1. Use the Navigation instance from NavigationService.instance to controls the Navigator 2.0 with Imperative methods for example:

NavigatorService.instance.pushReplacement('/home/John Doe'); or using Router Management extensions on BuildContext BuildContext.navigator.pushReplacement('/home/John Doe');

  1. To get the path's arguments use the extension on BuildContext for example:
@override
Widget build(BuildContext context) {
  final arguments = context.arguments;
  ...
  1. Keep coding :)

APIS

The Router Management has many APIS to ensure that you can handle the Navigator 2.0

Is the widget core for Navigator 2.0 implementation

  • Props
NameDescriptionRequired
childIs used to build a Router to handle the Navigator 2.0 implementationtrue
pagesIs used to create pages that can be accessed by the Navigator 2.0true
initialPageIs used to render the page that has the same path. If the PageWidget.build returns a router without a RouteInformationProvider it will not work correctly. Defaults to "/"false
navigatorObserversIs used to observe the Navigator 2.0 when navigating between screens. Defaults to List.empty()false
useHashIf it is true then will be used the default url strategy that is a path with hash, for example: flutterexample.dev/#/path/to/screen, else will be flutterexample.dev/path/to/screen. Defaults to falsefalse
restorationScopeIdIs used to save and restore the navigator 2.0 state, if it is null then the state will not be saved. Defaults to nullfalse
unknownPageIs used to create an unknown page with the given path. Defaults to nullfalse
transitionsBuilderIs used to build a global custom animation transition when navigating to another page. Defaults: If the platform is web then will not has any transition else will be nullfalse
  • Static Methods
NameDescription
defaultWebTransitionIs used to get the default web transition that means it does not have any transition when navigating between screens

PageWidget

Is used to create a Router to handle the navigator 2.0. For example into the build we can use the default implementation of MaterialApp.router

  • Methods
NameDescription
onInitIs a shortcut for the method State.initState
onChangedDependenciesIs a shortcut for the method State.didChangeDependencies
onDeactivateIs a shortcut for the method State.deactivate
onDisposeIs a shortcut for the method State.dispose
buildIs used to render a Router that handle the Navigator 2.0.

Is used to create a page into the NavigationRouter

  • Props
NameDescriptionRequired
pathIs the page's path like: /home. To declare a page's param use this pattern "/:param-name" then use the PageArguments.params'param-name' to get the data from the path like: /profile/:idtrue
builderIs used to build the page and create an active pagetrue
fullscreenDialogIs used to create a fullscreen dialog page. Defaults to falsefalse
maintainStateIf it is false the state of the page will be discarded when navigating to another page. Defaults to truefalse
transitionDurationIs used to controls the animation transition. Defaults to Duration(milliseconds: 400)false
validatorsis used to controls the page's activation when it must has more than the basics arguments like an id or something else, if it returns false then the page will be redirect to the initial page or use the Navigation to redirect to another page. Defaults to List.empty()false
restorationIdis used to save and restore the page's state, if it is null then the state will not be saved. Defaults to nullfalse
nameIs used to name the page. Defaults to nullfalse
transitionsBuilderIs used to create a custom transition to the page. Defaults to System's Animation Transitionfalse

Is the core class that is used to get the actual Navigation instance

  • Static Methods
NameDescription
instanceIs the implementation of Navigator 2.0

Is the core navigation interface and is used to controls the Navigator 2.0

  • Methods
NameDescription
pushIs used to navigate to another screen maintaining the previous screen
pushReplacementIs used to navigate to another screen replacing the previous screen
pushAndReplaceUntilIs used to navigate to another screen and replaces the previous screens until the condition returns true
popIs used to navigate back to the previous screen
popAndPushIs used to navigate back to the previous screen and navigate to another screen
popUntilIs used to navigate back until the condition returns true
pushToUnknownPageIs used to navigate to the unknown page
  • Getters
NameDescription
canPopIs used to know when the page can be popped

PageArguments

Is used to get the current page's arguments

  • Props
NameDescription
uriIs used to get the path's data
dataIs used to get the data that can be passed into the Navigation push methods
paramsIs used to get the path's params
pathIs a shortcut from Uri.path to get the current path
pathsIs a shortcut from Uri.pathSegments to get the current paths segments
completePathIs a shortcut from Uri.toString() to get the current complete path
queryIs a shortcut from Uri.queryParameters to get the current query as a Map<String,String> object
queriesIs a shortcut from Uri.queryParametersAll to get the current list of queries as a Map<String,List<String>> object

PageValidator

Can be used to validate any pages with NavigationPage.validators

  • Methods
NameDescription
callIf it returns false then the page cannot be activated and can be used to redirect to another page when it is needed

Extensions

The Router Management has two extensions to maintain a clean code

Is used to get the current Navigation instance on the BuildContext

  • Getters
NameDescription
navigatorIs used to get the current Navigation instance

PageArgumentsExtension

Is used to get the current PageArguments on the BuildContext

  • Getters
NameDescription
argumentsIs used to get the current PageArguments

Libraries

router_management