Why is my setState not working in Flutter? - flutter

Question

My first day learning flutter, can someone help me understand why my setState is not working?
Making a basic clock app.
The main part is the initState where I am trying to make it so that the Paint function which creates the clock UI is updated once every second so my second hand is updated in real-time.
import 'dart:math';
import 'package:flutter/material.dart';
class ClockView extends StatefulWidget{
#override
_ClockViewState createState() => _ClockViewState();
}
class _ClockViewState extends State<ClockView>{
#override void initState() {
Timer.periodic(Duration(seconds: 1), (timer) {setState(() {
});});
super.initState();
}
#override
Widget build(BuildContext context){
return Container(
width: 300,
height: 300,
child: Transform.rotate(
angle: -pi/2,
child: CustomPaint(
painter: ClockPainter(),
),
),
);
}
}
class ClockPainter extends CustomPainter{
#override
void paint(Canvas canvas, Size size) {
var CenterX = size.width/2;
var CenterY = size.height/2;
var CenterTrue = Offset(CenterX, CenterY);
var CRadius = min(CenterY, CenterY);
var SecHandBrush = Paint()..strokeCap = StrokeCap.round ..color = Colors.orange ..style = PaintingStyle.stroke ..strokeWidth = 4;
var MinHandBrush = Paint()..strokeCap = StrokeCap.round ..shader = RadialGradient(colors: [Colors.lightBlue, Colors.pink]).createShader(Rect.fromCircle(center: CenterTrue, radius: CRadius)) ..style = PaintingStyle.stroke ..strokeWidth = 8;
var HrHandBrush = Paint()..strokeCap = StrokeCap.round ..shader = RadialGradient(colors: [Colors.deepPurpleAccent, Colors.redAccent]).createShader(Rect.fromCircle(center: CenterTrue, radius: CRadius/2)) ..style = PaintingStyle.stroke ..strokeWidth = 10;
var FillBrush = Paint()..color = Color(0xFF444974);
var OutlineBrush = Paint()..color = Color(0xFFEAECFF) ..style = PaintingStyle.stroke ..strokeWidth = 5;
var CenterBrush = Paint()..color = Color(0xFFEAECFF);
canvas.drawCircle(CenterTrue, CRadius - 50, FillBrush);
canvas.drawCircle(CenterTrue, CRadius - 50.1, OutlineBrush);
var SecHandX = CenterX + 80 * cos(DateTime.now().second * 6 * pi/180);
var SecHandY = CenterX + 80 * sin(DateTime.now().second * 6 * pi/180);
canvas.drawLine(CenterTrue, Offset(SecHandX, SecHandY), SecHandBrush);
var MinHandX = CenterX + 75 * cos(DateTime.now().minute * 6 * pi/180);
var MinHandY = CenterX + 75 * sin(DateTime.now().minute * 6 * pi/180);
canvas.drawLine(CenterTrue, Offset(MinHandX,MinHandY), MinHandBrush);
var HrHandX = CenterX + 60 * cos((DateTime.now().hour * 30 + DateTime.now().minute * 0.5) * pi/180);
var HrHandY = CenterX + 60 * sin((DateTime.now().hour * 30 + DateTime.now().minute * 0.5) * pi/180);
canvas.drawLine(CenterTrue, Offset(HrHandX,HrHandY), HrHandBrush);
canvas.drawCircle(CenterTrue, 5, CenterBrush);
}
#override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return true;
}
}```

Answer 1

Add a widgets binding observer to trigger timer after the initial state build is complete, I would rewrite it as:
import 'dart:math';
import 'package:flutter/material.dart';
class ClockView extends StatefulWidget{
#override
_ClockViewState createState() => _ClockViewState();
}
class _ClockViewState extends State<ClockView>{
void _startTimer(){
WidgetsBinding.instance.endOfFrame.then(
(_) {
if (mounted) {
// do some suff
Timer.periodic(Duration(seconds: 1), (timer) {setState(() {
});});
};
},
);
}
#override void initState() {
_startTimer();
super.initState();
}
#override
Widget build(BuildContext context){
return Container(
width: 300,
height: 300,
child: Transform.rotate(
angle: -pi/2,
child: CustomPaint(
painter: ClockPainter(),
),
),
);
}
}
class ClockPainter extends CustomPainter{
#override
void paint(Canvas canvas, Size size) {
var CenterX = size.width/2;
var CenterY = size.height/2;
var CenterTrue = Offset(CenterX, CenterY);
var CRadius = min(CenterY, CenterY);
var SecHandBrush = Paint()..strokeCap = StrokeCap.round ..color = Colors.orange ..style = PaintingStyle.stroke ..strokeWidth = 4;
var MinHandBrush = Paint()..strokeCap = StrokeCap.round ..shader = RadialGradient(colors: [Colors.lightBlue, Colors.pink]).createShader(Rect.fromCircle(center: CenterTrue, radius: CRadius)) ..style = PaintingStyle.stroke ..strokeWidth = 8;
var HrHandBrush = Paint()..strokeCap = StrokeCap.round ..shader = RadialGradient(colors: [Colors.deepPurpleAccent, Colors.redAccent]).createShader(Rect.fromCircle(center: CenterTrue, radius: CRadius/2)) ..style = PaintingStyle.stroke ..strokeWidth = 10;
var FillBrush = Paint()..color = Color(0xFF444974);
var OutlineBrush = Paint()..color = Color(0xFFEAECFF) ..style = PaintingStyle.stroke ..strokeWidth = 5;
var CenterBrush = Paint()..color = Color(0xFFEAECFF);
canvas.drawCircle(CenterTrue, CRadius - 50, FillBrush);
canvas.drawCircle(CenterTrue, CRadius - 50.1, OutlineBrush);
var SecHandX = CenterX + 80 * cos(DateTime.now().second * 6 * pi/180);
var SecHandY = CenterX + 80 * sin(DateTime.now().second * 6 * pi/180);
canvas.drawLine(CenterTrue, Offset(SecHandX, SecHandY), SecHandBrush);
var MinHandX = CenterX + 75 * cos(DateTime.now().minute * 6 * pi/180);
var MinHandY = CenterX + 75 * sin(DateTime.now().minute * 6 * pi/180);
canvas.drawLine(CenterTrue, Offset(MinHandX,MinHandY), MinHandBrush);
var HrHandX = CenterX + 60 * cos((DateTime.now().hour * 30 + DateTime.now().minute * 0.5) * pi/180);
var HrHandY = CenterX + 60 * sin((DateTime.now().hour * 30 + DateTime.now().minute * 0.5) * pi/180);
canvas.drawLine(CenterTrue, Offset(HrHandX,HrHandY), HrHandBrush);
canvas.drawCircle(CenterTrue, 5, CenterBrush);
}
#override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return true;
}
}```

Answer 2

Note: This problem has been solved. It required a complete re-installation of the flutter package but the code as mentioned in the code works fine on its own without any modifications.