Search code examples
flutterdarttimercountdowntimerrestart

Restart CircularCountdownTimer flutter onComplete


Hey im trying to have a CircularCountDownTimer restarting every time it finishes counting to 60,

I was hoping it has to do with onComplete(), but I can't figure out how to restart it.

any help appreciated, thanks.
this is the CircularTimer widget:

                        CircularCountDownTimer(

                          duration: 60,
                          width: MediaQuery.of(context).size.width,
                          height: MediaQuery.of(context).size.height,
                          color: Colors.grey[300],
                          fillColor: Colors.yellow[800],
                          strokeWidth: 4.0,
                          textStyle: TextStyle(
                              fontSize: 0.0,
                              color: Colors.black87,
                              fontWeight: FontWeight.bold),

                          isReverse: false,

                          
                          onComplete: () {

                            setState(() {
                              min --;
                            });
                            
                          },
                        )

Solution

  • You can copy paste run full code below
    You can add Key in CircularCountDownTimer, when call setState in onComplete, CircularCountDownTimer will restart, see working demo
    For demo purpose, I use 10 seconds

    Step 1: Modify source code of circular_countdown_timer.dart add Key key and super(key: key) in constructor

        CircularCountDownTimer(
          { Key key,  //add here
            @required this.width,
          @required this.height,
          @required this.duration,
          @required this.fillColor,
          @required this.color,
          this.isReverse,
          this.onComplete,
          this.strokeWidth,
          this.textStyle})  :
            assert(width != null),
      assert(height != null),
      assert(duration != null),
      assert(fillColor != null),
      assert(color != null)
      , super(key: key); //add here
    

    Step 2: In your code, Provide UniqueKey() to CircularCountDownTimer

    child: CircularCountDownTimer(
              key: UniqueKey(),
    

    working demo

    enter image description here

    full code

    import 'package:flutter/material.dart';
    import 'package:circular_countdown_timer/circular_countdown_timer.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          title: 'Circular Countdown Timer Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: MyHomePage(title: 'Circular Countdown Timer'),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
      MyHomePage({Key key, this.title}) : super(key: key);
    
      final String title;
    
      @override
      _MyHomePageState createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
              title: Text(widget.title),
            ),
            body: Center(
                child: CircularCountDownTimer(
              key: UniqueKey(),
              duration: 10,
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              color: Colors.grey[300],
              fillColor: Colors.yellow[800],
              strokeWidth: 4.0,
              textStyle: TextStyle(
                  fontSize: 0.0,
                  color: Colors.black87,
                  fontWeight: FontWeight.bold),
              isReverse: false,
              onComplete: () {
                print("complete");
                setState(() {
                  //min--;
                });
              },
            )));
      }
    }