Challenge 4
- Flutter course
- Advanced
- Lesson 69/69
- 3 min
Build a chart animation with CustomPainter and AnimationController.
Challenge 4 - Graphic animation
In this challenge you will animate a circle's radius with CustomPainter and AnimationController. As the controller goes from 0.0 to 1.0, a Tween(0, 50) grows the radius and you draw it with canvas.drawCircle.
class CirclePainter extends CustomPainter {
final AnimationController ctrl;
CirclePainter(this.ctrl) : super(repaint: ctrl);
@override
void paint(Canvas canvas, Size size) {
final r = Tween(begin: 0.0, end: 50.0).transform(ctrl.value);
canvas.drawCircle(Offset(50, 50), r, Paint());
}
@override
bool shouldRepaint(covariant CirclePainter old) => false;
}Practice Define CirclePainter
First define _EmptyVsync implementing TickerProvider. Define CirclePainter extending CustomPainter: take an AnimationController parameter named ctrl and call super(repaint: ctrl) in the constructor. In paint, compute r with Tween(begin: 0.0, end: 50.0).transform(ctrl.value) and draw canvas.drawCircle(const Offset(50, 50), r, Paint()). shouldRepaint returns false. In main, create ctrl, take a CirclePainter instance, print runtimeType.
Starter code
import 'package:flutter/material.dart';
// _EmptyVsync sınıfını tanımla (TickerProvider uygular)
// CirclePainter sınıfını CustomPainter olarak tanımla
// ctrl parametresi alsın ve constructor controller'ı repaint kaynağı olarak versin
// paint'te Tween ile yarıçap hesapla ve drawCircle çiz
// shouldRepaint false dönsün
void main() {
// ctrl oluştur, CirclePainter örneği al, runtimeType yazdır
}Sample solution
import 'package:flutter/material.dart';
class _EmptyVsync implements TickerProvider {
@override
Ticker createTicker(TickerCallback onTick) => Ticker(onTick);
}
class CirclePainter extends CustomPainter {
final AnimationController ctrl;
CirclePainter(this.ctrl) : super(repaint: ctrl);
@override
void paint(Canvas canvas, Size size) {
final r = Tween(begin: 0.0, end: 50.0).transform(ctrl.value);
canvas.drawCircle(const Offset(50, 50), r, Paint());
}
@override
bool shouldRepaint(covariant CirclePainter old) => false;
}
void main() {
final ctrl = AnimationController(
vsync: _EmptyVsync(),
duration: Duration(seconds: 1),
);
final painter = CirclePainter(ctrl);
print(painter.runtimeType);
ctrl.dispose();
}Expected output
CirclePainter
Practice Compute radius with Tween
Define _EmptyVsync implementing TickerProvider. In main, create an AnimationController named ctrl (vsync: _EmptyVsync(), duration 1 second). Set ctrl.value = 0.5. Compute r with Tween(begin: 0.0, end: 50.0).transform(ctrl.value) and print r. Then call ctrl.dispose().
Starter code
import 'package:flutter/material.dart';
// _EmptyVsync sınıfını tanımla (TickerProvider uygular)
void main() {
// ctrl adlı AnimationController oluştur (vsync ve duration 1 saniye)
// ctrl.value'a 0.5 ata
// Tween ile 0.0-50.0 dönüşümü yapıp ctrl.value üzerinden r hesapla
// r'yi yazdır
}Sample solution
import 'package:flutter/material.dart';
class _EmptyVsync implements TickerProvider {
@override
Ticker createTicker(TickerCallback onTick) => Ticker(onTick);
}
void main() {
final ctrl = AnimationController(
vsync: _EmptyVsync(),
duration: Duration(seconds: 1),
);
ctrl.value = 0.5;
final r = Tween(begin: 0.0, end: 50.0).transform(ctrl.value);
print(r);
ctrl.dispose();
}Expected output
25.0
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 How do we connect a CustomPainter to an animation?
- By initState
- By setState
- By super(repaint: ctrl) Correct answer
- By dispose
Explanation: The CustomPainter is given super(repaint: ctrl); whenever the controller changes, the painter repaints automatically.
2 Pass radius to drawCircle
canvas.drawCircle(Offset(50, 50), ____, Paint());canvas.drawCircle(Offset(50, 50), r, Paint());Explanation: The second parameter of drawCircle is the radius; the r variable computed via Tween is passed, ctrl or value cannot be used directly as a radius.
3 Graphic animation matches
| Term | Meaning |
|---|---|
CustomPainter |
Drawing class |
AnimationController |
Animation control |
Tween |
Value range |
repaint |
Repaint trigger |