Meydan okuma 3
- Flutter kursu
- Uzman seviye
- Ders 38/39
- 3 dk
Flutter web için URL stratejili router uygulaması yaparsın.
Web URL stratejisi ve GoRouter
Flutter web'de varsayılan URL'ler # işareti içerir. setUrlStrategy(PathUrlStrategy()) ile bunu kaldırıp temiz URL'lere geçersin. GoRouter ile rota yapılandırmasını bildirimli tanımlarsın; her GoRoute bir yol ve bir builder alır.
void main() {
setUrlStrategy(PathUrlStrategy());
runApp(MyApp());
}
final router = GoRouter(
routes: [
GoRoute(
path: '/',
builder: (context, state) => HomeScreen(),
),
],
);Uygulama İki rotalı GoRouter
İki GoRoute tanımla: '/' ve '/settings'. Her birinin builder'ı SizedBox döndürsün. GoRouter oluştur. main içinde rota sayısını yazdır.
Başlangıç kodu
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() {
}Örnek çözüm
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);
}Beklenen çıktı
2
Uygulama Parametreli rota
İki GoRoute tanımla: '/' ve '/item/:id'. İkinci rotanın builder'ında state.pathParameters['id'] ile id al ve Text widget'ında göster. GoRouter oluştur. main içinde son rotanın yolunu yazdır.
Başlangıç kodu
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() {
}Örnek çözüm
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);
}Beklenen çıktı
/item/:id
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 PathUrlStrategy ne yapar?
- URL'ye # işareti ekler
- Rota önbelleğini temizler
- URL'deki # işaretini kaldırır Doğru cevap
- Hot reload'u etkinleştirir
Açıklama: PathUrlStrategy, hash (#) yerine yol tabanlı URL'ler kullanır; böylece adres çubuğu temiz görünür.
2 setUrlStrategy çağrısı
void main() {
____(PathUrlStrategy());
runApp(MyApp());
}void main() {
setUrlStrategy(PathUrlStrategy());
runApp(MyApp());
}Açıklama: setUrlStrategy, Flutter web'de URL stratejisini belirler; PathUrlStrategy ile hash kaldırılır.
3 Web yönlendirme parçaları
| Kavram | Anlamı |
|---|---|
PathUrlStrategy |
URL'deki # işaretini kaldırır |
setUrlStrategy |
URL stratejisini ayarlar |
GoRoute |
Tek bir rota tanımlar |
GoRouter |
Tüm rotaları yönetir |