Challenge 3
- Flutter course
- Expert
- Lesson 38/39
- 3 min
Build a Flutter web app with URL strategy and router.
Web URL strategy and GoRouter
In Flutter web, default URLs contain a # sign. With setUrlStrategy(PathUrlStrategy()) you remove it and switch to clean URLs. With GoRouter you declaratively define the route configuration; each GoRoute takes a path and a builder.
void main() {
setUrlStrategy(PathUrlStrategy());
runApp(MyApp());
}
final router = GoRouter(
routes: [
GoRoute(
path: '/',
builder: (context, state) => HomeScreen(),
),
],
);Practice Two-route GoRouter
Define two GoRoutes: '/' and '/settings'. Each builder returns a SizedBox. Create a GoRouter. In main print the route count.
Starter code
import 'package:go_router/go_router.dart';
import 'package:flutter/widgets.dart';
// İki rota tanımla: kök ve ayarlar
// Her builder SizedBox döndürsün
// GoRouter oluştur
// main: rota sayısını yazdır
void main() {
}Sample solution
import 'package:go_router/go_router.dart';
import 'package:flutter/widgets.dart';
final routes = [
GoRoute(
path: '/',
builder: (context, state) => const SizedBox(),
),
GoRoute(
path: '/settings',
builder: (context, state) => const SizedBox(),
),
];
final router = GoRouter(routes: routes);
void main() {
print(routes.length);
}Expected output
2
Practice Parameterized route
Define two GoRoutes: '/' and '/item/:id'. In the second route's builder, get the id via state.pathParameters['id'] and show it in a Text widget. Create a GoRouter. In main print the last route's path.
Starter code
import 'package:go_router/go_router.dart';
import 'package:flutter/widgets.dart';
// İki rota: kök ve öğe detayı (id parametreli)
// Detay rotasında id'yi al ve metin göster
// GoRouter oluştur
// main: son rotanın yolunu yazdır
void main() {
}Sample solution
import 'package:go_router/go_router.dart';
import 'package:flutter/widgets.dart';
final routes = [
GoRoute(
path: '/',
builder: (context, state) => const SizedBox(),
),
GoRoute(
path: '/item/:id',
builder: (context, state) {
final id = state.pathParameters['id'];
return SizedBox(child: Text(id!));
},
),
];
final router = GoRouter(routes: routes);
void main() {
print(routes.last.path);
}Expected output
/item/:id
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What does PathUrlStrategy do?
- Adds a # sign to URLs
- Clears the route cache
- Removes the # sign from URLs Correct answer
- Enables hot reload
Explanation: PathUrlStrategy uses path-based URLs instead of hash (#); thus the address bar looks clean.
2 setUrlStrategy call
void main() {
____(PathUrlStrategy());
runApp(MyApp());
}void main() {
setUrlStrategy(PathUrlStrategy());
runApp(MyApp());
}Explanation: setUrlStrategy sets the URL strategy in Flutter web; with PathUrlStrategy the hash is removed.
3 Web routing parts
| Term | Meaning |
|---|---|
PathUrlStrategy |
Removes the # sign from URLs |
setUrlStrategy |
Sets the URL strategy |
GoRoute |
Defines a single route |
GoRouter |
Manages all routes |