duck_router 6.0.0 copy "duck_router: ^6.0.0" to clipboard
duck_router: ^6.0.0 copied to clipboard

Intent-based router for Flutter, supporting deep linking, nesting and more.

duck_router #

Badge

A powerful intent-based router for Flutter, inspired by production-grade architectures in the mobile domain.

See also: https://onsi.com/blog/app-navigation-at-scale-introducing-duckrouter

Features #

DuckRouter aims to be a router that just works.

  • Intent-based Navigation: Make routing less error prone by defining routes as intents
  • Interceptors: Add pre-navigation logic, perfect for authentication flows or feature flags.
  • Type-safe: Leverage Dart's type system for safer routing.
  • Dynamic routing registry: Routes do not need to be initialised before navigating to them, avoiding tricky bugs.
  • Deeplinking: Adding deeplinking support is trivial, and works reliably.
  • Nested Navigation Support: Easily support complex navigation scenarios.

Usage #

1. Define Your Locations #

Create locations (route classes) for each destination in your app. Add as many properties to the class as needed, with any type needed:

class HomeLocation extends Location {
  const HomeLocation() : super(path: 'home');

  @override
  LocationBuilder get builder => (context) => const HomeScreen();
}

class Page1Location extends Location {
  const Page1Location(this.money) : super(path: 'page1');

  final Money money; // Or any other type

  @override
  LocationBuilder get builder => (context) => const Page1Screen(money);
}

2. Create Interceptors #

If wanted, create interceptors to redirect users.

class AuthInterceptor extends LocationInterceptor {
  @override
  Location? execute(Location to, Location? from) {
    if (!loggedIn) {
      return const LoginLocation();
    }
    return null;
  }
}

3. Set Up the Router #

Add the router to your app:

    final router = DuckRouter(initialLocation: ...);
    return MaterialApp.router(
      ...
      routerConfig: router,
    );

4. Navigate #

Now you can navigate:

DuckRouter.of(context).navigate(to: const Page1Location(money));

Further documentation #