GoRouter: The Ideal Solution for Managing Complex Navigation in Flutter.

Simplifying navigation in Flutter applications isn’t just about ease of use; it’s about enhancing the user experience, ensuring seamless transitions, and empowering developers with a structured approach to route management. With GoRouter, you unlock the potential for intuitive navigation that elevates your app’s performance and usability.

Part 1: Introduction to GoRouter in Flutter

Welcome to the tutorial on GoRouter! If you often find it challenging to manage routes in your Flutter application, you are not alone. GoRouter offers an innovative solution that simplifies navigation and provides advantages over Flutter’s built-in navigation.

With GoRouter, you can effortlessly manage authentication status, support deep linking, and implement nested navigation without complications. Imagine a smoother user experience and cleaner code — all of this can be achieved with GoRouter!

Ready to transform the way you manage navigation in Flutter? Let’s get started!

What is GoRouter?

GoRouter is a navigation package designed to simplify route management in Flutter applications. It offers a more structured approach to handling navigation between pages and provides functionalities such as deep linking and user authentication status management in a more intuitive manner.

Why Use GoRouter?

• Clear Structure: GoRouter provides a more organized approach to defining and managing routes, making it easier for developers to read and understand the navigation flow of the application.
• Authentication Status Management: GoRouter enables route management based on the user’s authentication status, allowing the application to dynamically redirect users to the appropriate pages, such as login or main pages.
• Deep Linking: This feature allows users to open the application directly to a specific page via a URL, enhancing user experience, especially when sharing content.

Part 2: Installing GoRouter

Installation Steps

1. Open the pubspec.yaml file in your Flutter project.
2. Add the GoRouter dependency:

dependencies:
  go_router: ^14.3.0
//Ensure that you check for the latest version of GoRouter on pub.dev.

3. Run the following command in your terminal to install the new dependency:

flutter pub get

Part 3: Using GoRouter

Basic Code Example with GoRouter

Let’s create a simple application that uses GoRouter. This application will have three pages: Login, Home, and Detail.

Here’s a basic example to get you started:

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

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

class MyApp extends StatelessWidget {
  final GoRouter _router = GoRouter(
    initialLocation: '/', //Initial Page
    routes: [
      GoRoute(
        path: '/',
        builder: (context, state) => LoginScreen(),
      ),
      GoRoute(
        path: '/home',
        builder: (context, state) => HomeScreen(),
      ),
      GoRoute(
        path: '/detail',
        builder: (context, state) => DetailScreen(),
      ),
    ],
  );

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'GoRouter Demo',
      routerDelegate: _router.routerDelegate,
      routeInformationParser: _router.routeInformationParser,
    );
  }
}

// Login Page
class LoginScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Login')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // Navigasi ke Home
            context.go('/home');
          },
          child: Text('Login'),
        ),
      ),
    );
  }
}

// Home Page
class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // Navigasi ke Detail
            context.go('/detail');
          },
          child: Text('Go to Detail'),
        ),
      ),
    );
  }
}

// Detail Page
class DetailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Detail')),
      body: Center(
        child: Text('This is the Detail Screen'),
      ),
    );
  }
}

Code Breakdown

• Imports: The necessary packages are imported: flutter/material.dart is used for Flutter widgets, while go_router/go_router.dart is utilized for navigation.
• main() Function: The runApp(MyApp()) function is called to launch the application.
• MyApp Class: This class inherits from StatelessWidget. It creates a GoRouter object to define the available routes. The initialLocation: '/' specifies that the initial page of the application is the LoginScreen.
• Routes:GoRoute is used to define the routes based on the path and the builder that generates the widget.Routes are defined for the login page ('/'), home page ('/home'), and detail page ('/detail').
• LoginScreen Class: This class displays the login page with a button. When the button is pressed, the application navigates to the home page using context.go('/home').
• HomeScreen Class: This class represents the home page, which features a button that navigates to the detail page. It uses context.go('/detail') to switch to the detail page.
• DetailScreen Class: This class displays the detail page with simple text.

Part 4: Case Study

Case Study 1: Authentication Status Management

In this case study, we will manage the user authentication status and redirect users based on that status. Let’s add an AuthProvider to handle the authentication logic.

Here’s an example implementation:

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:provider/provider.dart';

class AuthProvider with ChangeNotifier {
  bool _isLoggedIn = false;

  bool get isLoggedIn => _isLoggedIn;

  void login() {
    _isLoggedIn = true;
    notifyListeners();
  }

  void logout() {
    _isLoggedIn = false;
    notifyListeners();
  }
}

//Update MyApp to Use AuthProvider.
class MyApp extends StatelessWidget {
  final GoRouter _router = GoRouter(
    initialLocation: '/',
    routes: [
      GoRoute(
        path: '/',
        builder: (context, state) {
          final authProvider = Provider.of<AuthProvider>(context);
          return authProvider.isLoggedIn ? HomeScreen() : LoginScreen();
        },
      ),
      GoRoute(
        path: '/home',
        builder: (context, state) => HomeScreen(),
      ),
    ],
  );

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => AuthProvider(),
      child: MaterialApp.router(
        title: 'GoRouter Demo',
        routerDelegate: _router.routerDelegate,
        routeInformationParser: _router.routeInformationParser,
      ),
    );
  }
}

Code Explanation:

• AuthProvider : This class manages the user’s login status with the property _isAuthenticated. It includes the login() and logout() methods to change the login status and notify listeners about the change.
• Using AuthProvider in MyApp: When defining the route for '/', we check whether the user is logged in. If the user is authenticated, they are redirected to the HomePage; if not, they are directed to the LoginPage.

