4 Best Flutter Route and Navigator Libraries

Google has introduced Navigator 2.0, the latest version of Flutter’s official router and navigation. Its API adds new classes to the framework in order to make the app’s screens a function of the app state and to provide the ability to parse routes from the underlying platform (like web URLs).

Navigator 2.0 is kind of complex. If you want to choose simpler routing libraries, here are they.

go_router

GoRouter is a declarative routing package for Flutter that makes navigating between different screens easy and convenient. It uses the Router API to parse path and query parameters using a template syntax, displays multiple screens for a destination (sub-routes), redirects users based on application state, and supports multiple Navigators. It is compatible with both Material and Cupertino apps and is backward-compatible with the Navigator API.

final GoRouter _router = GoRouter(
  routes: <RouteBase>[
    GoRoute(
      path: '/',
      builder: (BuildContext context, GoRouterState state) {
        return const HomeScreen();
      },
      routes: <RouteBase>[
        GoRoute(
          path: 'details',
          builder: (BuildContext context, GoRouterState state) {
            return const DetailsScreen();
          },
        ),
      ],
    ),
  ],
);

auto_route 

AutoRoute is a declarative routing solution, where everything needed for navigation is automatically generated for you.

This is currently the best solution for deep linking in an app.

AutoRouter.of(context).push(BooksListPageRoute())
// or you can use the extension
context.router.push(BooksListPageRoute())

fluro

Fluro is a beloved Flutter routing library. It adds flexible routing options like wildcards, named parameters, and clear route definitions.

final router = FluroRouter();

//define routes with params
var usersHandler = Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) {
  return UsersScreen(params["id"][0]);
});
void defineRoutes(FluroRouter router) {
  router.define("/users/:id", handler: usersHandler, transitionType: TransitionType.inFromLeft);
}


//navigator
router.navigateTo(context, "/users/1", transition: TransitionType.fadeIn);

sailor

sailor is another Flutter package for easy navigation management. It also supports parameter passing.

// Createa a route class
class Routes {
  static final sailor = Sailor();

  static void createRoutes() {
    sailor.addRoute(SailorRoute(
        name: "/color",
        builder: (context, args, params) {
          return ColorPage();
        },
      ));
  }
}
//navigate to defined route
Routes.sailor("/color");