Navigator 2.0

Go Router

Basic Understanding

GoRouter is a declarative routing package for Flutter that uses the Router API to provide a convenient, url-based API for navigating between different screens. You can define URL patterns, navigate using a URL, handle deep links, and a number of other navigation-related scenarios.

final router = GoRouter(
  routes: [
    GoRoute(
      path: SignUpScreen.routeName,
      builder: (context, state) => const SignUpScreen(),
    ),
    GoRoute(
      path: LoginScreen.routeName,
      builder: (context, state) => const LoginScreen(),
    ),
    GoRoute(
      path: UsernameScreen.routeName,
      builder: (context, state) => const UsernameScreen(),
    ),
    GoRoute(
      path: EmailScreen.routeName,
      builder: (context, state) => const EmailScreen(),
    )
  ],
);

return MaterialApp.router(
  routerConfig: router,
)

void _onLoginTap(BuildContext context) async {
  context.go(LoginScreen.routeName);
}

Parameters

GoRoute(
  path: "/users/:username",
  builder: (context, state) {
    final username = state.params['username'];
    return UserProfileScreen(username: username!);
  },
)

final String username;

const UserProfileScreen({super.key, required this.username});

Query Parameters

GoRoute(
  path: EmailScreen.routeName,
  builder: (context, state) {
    final args = state.extra as EmailScreenArgs;
    return EmailScreen(username: args.username);
  },
),

GoRoute(
  path: "/users/:username",
  builder: (context, state) {
  final username = state.params['username'];
    final tab = state.queryParams["show"];
    return UserProfileScreen(username: username!, tab: tab!);
  },
)

void _onNextTap() {
  if (_username.isEmpty) return;
  context.push(
    EmailScreen.routeName,
    extra: EmailScreenArgs(username: _username),
  );
}

Custom Transition Page

A custom transition page refers to the ability to customize the animation and visual transition when navigating between pages (screens). Flutter is highly flexible and allows you to define your own page transitions if the built-in ones don't meet your needs.

Route createRoute() {
  return PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => YourNewPage(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      const begin = Offset(1.0, 0.0);
      const end = Offset.zero;
      const curve = Curves.easeInOut;
      var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));
      var offsetAnimation = animation.drive(tween);
      
      return SlideTransition(position: offsetAnimation, child: child);
    },
  );
}

Nested Routers

final router = GoRouter(
  routes: [
    GoRoute(
      name: SignUpScreen.routeName,
      path: SignUpScreen.routeURL,
      builder: (context, state) => const SignUpScreen(),
      routes: [
        GoRoute(
          path: UsernameScreen.routeURL,
          name: UsernameScreen.routeName,
          builder: (context, state) => const UsernameScreen(),
          routes: [
            GoRoute(
              name: EmailScreen.routeName,
              path: EmailScreen.routeURL,
              builder: (context, state) {
                final args = state.extra as EmailScreenArgs;
                return EmailScreen(username: args.username);
              },
            ),
          ],
        ),
      ],
    ),