Flutter – the variables inside my widget aren't changing

First of all, it’s not reasonable to claim tim as a final since you need to update it’s value in your case.

If I don’t misunderstand your meaning, then you actually want to set a timer (in your case is the ChessClock which can countdown the time when triggered)

For the countdown logic,we can directly use Timer.periodic class in Dart instead of sleep() , also notice the dart doc of sleep()

Use this with care, as no asynchronous operations can be processed in a isolate while it is blocked in a sleep call.

Besides, in your code you want to call runtime() method in the state class, which in my opinion will not work and IDE should report error, if you really want to access property of the widget class from it’s state (in your example is accessing runtime() in Chessclock inside the state class _ChessclockState, you should use the keyword widget,for example widget.runtime() in your state class)

Also, in this part of your code

onPressed: () {
        setState(() {
          inGame = inswitch(inGame);
        });
    },

You use setState to call inswitch() method, which should handle the countdown logic and decrese tim in ChessClock every sec, as I mention above, the countdown logic in your code may cause some problem because of using sleep()

Let’s assume that you have modified the code to use Timer and the countdown logic works well, but the UI will still not change every sec as intend in this time. This is because you have only call setState() one time when the button was pressed in onPressed callback, however the tim actually is changing continuously.

For this problem, there has one solution that you move the countdown logic into state class, then you can do something like:

class _ClockExampleState extends State<ClockExample> {
  Timer? countingTimer = null;
  void triggerCounting() {
    if (countingTimer == null) {
      countingTimer = Timer.periodic(const Duration(seconds: 1), (timer) {
        setState(() {
          if (widget.tim > 0) {
            --widget.tim;
          }
        });
      });
    } else {
      countingTimer!.cancel();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        /// ...
        /// Button
        ElevatedButton(
            onPressed: () {
              triggerCounting();
            },
            child: Text('Trigger'))
      ],
    );
  }
}

Since you can access setState() inside the state class, now you can create a method called triggerCounting which calls setState() every time the widget.tim has been updated, this time the UI will be supposed to update every sec

Here is the full code (Notice my code is completely a new app which created just for example)

main.dart

import 'package:flutter/material.dart';
import './clock.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return ClockExample();
  }
}

clock.dart

import 'dart:async';
import 'dart:io';

import 'package:flutter/material.dart';

class ClockExample extends StatefulWidget {
  ClockExample({super.key, this.tim = 300});

  int tim;

  int get min {
    return tim ~/ 60;
  }

  int get sec {
    return tim % 60;
  }

  @override
  State<ClockExample> createState() => _ClockExampleState();
}

class _ClockExampleState extends State<ClockExample> {
  Timer? countingTimer = null;
  void triggerCounting() {
    if (countingTimer == null) {
      countingTimer = Timer.periodic(const Duration(seconds: 1), (timer) {
        setState(() {
          print('tim: ${widget.tim}');
          if (widget.tim > 0) {
            --widget.tim;
          }
        });
      });
    } else {
      countingTimer!.cancel();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Center(
          child: Text('${widget.min} : ${widget.sec}'),
        ),
        Center(
          child: Text('${widget.tim}'),
        ),
        ElevatedButton(
            onPressed: () {
              triggerCounting();
            },
            child: Text('Trigger'))
      ],
    );
  }
}

I’m also learning Flutter now and maybe my solution is not the best one, and actually my solution still has some problems, like that the parent widget can not directly access the value of the timer, notice that not only ClockExample need to access and show the tim info, the other part of the app may also need to know the value of the countdown, for example, the app may need to stop the game and show dialog when times ran out, so you may need to condsider pulling up the state to the widget above all widgets which need to access the state in the widgets tree, or you could consider using some state management package like provider (Provider on pub.dev)