Flutter
Challenge 4
Build a three-screen flow with animation via GoRouter.
GoRouter and animation
In this challenge you set up a three-screen flow with GoRouter and visualize a Tween value with an AnimatedContainer on the main screen. GoRoute objects are defined in the routes list, screen transitions are done with context.go, and the duration and curve parameters of AnimatedContainer control the animation.
final routes = [
GoRoute(path: '/', builder: (c, s) => HomeScreen()),
GoRoute(path: '/liste', builder: (c, s) => ListScreen()),
GoRoute(path: '/detay/:id', builder: (c, s) {
final id = s.pathParameters['id']!;
return DetayScreen(id: id);
}),
];
Exercise Three-route GoRouter
Define a list named routes containing three GoRoute entries. The first with '/' returns AnaEkran(), the second with '/liste' returns ListeEkran(), and the third with '/detay/:id' returns DetayEkran(id: id) (read id from state.pathParameters['id']). Pass the list to GoRouter and print the route count in main.
Show example solution
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);
}
Exercise AnimatedContainer with Tween
Define a StatelessWidget named GecisKarti with a required final Animation<double> animasyon field. Its build method should return an AnimatedContainer with duration set to Duration(seconds: 1), curve set to Curves.easeInOut, and width set to animasyon.value. Print 'hazir' in main.
Show example solution
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');
}
Test yourself
-
Which method is used for screen transitions in a GoRouter flow?
- Navigator.push
- context.go
- showDialog
- jsonDecode
Show answer
context.go — In GoRouter you use context.go for screen transitions. Navigator.push is the old Navigator 1.0 approach, showDialog opens a dialog, and jsonDecode decodes JSON; none are part of a GoRouter flow.
-
Read the path parameter
GoRoute(
path: '/detay/:id',
builder: (c, s) {
final id = s.____!;
return DetayEkran(id: id);
},
)
Show answer
GoRoute(
path: '/detay/:id',
builder: (c, s) {
final id = s.pathParameters['id']!;
return DetayEkran(id: id);
},
)
-
GoRouter and animation parts
- GoRoute
- Route definition
- context.go
- Screen transition
- AnimatedContainer
- Animated container
- Tween
- Value transition
Next lesson: Intermediate section exam
