Summary - GoRouter
- Flutter course
- Intermediate
- Lesson 70/99
- 4 min
Combine GoRouter and GoRoute to make a three-screen flow.
Three-screen flow
A three-screen flow: you define three GoRoute entries in GoRouter's routes list. You switch between screens with context.go and read path parameters with state.pathParameters. You connect the router to the app with MaterialApp.router.
final router = GoRouter(
routes: [
GoRoute(path: '/', builder: (c, s) => HomeScreen()),
GoRoute(path: '/liste', builder: (c, s) => ListeScreen()),
GoRoute(path: '/detay/:id', builder: (c, s) {
final id = s.pathParameters['id']!;
return DetayScreen(id: id);
}),
],
);Practice Three-screen GoRouter
Define a routes list containing three GoRoute entries. The first with '/' returns HomeScreen(), the second with '/liste' returns ListeScreen(), the third with '/detay/:id' returns DetayScreen(id: id) (read id from state.pathParameters['id']). 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 ListeScreen extends StatelessWidget {
const ListeScreen({super.key});
@override
Widget build(BuildContext context) => const SizedBox.shrink();
}
class DetayScreen extends StatelessWidget {
final String id;
const DetayScreen({super.key, required this.id});
@override
Widget build(BuildContext context) => const SizedBox.shrink();
}
// routes listesi tanımla: üç GoRoute ekle
// '/' -> HomeScreen, '/liste' -> ListeScreen
// '/detay/:id' -> DetayScreen (yol parametresi ile)
// 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 ListeScreen extends StatelessWidget {
const ListeScreen({super.key});
@override
Widget build(BuildContext context) => const SizedBox.shrink();
}
class DetayScreen extends StatelessWidget {
final String id;
const DetayScreen({super.key, required this.id});
@override
Widget build(BuildContext context) => const SizedBox.shrink();
}
final routes = [
GoRoute(
path: '/',
builder: (context, state) => const HomeScreen(),
),
GoRoute(
path: '/liste',
builder: (context, state) => const ListeScreen(),
),
GoRoute(
path: '/detay/:id',
builder: (context, state) {
final id = state.pathParameters['id']!;
return DetayScreen(id: id);
},
),
];
final router = GoRouter(routes: routes);
void main() {
print(routes.length);
}Expected output
3
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which parts work together in a three-screen flow?
- Provider + ChangeNotifier + setState
- GoRouter + GoRoute + context.go Correct answer
- Column + Row + Padding
- sqflite + http + FutureBuilder
Explanation: GoRouter defines routes, GoRoute specifies each path, and context.go switches between screens. The other options concern database/network, state management, and layout; they are not part of the GoRouter flow.
2 Connect GoRouter to MaterialApp.router
MaterialApp.router(
routerConfig: ____,
title: 'Uygulama',
);MaterialApp.router(
routerConfig: router,
title: 'Uygulama',
);Explanation: The GoRouter object is passed to MaterialApp.router's routerConfig parameter. Navigator is the old approach, routes is a list, and GoRoute is a single route definition.
3 Summary parts
| Term | Meaning |
|---|---|
GoRouter |
The router |
GoRoute |
Route definition |
context.go |
Screen switching |
state.pathParameters |
Path parameters |