'How to achive this counter animation with some glow effect in flutter
How to achieve this animation in a flutter
As I am able to achieve the below design (Below image shown) design but it's not matching our requirement, Thanks in advance.
code for above screenshot
class CounterTimerPainter extends CustomPainter {
final Animation<double> animation;
final Color backgroundColor;
final Color color;
final double radius;
final int timer;
CounterTimerPainter({
required this.animation,
required this.backgroundColor,
required this.color,
required this.timer,
required this.radius,
}) : super(repaint: animation);
@override
void paint(Canvas canvas, Size size) {
var _paint = Paint()
..color = backgroundColor
..strokeWidth = 5.0
..strokeCap = StrokeCap.round
..style = PaintingStyle.fill;
final center = Offset(size.width / 2, size.height / 2);
final _rect = Rect.fromCircle(center: center, radius: radius);
final double startAngle = math.pi * 1.5;
final double sweepAngle = animation.value * 6.2;
canvas.drawCircle(center, size.width / 2.0, _paint);
_paint.color = color;
canvas.drawArc(_rect, startAngle, sweepAngle, true, _paint);
final textSpan = TextSpan(
text: "$timer",
style: TextStyle(
color: Colors.white,
fontSize: radius * 0.8,
fontWeight: FontWeight.w600,
),
);
final textPainter = TextPainter(
text: textSpan,
textAlign: TextAlign.center,
textDirection: TextDirection.ltr,
);
textPainter.layout(
minWidth: 0,
maxWidth: 100,
);
final textCenter =
Offset(size.width / 2 - (timer < 10 ? 25 : 40), size.height / 2 - 35);
textPainter.paint(
canvas,
textCenter,
);
}
@override
bool shouldRepaint(CounterTimerPainter old) {
return animation.value != old.animation.value ||
color != old.color ||
backgroundColor != old.backgroundColor;
}
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|


