wouter 0.1.0

Supercharge your routering with wouter, simple yet advanced and fully customizable routing package.

wouter - BETA

Docs WIP

• Features
• Widgets
  • Wouter
  • WouterSwitch
• Concepts
• Example

Supercharge your routing with wouter, simple yet advanced and fully customizable routing package.

Coming from React.js, where navigation is made very easy, Navigator 2.0 seems really complex. Wouter is trying to bring back the easy of use of Navigator 1.0 to Navigator 2.0

Wouter is an implementation of the npm package: wouter

Features:

• Navigator 1.0 like API
• Easy migration from Navigator 1.0
• No boilerplate, no need to build special classes for locations/routes etc...
• Regexp support using path_to_regexp
• Relative paths (push(../../here), replace(../there)) using normalize() from path
• Following everything is a widget, Wouter is a widget and its child is a Widget
• Nested and Parallel (multiple Wouters in a Column or a Row) Wouters
• Base paths
• Flexible navigators (Switch, Row, Column etc...) and easily build your own navigator
• Using const everywhere
• Uses freezed to generate classes

Widgets

Because Wouter follows everything is a widget concept it is easy to include Wouter in your app.

Wouter

Wouter is used to encapsulate a group of paths which has the same base path

const Wouter({
    Key? key,
    required Widget child,
    PathMatcherBuilder matcher = PathMatchers.regexp,
    String base = "",
  })

MyWidget(
  child: Wouter(
    base: "/items",
    child: WouterSwitch(
      routes: {
        "/": (context, arguments) => const MaterialPage(
              key: ValueKey("items")
              child: ItemsScreen(),
            ),
      // matching and parsing id as int, no need to parse id from string to int later
      r"/:id(\d+)": (context, arguments) => MaterialPage(
              key: ValueKey("items-${arguments["id"]}")
              child: ItemProvider(
                id: arguments["id"],
                child: const ItemScreen(),
              )
            ),
      // match anything else to redirect back to items screen
      "/:_(.*)": (context, arguments) => const MaterialPage(
              key: ValueKey("redirect")
              child: Redirect(
                to: "/",
              ),
            ),  
      }
    )
  )
)

WouterSwitch

WouterSwitch is used for switching between a set of routes. Each route is defined by regexp

const WouterSwitch({
    Key? key,
    required Map<String, WouterRouteBuilder<T>> routes,
    List<NavigatorObserver> observers = const [],
    TransitionDelegate<T> transition = const DefaultTransitionDelegate(),
  })

MyWidget(
  child: WouterSwitch(
    routes: {
      "/": (context, arguments) => const MaterialPage(
              key: ValueKey("home")
              child: HomeScreen(),
            ),
      // matching and parsing id as int, no need to parse id from string to int later
      r"/:id(\d+)": (context, arguments) => MaterialPage(
              key: ValueKey("items-${arguments["id"]}")
              child: ItemProvider(
                id: arguments["id"],
                child: const ItemScreen(),
              )
            ),
      // match anything else to redirect back to home
      "/:_(.*)": (context, arguments) => const MaterialPage(
              key: ValueKey("redirect")
              child: Redirect(
                to: "/",
              ),
            ),     
    }
  )
)

Concepts

Wouter is base on single source of truth. There is only one Router at the base of the app (using WidgetsApp.router and RouterDelegate). All children Wouters listen to changes on their parent and reacting to changes of the current route, when there is not change not work is being done. Wouter is using ChangeNotifier to listen and react to changes.

Example

class MyApp extends StatelessWidget {
  final delegate = WouterRouterDelegate(
    child: WouterSwitch(
      routes: {
        "/": (context, arguments) => const MaterialPage(
              key: ValueKey("home")
              child: HomeScreen(),
            ),
        "/people": (context, arguments) => const MaterialPage(
              key: ValueKey("people")
              child: PeopleScreen(),
            ),
        "/:_(.*)": (context, arguments) => const MaterialPage(
              key: ValueKey("redirect")
              child: Redirect(
                to: "/",
              ),
            ),
      },
    ),
  );

  @override
  Widget build(BuildContext context) => MaterialApp.router(
        routerDelegate: delegate,
        routeInformationParser: const WouterRouteInformationParser(),
        backButtonDispatcher: WouterBackButtonDispatcher(
          delegate: delegate,
        ),
      );
}