Özet - GoRouter
- Flutter kursu
- Orta seviye
- Ders 70/99
- 4 dk
GoRouter ve GoRoute'u birleştirerek üç ekranlı akış yaparsın.
Üç ekranlı akış
Üç ekranlı bir akış: GoRouter'ın routes listesinde üç GoRoute tanımlarsın. context.go ile ekranlar arası geçiş yapar, state.pathParameters ile yol parametrelerini okursun. MaterialApp.router ile router'ı uygulamaya bağlarsın.
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);
}),
],
);Uygulama Üç ekranlı GoRouter
routes listesi tanımla: üç GoRoute içersin. İlki '/' ile HomeScreen(), ikincisi '/liste' ile ListeScreen(), üçüncüsü '/detay/:id' ile DetayScreen(id: id) döndürsün (id'yi state.pathParameters['id'] ile oku). Listeyi GoRouter'a ver ve main içinde route sayısını yazdır.
Başlangıç kodu
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
}Örnek çözüm
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);
}Beklenen çıktı
3
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Üç ekranlı akışta hangi parçalar birlikte çalışır?
- Provider + ChangeNotifier + setState
- GoRouter + GoRoute + context.go Doğru cevap
- Column + Row + Padding
- sqflite + http + FutureBuilder
Açıklama: GoRouter route'ları tanımlar, GoRoute her yolu belirtir, context.go ekranlar arası geçişi sağlar. Diğer seçenekler veritabanı/ağ, state yönetimi ve layout ile ilgilidir; GoRouter akışının parçası değildir.
2 MaterialApp.router'a GoRouter bağla
MaterialApp.router(
routerConfig: ____,
title: 'Uygulama',
);MaterialApp.router(
routerConfig: router,
title: 'Uygulama',
);Açıklama: MaterialApp.router'ın routerConfig parametresine GoRouter nesnesi verilir. Navigator eski yaklaşımdır, routes bir listedir, GoRoute tek bir yol tanımıdır.
3 Özet parçaları
| Kavram | Anlamı |
|---|---|
GoRouter |
yönlendirici |
GoRoute |
yol tanımı |
context.go |
ekran değiştirme |
state.pathParameters |
yol parametreleri |