Understanding Flutter GoRouter for Beginners

What is GoRouter?

GoRouter is a powerful and flexible routing package for Flutter, developed by the Flutter team. It makes navigation in Flutter apps easier by providing a simple, declarative way to define routes and handle navigation. Unlike Flutter's default Navigator (which can be a bit complex for beginners), GoRouter uses a URL-based approach, similar to how websites work, making it intuitive and scalable.

Why Use GoRouter?

• Simple Syntax: GoRouter lets you define routes using easy-to-understand code.
• URL-Based Navigation: It supports web-like URLs (e.g., /home or /profile/123), which is great for web apps and deep linking.
• Nested Routes: You can create nested navigation (like tabs or subtabs) easily.
• Parameter Support: Pass data like IDs (e.g., /product/42) directly in the URL.
• Redirects: Handle navigation logic, like redirecting users to a login page if they're not signed in.
• Beginner-Friendly: It reduces the complexity of managing navigation stacks.

Setting Up GoRouter

Let’s walk through how to set up and use GoRouter in a Flutter app. We’ll create a simple app with two screens: a Home screen and a Profile screen.

Step 1: Add GoRouter to Your Project

First, you need to add the go_router package to your Flutter project. Open your pubspec.yaml file and add the following dependency:

dependencies:
  go_router: ^16.2.1

Then, run flutter pub get in your terminal to install the package. (Note: The version number might change, so check pub.dev for the latest version.)

Step 2: Create Your Screens

Let’s create two simple screens for our app: HomeScreen and ProfileScreen.

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('Welcome to the Home Screen!'),
            ElevatedButton(
              onPressed: () {
                // We'll navigate to the Profile screen later
              },
              child: const Text('Go to Profile'),
            ),
          ],
        ),
      ),
    );
  }
}

class ProfileScreen extends StatelessWidget {
  final String? userId; // Optional parameter for user ID
  const ProfileScreen({super.key, this.userId});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Profile')),
      body: Center(
        child: Text('Profile Screen${userId != null ? ' for User $userId' : ''}'),
      ),
    );
  }
}

Step 3: Set Up GoRouter

Now, let’s configure GoRouter to handle navigation between these screens. In your main.dart, set up the router and define the routes.

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'home_screen.dart';
import 'profile_screen.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  MyApp({super.key});

  // Define the GoRouter configuration
  final GoRouter _router = GoRouter(
    routes: [
      GoRoute(
        path: '/', // Root route (Home screen)
        builder: (context, state) => const HomeScreen(),
      ),
      GoRoute(
        path: '/profile/:userId', // Profile route with a parameter
        builder: (context, state) {
          final userId = state.pathParameters['userId'];
          return ProfileScreen(userId: userId);
        },
      ),
    ],
  );

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'Flutter GoRouter Demo',
      routerConfig: _router, // Use GoRouter for navigation
    );
  }
}

Explanation of the Code

• GoRouter Configuration: We create a GoRouter instance and define two routes:
  • /: The root route, which shows the HomeScreen.
  • /profile/:userId: A route for the ProfileScreen with a dynamic userId parameter (e.g., /profile/123).
• MaterialApp.router: Instead of the usual MaterialApp, we use MaterialApp.router to integrate GoRouter.
• Path Parameters: The :userId in /profile/:userId allows us to pass dynamic data, like a user ID, to the ProfileScreen.

Step 4: Add Navigation

Let’s update the HomeScreen to navigate to the ProfileScreen when the button is pressed. Modify the ElevatedButton in HomeScreen:

ElevatedButton(
  onPressed: () {
    context.go('/profile/123'); // Navigate to Profile with userId 123
  },
  child: const Text('Go to Profile'),
)

Here, context.go('/profile/123') tells GoRouter to navigate to the /profile/123 route, passing 123 as the userId.

Step 5: Run the App

Run your app using flutter run. You should see:

• The Home screen with a button.
• Clicking the button takes you to the Profile screen, displaying “Profile Screen for User 123”.

Key GoRouter Features for Beginners

1. Navigating Between Screens

Use context.go() to navigate to a new route. For example:

context.go('/profile/456'); // Navigates to ProfileScreen with userId 456

2. Going Back

To go back to the previous screen, use:

context.pop();

Add a back button to the ProfileScreen’s body:

ElevatedButton(
  onPressed: () {
    context.pop();
  },
  child: const Text('Go Back'),
)

3. Passing Parameters

You’ve already seen how to pass a userId in the route (/profile/:userId). You can access it in the builder using state.pathParameters['userId'].

4. Nested Routes

If your app has nested navigation (e.g., a dashboard with tabs), you can define subroutes. For example:

GoRoute(
  path: '/dashboard',
  builder: (context, state) => const DashboardScreen(),
  routes: [
    GoRoute(
      path: 'settings',
      builder: (context, state) => const SettingsScreen(),
    ),
  ],
)

Now, /dashboard/settings will show the SettingsScreen as a subroute of the DashboardScreen.

5. Redirects

You can redirect users based on conditions, like sending them to a login page if they’re not authenticated:

final GoRouter _router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => const HomeScreen(),
    ),
  ],
  redirect: (context, state) {
    bool isLoggedIn = false; // Replace with your auth logic
    if (!isLoggedIn && state.uri.toString() != '/login') {
      return '/login';
    }
    return null; // No redirect
  },
);

Tips for Beginners

• Start Simple: Begin with basic routes like we did above before exploring nested routes or redirects.
• Use Descriptive Paths: Make your route paths clear, like /home or /profile, to keep your code readable.
• Test Navigation: Always test your routes to ensure they work as expected, especially when passing parameters.
• Read the Docs: The GoRouter documentation is beginner-friendly and has more examples.

Try experimenting with more routes or adding redirects to enhance your app. Happy coding!