router_management

Description:

router management

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: ^3.1.0
...
copied to clipboard
Usage #

Create a NavigationWidgetMixin that builds a Router for example:

class App extends StatelessWidget with NavigationWidgetMixin {
App({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return MaterialApp.router(
routeInformationParser: routeInformationParser,
routerDelegate: routerDelegate,
title: 'Router Management Example',
localizationsDelegates: GlobalMaterialLocalizations.delegates,
);
}
}
copied to clipboard

Or

class App extends StatefulWidget with NavigationWidgetMixin {
App({Key? key}) : super(key: key);

@override
_AppState createState() => _AppState();
}

class _AppState extends State<App> {
@override
Widget build(BuildContext context) {
return MaterialApp.router(
routeInformationParser: widget.routeInformationParser,
routerDelegate: widget.routerDelegate,
title: 'Router Management Example',
localizationsDelegates: GlobalMaterialLocalizations.delegates,
);
}
}
copied to clipboard

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),
),
),
);
}
}
copied to clipboard

Implements the NavigationRouter into the void main() method for example:

void main() {
runApp(NavigationRouter(
child: App(), // The NavigationWidgetMixin 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
));
}
copied to clipboard

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');


To get the path's arguments use the extension on BuildContext for example:

@override
Widget build(BuildContext context) {
final arguments = context.arguments;
...
copied to clipboard

Keep coding :)

APIS #
The Router Management has many APIS to ensure that you can handle the Navigator 2.0
NavigationRouter
Is the widget core for Navigator 2.0 implementation

Props




Name
Description
Required




child
Is used to build a Router to handle the Navigator 2.0 implementation
true


pages
Is used to create pages that can be accessed by the Navigator 2.0
true


initialPage
Is 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


navigatorObservers
Is used to observe the Navigator 2.0 when navigating between screens. Defaults to List.empty()
false


useHash
If 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 false
false


restorationScopeId
Is used to save and restore the navigator 2.0 state, if it is null then the state will not be saved. Defaults to null
false


unknownPage
Is used to create an unknown page with the given path. Defaults to null
false


transitionDuration
Is used to controls the animation transition. Defaults to Duration(milliseconds: 400)
false


transitionsBuilder
Is 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 null
false




Static Methods




Name
Description




defaultWebTransition
Is used to get the default web transition that means it does not have any transition when navigating between screens



NavigationRouterGuard
Is used to validate the page, if the page can't be activated, then will be redirected to another
page.

Props




Name
Description
Required




child
Is used to build the page when it can be activated
true


validation
Is used to process if the page can be activated or not
true


placeholder
Is used to build a placeholder while is activating. Defaults to SizedBox.shrink()



pathToRedirectOnInvalidate
Is used to redirect to a page when redirectToUnknownPageOnInvalidate is false or if was not set an unknown page in the NavigationRouter. Defaults to "/"
false


redirectToUnknownPageOnInvalidate
Is used to redirect to the unknown page, if it was not set or the value is false, then will be redirect using pathToRedirectOnInvalidate. Defaults to true
false



NavigationPage
Is used to create a page into the NavigationRouter

Props




Name
Description
Required




path
Is 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/:id
true


builder
Is used to build the page and create an active page
true


fullscreenDialog
Is used to create a fullscreen dialog page. Defaults to false
false


maintainState
If it is false the state of the page will be discarded when navigating to another page. Defaults to true
false


transitionDuration
Is used to controls the animation transition. Defaults to NavigationRouter.transitionDuration
false


validators
is 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


restorationId
is used to save and restore the page's state, if it is null then the state will not be saved. Defaults to null
false


name
Is used to name the page. Defaults to null
false


transitionsBuilder
Is used to create a custom transition to the page. Defaults to System's Animation Transition
false



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

Static Methods




Name
Description




instance
Is the implementation of Navigator 2.0



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

Methods




Name
Description




push
Is used to navigate to another screen maintaining the previous screen


pushReplacement
Is used to navigate to another screen replacing the previous screen


pushAndReplaceUntil
Is used to navigate to another screen and replaces the previous screens until the condition returns true


pop
Is used to navigate back to the previous screen


popAndPush
Is used to navigate back to the previous screen and navigate to another screen


popUntil
Is used to navigate back until the condition returns true


pushToUnknownPage
Is used to navigate to the unknown page




Getters




Name
Description




canPop
Is used to know when the page can be popped



PageArguments
Is used to get the current page's arguments

Props




Name
Description




uri
Is used to get the path's data


data
Is used to get the data that can be passed into the Navigation push methods


params
Is used to get the path's params


path
Is a shortcut from Uri.path to get the current path


paths
Is a shortcut from Uri.pathSegments to get the current paths segments


completePath
Is a shortcut from Uri.toString() to get the current complete path


query
Is a shortcut from Uri.queryParameters to get the current query as a Map<String,String> object


queries
Is a shortcut from Uri.queryParametersAll to get the current list of queries as a Map<String,List<String>> object



Extensions #
The Router Management has two extensions to maintain a clean code
NavigationExtension
Is used to get the current Navigation instance on the BuildContext

Getters




Name
Description




navigator
Is used to get the current Navigation instance



PageArgumentsExtension
Is used to get the current PageArguments on the BuildContext

Getters




Name
Description




arguments
Is used to get the current PageArguments