Home > Software design >  How to make a timer constantly display
How to make a timer constantly display

Time:11-19

I have made a chess clock but the time only updates when you click one of the buttons and I want it so the time is constantly updating. I have the setState() function after the button press but no ware else. How could this be mad to updating every 10th of a second or so. Thanks. Here is my code:

import 'package:flutter/material.dart';

...
  Widget build(context) {
    return MaterialApp(
      home: Scaffold(// this is what creates the page, everything should be inside this cuz everything is inside the page
        appBar: AppBar(//what is displayed at the top WOW
          title: Text('chess clock'),
          
        ),
        body: Column(
          children: [
            Container(
              margin: EdgeInsets.all(150.0),
              child: RaisedButton(
                onPressed: () {
                  setState((){
                    if (button1==1){
                      button1=2;
                    
                      minus=minus2-minus;
                      fminus=fminus minus;
                      
                      print(minus);
                      
                      
                      divid=DateTime.now().microsecondsSinceEpoch/1000000-start/1000000;
                      divid.round();
                      divid=divid-fminus;
                      minus=DateTime.now().microsecondsSinceEpoch/1000000;
                      divid=60.0-divid;
                    }
                  });
                  
                },
                child: Text(divid.round().toString()),
              )
            
            ),
            Container(
              margin: EdgeInsets.all(150.0),
              child: RaisedButton(
                onPressed: () {
                  setState((){
                    if (button1==2){
                      button1=1;

                      minus2=minus-minus2;
                      fminus2=fminus2 minus2;
                      
                      
                      
                      divid2=DateTime.now().microsecondsSinceEpoch/1000000-start/1000000;
                      divid2.round();
                      divid2=divid2-fminus2;
                      minus2=DateTime.now().microsecondsSinceEpoch/1000000;
                      divid2=60.0-divid2;
                    }
                  
                  });
                  
                },
                child: Text(divid2.round().toString()),
           ...

CodePudding user response:

For a complete solution, you should put Kauli's code in your initState() method and tear it down in dispose(). It would look something like this.

I've made some small changes to fit the needs of the solution.

Edit: I added the surrounding StatefulWidget class and removed some cut and paste which was confusing. You can wrap the build method with your original Scaffold and other widgets. I left that out to make the answer a little clearer.

class ChessClock extends StatefulWidget {

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

class _ChessClockState extends State<ChessClock> {

  // Important to capture the timer object reference
  Timer chessClockTimer;

  Timer periodicSec()  {
    // How could this be made to updating every 10th of a second or so. 
    // Per op question
    return Timer.periodic(Duration(milliseconds: 10), (_){
      setState((){
        if (button1==2){
          button1=1;

          minus2=minus-minus2;
          fminus2=fminus2 minus2;

          divid2=DateTime.now().microsecondsSinceEpoch/1000000-start/1000000;
          divid2.round();
          divid2=divid2-fminus2;
          minus2=DateTime.now().microsecondsSinceEpoch/1000000;
          divid2=60.0-divid2;
        }
      });
    });
  }

  @override
  void initState() {
    super.initState();
    chessClockTimer = periodicSec(); // Kauli's code 
  }

  @override
  void dispose() {
    // Stop the timer
    chessClockTimer?.cancel();

    // Clean up the timer
    chessClockTimer?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // Your build method code
  }
}

CodePudding user response:

You can use the Timer.periodic to do this

void periodicSec()  {
  Timer.periodic(Duration(seconds: 1), (_){
    setState((){
      if (button1==2){
        button1=1;

        minus2=minus-minus2;
        fminus2=fminus2 minus2;



        divid2=DateTime.now().microsecondsSinceEpoch/1000000-start/1000000;
        divid2.round();
        divid2=divid2-fminus2;
        minus2=DateTime.now().microsecondsSinceEpoch/1000000;
        divid2=60.0-divid2;
      }
    });
  });
}
  • Related