Flutter
Meydan okuma 4
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.
Örnek çözümü göster
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);
}
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.
Örnek çözümü göster
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');
}
Kendini test et
-
GoRouter akışında ekranlar arası geçiş hangi metotla yapılır?
- Navigator.push
- context.go
- showDialog
- jsonDecode
Cevabı göster
context.go — 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.
-
Yol parametresini oku
GoRoute(
path: '/detay/:id',
builder: (c, s) {
final id = s.____!;
return DetayEkran(id: id);
},
)
Cevabı göster
GoRoute(
path: '/detay/:id',
builder: (c, s) {
final id = s.pathParameters['id']!;
return DetayEkran(id: id);
},
)
-
GoRouter ve animasyon parçaları
- GoRoute
- yol tanımı
- context.go
- ekran geçişi
- AnimatedContainer
- animasyonlu container
- Tween
- değer geçişi
Sıradaki ders: Orta seviye bölüm sınavı
