Linear Timer in Flutter Stopable pausable resetable and durationsetable :D

With mobx and provider.

main.dart

import 'package:flutter/material.dart';
import 'package:prov_counter/mobxtimer/timer_store.dart';
import 'package:prov_counter/mobxtimer/timer_widget.dart';
import 'package:provider/provider.dart';

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

class MyApp extends StatelessWidget {
  final timerStore = TimerStore();

  MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Linear Timer Widget',
      home: Provider<TimerStore>(
        create: (_) => timerStore,
        child: const TimerWidget(),
      ),
    );
  }
}

import 'dart:async';

import 'package:mobx/mobx.dart';
part 'timer_store.g.dart';

class TimerStore = _TimerStoreBase with _$TimerStore;

abstract class _TimerStoreBase with Store {
  @observable
  double durationInSeconds = 20;
  @action
  void setDuration(double duration) {
    durationInSeconds = duration;
    stopTimer();
    resetTimer();
  }

  int miliseconds = 17;
  @observable
  double minutes = 0;

  @observable
  double seconds = 0;

  @observable
  bool isRunning = false;

  Timer? _timer;

  @action
  void startTimer() {
    isRunning = true;
    _timer = Timer.periodic(Duration(milliseconds: miliseconds), (timer) {
      // if (seconds < 59) {
      if (seconds >= durationInSeconds) {
        stopTimer();
        resetTimer();
      } else {
        seconds += miliseconds.toDouble() / 1000.0;
      }

      // } else {
      //   minutes++;
      //   seconds = 0;
      // }
    });
  }

  @action
  void stopTimer() {
    isRunning = false;
    _timer?.cancel();
  }

  @action
  void resetTimer() {
    minutes = 0;
    seconds = 0;
  }
}

import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:prov_counter/mobxtimer/timer_store.dart';
import 'package:provider/provider.dart';

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

  @override
  Widget build(BuildContext context) {
    final timerStore = Provider.of<TimerStore>(context);

    return Scaffold(body: Observer(builder: (_) {
      return Stack(
        children: [
          Center(
            child: Container(
              child: Text(
                timerStore.seconds.toStringAsFixed(2),
                style: const TextStyle(fontSize: 48),
              ),
            ),
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              Padding(
                padding: const EdgeInsets.all(30.0),
                child: Container(
                  decoration: BoxDecoration(
                      border: Border.all(color: Colors.black, width: 4),
                      borderRadius: BorderRadius.circular(100),
                      color: Colors.black),
                  child: LinearProgressIndicator(
                      color: Colors.black,
                      minHeight: 10,
                      backgroundColor: Colors.grey,
                      value:
                          (timerStore.seconds) / timerStore.durationInSeconds),
                ),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  ElevatedButton(
                    onPressed:
                        timerStore.isRunning ? null : timerStore.startTimer,
                    child: const Text('Başlat'),
                  ),
                  ElevatedButton(
                    onPressed:
                        timerStore.isRunning ? timerStore.stopTimer : null,
                    child: const Text('Durdur'),
                  ),
                  ElevatedButton(
                    onPressed:
                        timerStore.isRunning ? null : timerStore.resetTimer,
                    child: const Text('Sıfırla'),
                  ),
                  // set duration 20 seconds
                  ElevatedButton(
                    onPressed: () => timerStore.setDuration(20),
                    child: const Text('20'),
                  ),
                  // set duration 60 seconds
                  ElevatedButton(
                    onPressed: () => timerStore.setDuration(60),
                    child: const Text('60'),
                  ),
                ],
              ),
            ],
          ),
        ],
      );
    }));
  }
}

and watch with build_runner extension and we can see another file that ends with .g.dart