Routing With go_router

Introduction

Routing and navigation in Flutter app development uses go_router, instead of GetX. This document will discuss what go_router is and how to use it.

Overview

Routing and navigation are two important aspects of mobile and web application development that involve moving between different pages or views. Routing is the process of determining the flow or route followed by the user within the application. It includes determining the sequence of views or screens that will be displayed to the user as they interact with the app. Navigation is the action of the user to move from one page or view to another within the application. It involves actions such as clicking links, back buttons, swiping, or using other interactions to move between views.

There are several considerations for routing and navigation in the mobile project to be changed to go_router, including to make it easier to implement Deep Linking. go_router is an open-source library used to manage navigation between screens or pages in an application. The differences between go_router and GetX are:

• go_router is focused exclusively on route management and navigation within Flutter apps.
• GetX, meanwhile, is a more comprehensive library and includes state management and various other tools, but it also has a powerful routing module that can be used for route management in your applications.

Installation and Setup

In this part of the installation, you will use the following command to add project dependencies directly to the pubspec.yaml file.

flutter pub add go_router

pubspec.yaml

go_router: ^12.1.0

Defining Routes

Naming Route

Naming route means create an alias for the route.

..\lib\new\new_route_name.dart

class NewRouteName {
  static const exampleAlias = "exampleAlias";

  static const exampleAliasDetail = "exampleAliasDetail";
}

Transition

..\lib\new\custom_transition.dart

CustomTransitionPage fadeTransition<T>({
  required BuildContext context,
  required GoRouterState state,
  required Widget child,
}) {
  return CustomTransitionPage<T>(
    key: state.pageKey,
    child: child,
    transitionsBuilder: (context, animation, secondaryAnimation, child) =>
        FadeTransition(opacity: animation, child: child),
  );
}

Routing and Navigating

Basic URL

..\lib\new\new_route.dart

GoRoute(
	path: "/example",
	name: NewRouteName.exampleAlias,
	pageBuilder: (context, state) {
		return fadeTransition(
			context: context,
			state: state,
			child: ExamplePage(),
		);
	},
)

Navigating

context.goNamed("exampleAlias");

Nested URL

..\lib\new\new_route.dart

GoRoute(
	path: "/example",
	name: NewRouteName.exampleAlias,
	pageBuilder: (context, state) {
		return fadeTransition(
			context: context,
			state: state,
			child: ExamplePage(),
		);
	},
	routes: [
		GoRoute(
			path: "/detail",
			name: NewRouteName.exampleAliasDetail,
			pageBuilder: (context, state) {
				return fadeTransition(
					context: context,
					state: state,
					child: ExamplePage(),
				);
			},
		),
	]
),

Navigating

context.goNamed("exampleAliasDetail");

URL with Parameter

Routing for urls that carry parameters in the url.

..\lib\new\new_route.dart

GoRoute(
	path: "/example/:slug",
	name: NewRouteName.exampleNaming,
	pageBuilder: (context, state) {
		String? slug = state.pathParameters["slug"];

		return fadeTransition(
			context: context,
			state: state,
			child: ExamplePage(
				slug: slug,
			),
		);
	},
)

Navigating

context.goNamed("exampleAlias", pathParameters: {
	"slug": String,
});

URL with Parameter and Data

Routing for urls that carry parameters and data in the url.

..\lib\new\new_route.dart

GoRoute(
	path: "/example",
	name: NewRouteName.exampleNaming,
	pageBuilder: (context, state) {
    Object? extra = state.extra;

		Object? exampleData;

		if (extra != null && extra is Map<String, dynamic>) {
			exampleData = extra["example_data"];
		}

		return fadeTransition(
			context: context,
			state: state,
			child: ExamplePage(
				exampleData: exampleData,
			),
		);
	},
)

Navigating

context.goNamed("exampleAlias", extra: {
	"example_data": Object,
});

References

Package go_router