url_router 0.2.0+3

url_router: ^0.2.0+3 copied to clipboard

An un-opinionated url-based Router implementation (Navigator 2.0).

late final router = UrlRouter(
  onGeneratePages: (router) => [
    MaterialPage(child: MainView(router.url)),
]);

@override
Widget build(BuildContext context) => MaterialApp.router(
  routeInformationParser: UrlRouteParser(),
  routerDelegate: router,
);

UrlRouter makes no assumptions about your UI layout. How you react to router.url is up to you.

Features #

• Easily read and update the current url and query params
• Supports deep linking, protected urls, and redirects
• Back and forward navigation in browser
• Full control over url to page mapping, wildcards etc

🔨 Installation #

dependencies:
  url_router: ^0.2.0

🕹️ Usage #

• Declare a UrlRouter and implement the onGeneratePages method
• Return a list of Page elements that represent your desired navigator stack
• Implement the optional onChanging and builder delegates

late final router = UrlRouter(
  // The Flutter `Navigator` expects a set of `Page` instances
  onGeneratePages: (router) {
    return [
      // Main view is always present
      MaterialPage(child: MainView()),
      // Settings can sit on top of main view (and can be popped)
      if(router.url == '/settings')... [
         MaterialPage(child: SettingsView()),
      ]
    ];
  },
  // Optional, protect or redirect urls
  onChanging: (router, newUrl) {
    if (authorized == false) return '/';
    return newUrl;
  },
  // Optional, wrap some outer UI around navigator
  builder: (router, navigator) {
    return Row(
      children: [ const SideBar(), Expanded(child: navigator) ],
    );
  },

);

Controlling the url #

UrlRouter offers a small but powerful API to control the url:

Accessing the router #

Access the UrlRouter anywhere in your app, using UrlRouter.of(context), or use the context extensions:

• context.url
• context.urlPush
• context.urlPop
• context.urlRouter

Outer Scaffolding #

You can use the builder delegate to wrap persistent UI around the underlying Navigator widget:

final router = UrlRouter(
    builder: (router, navigator) {
      return Row(
        children: [
          SideBar(),
          Expanded(child: navigator),
        ],
      );
    },

Handling full-screen modals #

When using scaffolding around the Navigator, it is common to want to show dialogs and bottom sheets that sit above that scaffolding.

This is most easily solved by adding a second Navigator, above the one that is handled by the router.

final router = UrlRouter(
    builder: (router, navigator) {
      return Navigator(
        onGenerateRoute: (_) {
          return PageRouteBuilder(
            transitionDuration: Duration.zero,
            pageBuilder: (_, __, ___){
                return AppScaffold(body: navigator);
            },
          );
        });
...

Using custom Navigator(s) #

To provide one or more navigators or sub-routers lower in the widget tree you can ignore the Widget navigator parameter from within the builder delegate.

UrlRouter at this point would be responsible only for reading and writing location, and calling builder whenever it changes.

🐞 Bugs/Requests #

If you encounter any problems please open an issue. If you feel the library is missing a feature, please raise a ticket on Github and we'll look into it. Pull request are welcome.

📃 License #

MIT License