Meydan okuma 4
- Flutter kursu
- Orta seviye
- Ders 99/99
- 3 dk
GoRouter ile üç ekranlı akış ve animasyon yaparsın.
GoRouter ve animasyon
Bu meydan okumada GoRouter ile üç ekranlı bir akış kurar, ana ekranda bir AnimatedContainer ile Tween değerini görselleştirirsin. GoRoute nesneleri routes listesinde tanımlanır, context.go ile ekranlar arası geçiş yapılır, AnimatedContainer'ın duration ve curve parametreleri animasyonu yönetir.
final routes = [
GoRoute(path: '/', builder: (c, s) => AnaEkran()),
GoRoute(path: '/liste', builder: (c, s) => ListeEkran()),
GoRoute(path: '/detay/:id', builder: (c, s) {
final id = s.pathParameters['id']!;
return DetayEkran(id: id);
}),
];Uygulama Üç yollu GoRouter
routes adında bir liste tanımla: üç GoRoute içersin. İlki '/' ile AnaEkran(), ikincisi '/liste' ile ListeEkran(), üçüncüsü '/detay/:id' ile DetayEkran(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 AnaEkran extends StatelessWidget {
const AnaEkran({super.key});
@override
Widget build(BuildContext context) => const SizedBox.shrink();
}
class ListeEkran extends StatelessWidget {
const ListeEkran({super.key});
@override
Widget build(BuildContext context) => const SizedBox.shrink();
}
class DetayEkran extends StatelessWidget {
final String id;
const DetayEkran({super.key, required this.id});
@override
Widget build(BuildContext context) => const SizedBox.shrink();
}
// routes listesi tanımla: üç GoRoute ekle
// '/' -> AnaEkran, '/liste' -> ListeEkran
// '/detay/:id' -> DetayEkran (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 AnaEkran extends StatelessWidget {
const AnaEkran({super.key});
@override
Widget build(BuildContext context) => const SizedBox.shrink();
}
class ListeEkran extends StatelessWidget {
const ListeEkran({super.key});
@override
Widget build(BuildContext context) => const SizedBox.shrink();
}
class DetayEkran extends StatelessWidget {
final String id;
const DetayEkran({super.key, required this.id});
@override
Widget build(BuildContext context) => const SizedBox.shrink();
}
final routes = [
GoRoute(
path: '/',
builder: (context, state) => const AnaEkran(),
),
GoRoute(
path: '/liste',
builder: (context, state) => const ListeEkran(),
),
GoRoute(
path: '/detay/:id',
builder: (context, state) {
final id = state.pathParameters['id']!;
return DetayEkran(id: id);
},
),
];
final router = GoRouter(routes: routes);
void main() {
print(routes.length);
}Beklenen çıktı
3
Uygulama AnimatedContainer ile Tween
GecisKarti adında StatelessWidget tanımla. final Animation<double> animasyon alanı required olsun. build metodu bir AnimatedContainer döndürsün; duration Duration(seconds: 1), curve Curves.easeInOut, width animasyon.value olsun. main içinde 'hazir' yazdır.
Başlangıç kodu
import 'package:flutter/material.dart';
// GecisKarti StatelessWidget tanımla
// final Animation<double> animasyon (required)
// build AnimatedContainer döndürsün
// duration Duration(seconds: 1)
// curve Curves.easeInOut
// width animasyonun değerini alsın
void main() {
// 'hazir' yazdır
}Örnek çözüm
import 'package:flutter/material.dart';
class GecisKarti extends StatelessWidget {
final Animation<double> animasyon;
const GecisKarti({super.key, required this.animasyon});
@override
Widget build(BuildContext context) {
return AnimatedContainer(
duration: const Duration(seconds: 1),
curve: Curves.easeInOut,
width: animasyon.value,
);
}
}
void main() {
print('hazir');
}Beklenen çıktı
hazir
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 GoRouter akışında ekranlar arası geçiş hangi metotla yapılır?
- Navigator.push
- context.go Doğru cevap
- showDialog
- jsonDecode
Açıklama: GoRouter'da ekran geçişi için context.go kullanılır. Navigator.push eski Navigator 1.0 yöntemidir, showDialog pencere açar, jsonDecode JSON çözer; GoRouter akışında yer almazlar.
2 Yol parametresini oku
GoRoute(
path: '/detay/:id',
builder: (c, s) {
final id = s.____!;
return DetayEkran(id: id);
},
)GoRoute(
path: '/detay/:id',
builder: (c, s) {
final id = s.pathParameters['id']!;
return DetayEkran(id: id);
},
)Açıklama: GoRouterState'in pathParameters özelliği yol parametrelerini tutar. queryParameters '?' ile gelen değerler içindir, params ve route GoRouterState'in özellikleri değildir.
3 GoRouter ve animasyon parçaları
| Kavram | Anlamı |
|---|---|
GoRoute |
yol tanımı |
context.go |
ekran geçişi |
AnimatedContainer |
animasyonlu container |
Tween |
değer geçişi |