Search code examples
flutterdartflutter-layoutflutter-animation

Why is my setState not working in Flutter?


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;
  }
  
}```

Solution

  • 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.