GoRoute
- Flutter course
- Intermediate
- Lesson 67/99
- 4 min
Define paths with GoRoute.
Defining a route with GoRoute
GoRoute is a single route definition in GoRouter's route list. The path parameter specifies the URL path, and the builder parameter specifies the screen to show when that path is entered. The builder has the signature (BuildContext context, GoRouterState state) and returns a Widget.
GoRoute(
path: '/ayarlar',
builder: (context, state) => AyarlarScreen(),
)Multiple GoRoute entries
A GoRouter's routes list can contain multiple GoRoute entries. Each GoRoute has its own path and builder. When the user navigates to a URL, the corresponding builder is called.
GoRouter(
routes: [
GoRoute(
path: '/',
builder: (context, state) => HomeScreen(),
),
GoRoute(
path: '/ayarlar',
builder: (context, state) => AyarlarScreen(),
),
],
);Practice Two-route GoRouter
Define a routes list containing two GoRoute entries. The first with path: '/' returns HomeScreen(), the second with path: '/ayarlar' returns AyarlarScreen(). Pass the list to GoRouter and print the route count in main.
Starter code
import 'package:flutter/widgets.dart';
import 'package:go_router/go_router.dart';
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});
@override
Widget build(BuildContext context) => const SizedBox.shrink();
}
class AyarlarScreen extends StatelessWidget {
const AyarlarScreen({super.key});
@override
Widget build(BuildContext context) => const SizedBox.shrink();
}
// routes listesi tanımla: iki GoRoute ekle
// '/' -> HomeScreen, '/ayarlar' -> AyarlarScreen
// GoRouter'ı routes ile oluştur
void main() {
// routes uzunluğunu yazdır
}Sample solution
import 'package:flutter/widgets.dart';
import 'package:go_router/go_router.dart';
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});
@override
Widget build(BuildContext context) => const SizedBox.shrink();
}
class AyarlarScreen extends StatelessWidget {
const AyarlarScreen({super.key});
@override
Widget build(BuildContext context) => const SizedBox.shrink();
}
final routes = [
GoRoute(
path: '/',
builder: (context, state) => const HomeScreen(),
),
GoRoute(
path: '/ayarlar',
builder: (context, state) => const AyarlarScreen(),
),
];
final router = GoRouter(routes: routes);
void main() {
print(routes.length);
}Expected output
2
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What does the builder parameter of GoRoute return?
- A Widget Correct answer
- A Map
- A Future
- An int
Explanation: The builder returns a Widget; this widget is shown on screen when the path is entered. Future is for async operations, int is a number, and Map is a data structure.
2 GoRoute path parameter
GoRoute(
____,
builder: (context, state) => AyarlarScreen(),
)GoRoute(
path: '/ayarlar',
builder: (context, state) => AyarlarScreen(),
)Explanation: The GoRoute parameter that specifies the URL path is path. url, route, and page are not GoRoute parameter names.
3 GoRoute parts
| Term | Meaning |
|---|---|
path |
URL path |
builder |
Screen builder |
routes |
Route list |
GoRouterState |
Route state object |