Learn

Learn Ark Navigation

Start with a working Flutter router, then add typed routes, exact stack operations, policies, links, tabs, and restoration one feature at a time.

v1.1.0Beginner

Learn Ark Navigation by building with it

You do not need to understand the whole architecture before opening a page. Start with three objects:

dart
// 1. Feature code describes where it wants to go.
final class ProductDestination extends NavigationDestination<bool> {
  const ProductDestination(this.id);
  final String id;
}

// 2. App composition connects that request to Flutter UI and a URL.
final productRoute = NavigationRouteDefinition<ProductDestination, bool>(
  id: const NavigationRouteId('product'),
  pageBuilder: (context, destination, entry) => ProductPage(id: destination.id),
  uriCodec: CallbackNavigationUriCodec<ProductDestination>(
    pattern: '/products/:id',
    encoder: (destination) => Uri(path: '/products/${destination.id}'),
    decoder: (match) => ProductDestination(match.path('id')),
  ),
);

// 3. A page requests an exact stack operation.
final ticket = context.readNavigation.push<bool>(
  const ProductDestination('keyboard-42'),
);

Destination is typed application intent. RouteDefinition is the Flutter adapter. NavigationPort changes a stack. Everything else exists to compose these three ideas for real applications.

Choose your path

Your goalStart here
Run a small application nowTutorials → First typed route
Decide whether the package fits your projectDestinations and routes, then Stack operations
Add authenticationTutorials → Authentication and access
Build retained tabsTutorials → Modular tabs
Replace go_router or auto_routeMigration
Solve one known problemRecipes

What the package changes

With Ark Navigation you write route contracts directly in Dart. There is no route generator and no raw extra map. Feature code can compile as soon as its Destination exists. The application decides later where that Destination is mounted and which page renders it.

Operations say exactly what happens to the stack: push, replaceTop, replaceAll, pushAndRemoveUntil, replaceTail, popUntil, and branch operations are different methods. A generic go() does not choose stack behavior for you.

Decide whether it fits before migrating

Choose Ark Navigation when your application needs typed route parameters without generation, several independently owned Navigator stacks, feature Modules mounted differently by multiple apps, separate Redirect and Guard behavior, or stack rewrites whose Back result must be visible at the call site.

Keep Navigator or choose a mature URL router when the application has a small static route table, conventional deep links, and no need for explicit module placement or dynamic Graph updates. Ark Navigation 1.x has a smaller integration ecosystem than older routing packages, so confirm that its explicit contracts solve problems your application actually has.

What to learn, in order

  1. Destinations and routes — define one typed request and render it.
  2. Stack operations — choose the method that produces the Back behavior you want.
  3. Redirects and Guards — redirect to Login or reject access without mixing the two.
  4. URIs and links — encode typed fields and restore a parent stack.
  5. Modules and nested navigation — compose features and keep tab stacks alive.
  6. Runtime and restoration — own the Session, browser history, and dynamic Graph safely.

Architecture is explained after the first working flow, not as a prerequisite.