Flutter: setState is not updating a custom built widget

Question

I built a custom timer widget and am calling it through the main.dart file. My timer widget essentially takes an argument totalDuration and using that starts running the timer. In the main.dart file I created a variable called counter and am passing it as the value to totalDuration. Till here it works fine. Now when I create a button, which on being clicked increments the counter variable and calls the setState method, my counter varibale is being incremented but widget is not being rebuilt. Why is that so and how could I go about solving this problem? For reference I have attached the codes from my both my main and timer file here.

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_app_test_counter/timer.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 60;

  void _incrementCounter() {
    setState(() {
      print(_counter);
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Expanded(
              child: Timer(
                totalDuration: _counter,
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

timer.dart

import 'dart:ui';

import 'package:flutter/material.dart';

class Timer extends StatefulWidget {
  final int totalDuration;
  const Timer({Key key, this.totalDuration}) : super(key: key);

  @override
  _Timer createState() => _Timer();
}

class _Timer extends State<Timer> with TickerProviderStateMixin {
  double _progress = 0.0;
  bool _reversed = true;
  bool _stopped = false;
  Duration duration;

  Animation<double> animation;
  AnimationController controller;

  String get _timeRemaining {
    if (controller.lastElapsedDuration != null) {
      duration = _reversed
          ? controller.duration - controller.lastElapsedDuration
          : controller.lastElapsedDuration + Duration(seconds: 1);
    }
    return '${(duration.inHours).toString().padLeft(2, '0')}:${(duration.inMinutes % 60).toString().padLeft(2, '0')}:${(duration.inSeconds % 60).toString().padLeft(2, '0')}';
  }

  @override
  void initState() {
    super.initState();

    controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: widget.totalDuration),
    );

    animation = Tween(begin: 1.0, end: 0.0).animate(controller)
      ..addListener(() {
        setState(() {
          _progress = animation.value;
        });
      });

    controller.forward();
  }

  @override
  void dispose() {
    controller.dispose();
    _stopped = !_stopped;
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => _reversed = !_reversed,
      child: Scaffold(
        body: CustomPaint(
          painter:
              ShapePainter(progress: _progress, timeRemaining: _timeRemaining),
          child: Container(),
        ),
      ),
    );
  }
}

class ShapePainter extends CustomPainter {
  double progress;
  String timeRemaining;

  ShapePainter({this.progress, this.timeRemaining});

  @override
  void paint(Canvas canvas, Size size) {
    final rectBounds = Rect.fromLTRB(0, 0, size.width, size.height);
    final rectPaint = Paint()
      ..strokeWidth = 1
      ..style = PaintingStyle.fill
      ..color = Colors.orange;
    canvas.drawRRect(
      RRect.fromRectAndRadius(rectBounds, Radius.circular(10)),
      rectPaint,
    );

    var paintProgressBar = Paint()
      ..color = Colors.white
      ..strokeWidth = 6
      ..strokeCap = StrokeCap.round;
    Offset progressStartingPoint = Offset(42, size.height - 60);
    Offset progressEndingPoint = Offset(size.width - 42, size.height - 60);
    canvas.drawLine(
        progressStartingPoint, progressEndingPoint, paintProgressBar);

    var paintDoneBar = Paint()
      ..color = Colors.deepOrange
      ..strokeWidth = 6
      ..strokeCap = StrokeCap.round;
    Offset doneStartingPoint = Offset(42, size.height - 60);
    Offset doneEndingPoint =
        Offset(((size.width - 84) * (1.0 - progress) + 42), size.height - 60);
    canvas.drawLine(doneStartingPoint, doneEndingPoint, paintDoneBar);

    final timerTextStyle = TextStyle(
      color: Colors.indigo,
      fontSize: 30,
    );
    final timerTextSpan = TextSpan(
      text: timeRemaining,
      style: timerTextStyle,
    );
    final timerTextPainter = TextPainter(
      text: timerTextSpan,
      textDirection: TextDirection.ltr,
    );
    timerTextPainter.layout(
      minWidth: 0,
      maxWidth: size.width,
    );
    final timerOffset = Offset(size.width / 2, size.height / 2 - 40);
    timerTextPainter.paint(canvas, timerOffset);

    final textStyle = TextStyle(
      color: Colors.black,
      fontSize: 30,
    );
    final textSpan = TextSpan(
      text: 'time left',
      style: textStyle,
    );
    final textPainter = TextPainter(
      text: textSpan,
      textDirection: TextDirection.ltr,
    );
    textPainter.layout(
      minWidth: 0,
      maxWidth: size.width,
    );
    final offset = Offset((size.width - 20) / 2, (size.height - 20) / 2);
    textPainter.paint(canvas, offset);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

Answer 1

One quick dirty fix is to add a key to the Timer widget

Timer(
  key: UniqueKey(),
  totalDuration: _counter,
),

Other way is to use didUpdateWidget function in your child Timer() widget. In that function, you can make the changes.

@override
void didUpdateWidget(Timer oldWidget) {
  print("didUpdateWidget called");
  super.didUpdateWidget(oldWidget);
}

https://api.flutter.dev/flutter/widgets/State/didUpdateWidget.html