Challenge 4
- Flutter course
- Intermediate
- Lesson 99/99
- 3 min
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);
}),
];Practice 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.
Starter code
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
}Sample 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);
}Expected output
3
Practice 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.
Starter code
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
}Sample 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');
}Expected output
hazir
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which method is used for screen transitions in a GoRouter flow?
- Navigator.push
- context.go Correct answer
- showDialog
- jsonDecode
Explanation: 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.
2 Read the path parameter
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);
},
)Explanation: The pathParameters property of GoRouterState holds path parameters. queryParameters is for '?' values, and params and route are not properties of GoRouterState.
3 GoRouter and animation parts
| Term | Meaning |
|---|---|
GoRoute |
Route definition |
context.go |
Screen transition |
AnimatedContainer |
Animated container |
Tween |
Value transition |