Case Study 2: Nested Navigation

Description

When an application has more complex pages with subpages, nested navigation can be used to improve user experience in navigating the app. For instance, a settings application may have sections for profile settings and privacy settings.

GoRoute(
  path: '/settings',
  builder: (context, state) => SettingsScreen(),
  routes: [
    GoRoute(
      path: 'profile',
      builder: (context, state) => ProfileSettingsScreen(),
    ),
    GoRoute(
      path: 'privacy',
      builder: (context, state) => PrivacySettingsScreen(),
    ),
  ],
)

Explanation

• Main Route: A GoRoute with the path /settings serves as the main settings page.
• Subpages: By using nested routes, subpages for profile and privacy can be defined, allowing users to easily navigate to /settings/profile or /settings/privacy.

Case Study 3: Passing Parameters Between Pages
Description

Sometimes, you need to pass data or parameters from one page to another. GoRouter simplifies managing these parameters.

Implementation

For example, if we want to send a user ID from a user list page to a user detail page, GoRouter makes it straightforward.

GoRoute(
  path: '/users',
  builder: (context, state) => UserListScreen(),
),
GoRoute(
  path: '/users/:userId',
  builder: (context, state) {
    final userId = state.params['userId'];
    return UserDetailScreen(userId: userId!);
  },
)

Explanation

• Using Parameters: In the user detail route, we can use state.params['userId'] to retrieve the parameter from the URL.
• Navigating to the Detail Page:

context.go('/users/${user.id}');

This allows us to navigate to the user detail page with a specific user ID.

Case Study 4: Deep Linking

Description

Deep linking allows users to open the app directly to a specific page from an external URL, such as from an email or notification. GoRouter has built-in support for this feature.

Implementation

For example, if you want users to access a specific article detail page through a URL like /articles/:articleId, you can define the route with GoRouter as follows:

GoRoute(
  path: '/article/:articleId',
  builder: (context, state) {
    final articleId = state.params['articleId'];
    return ArticleDetailScreen(articleId: articleId!);
  },
)

Explanation

• Route Definition: By defining a route with the parameter :articleId, you can handle links that direct users to a specific article.
• Using Deep Linking: When a user clicks a link like yourapp://article/123, GoRouter automatically opens the app to the ArticleDetailScreen with the article ID 123.

Case Study 5: Handling Notifications and Status Changes

Description

We want to navigate users to a specific page when they receive a notification, such as when there is a new update.

Implementation

You can use GoRouter to handle navigation when receiving notifications. For instance, you can set up a method to handle incoming notifications and navigate accordingly:

void handleNotification(String route) {
  context.go(route);
}

Explanation

• Notification Function: You can call handleNotification('/home') when a user receives a notification to direct them to the relevant page.
• Integration with Backend: By integrating this with your backend, you can send notifications that guide users to specific pages based on the context, ensuring that they receive timely and pertinent information.

Case Study 6: Using Guards for Route Security

Description

You may want to protect certain routes to ensure that only authenticated users can access them. This can be achieved by using guards.

Implementation

final GoRouter _router = GoRouter(
  initialLocation: '/',
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => LoginScreen(),
    ),
    GoRoute(
      path: '/dashboard',
      builder: (context, state) => DashboardScreen(),
      //Using the guard.
      redirect: (state) {
        final isAuthenticated = Provider.of<AuthProvider>(context, listen: false).isLoggedIn;
        return isAuthenticated ? null : '/';
      },
    ),
  ],
);

Explanation

• Redirect: On the /dashboard route, we check whether the user is authenticated. If not, the user is redirected back to the login page (/).
• Application Security: This ensures that only authenticated users can access the dashboard page.

Case Study 7: Managing Navigation Back to the Previous Page

Description

You want to allow users to easily return to the previous page, for example, from a product detail page back to the product list page.

Implementation

ElevatedButton(
  onPressed: () {
    context.pop(); //Return to the previous page.
  },
  child: Text('Back'),
);

Explanation

• Pop Function: By using context.pop(), you remove the last page from the navigation stack, bringing the user back to the previous page without the need to specify the route again.

Section 5: Drawbacks of Not Using GoRouter

1. Complex Route Management:

Without GoRouter, using Navigator often requires manual management for each route. For instance, transitioning from the login page to the home page with Navigator.push demands more intricate setup.

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => HomeScreen()),
);

2. Boilerplate Code:

Flutter’s default navigation often requires additional code to manage page transitions and authentication state handling.

3. Limited Deep Linking Support:

When using Navigator, implementing deep linking becomes more complex and requires extra logic. With GoRouter, you can simply define routes at the start.

4. Difficulty Managing Parameters:

Using parameters in routes with Navigator can be challenging. For example, to pass data to a detail page, you must use a constructor and handle it manually.

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => DetailScreen(id: someId),
  ),
);

In this tutorial, we have discussed how GoRouter can simplify the navigation experience in your Flutter applications. From installation to implementation in various case studies, GoRouter provides an efficient and structured solution for managing routes, including authentication status management, nested navigation, and deep linking support.

By using GoRouter, you not only reduce the complexity of route management but also enhance the user experience by providing more intuitive and responsive navigation. The simplicity of navigating between pages, managing parameters, and implementing route security are some of the key benefits you can take advantage of.

As an Android developer, I highly recommend exploring GoRouter further in your Flutter projects. With GoRouter, you will find a more effective and modern approach to managing your application’s navigation. Thank you for following this tutorial. I hope the information presented is useful and helps you in developing better Flutter applications!

Happy coding!