flutter_ui2

import 'dart:async';

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        // ignore: deprecated_member_use
        backgroundColor: const Color(0xFFE7626C),
        textTheme: const TextTheme(
          displayLarge: TextStyle(
            color: Color(0xFF232B55),
          ),
        ),
        cardColor: const Color(0xFFF4EDDB),
      ),
      home: const Scaffold(
        body: HomeScreen(),
      ),
    );
  }
}

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  static const min15 = 15 * 60;
  static const min20 = 20 * 60;
  static const min25 = 25 * 60;
  static const min30 = 30 * 60;
  static const initSeconds = min25;
  static const maxRound = 4;

  bool isRunning = false;
  int seconds = initSeconds;
  int rounds = 0;
  int goals = 0;
  int selectedSecond = initSeconds;

  late Timer timer;
  void onStartPressed() {
    timer = Timer.periodic(const Duration(seconds: 1), onTick);
    setState(() {
      isRunning = true;
      if (rounds >= maxRound) {
        rounds = 0;
      }
    });
  }

  void onPausePressed() {
    setState(() {
      isRunning = false;
    });
    timer.cancel();
  }

  void onTick(Timer timer) {
    setState(() {
      seconds -= 1;
      if (seconds <= 0) {
        if (++rounds >= maxRound) {
          ++goals;
        }
        stopTimer(initSeconds);
      }
    });
  }

  void stopTimer(int seconds) {
    isRunning = false;
    this.seconds = seconds;
    timer.cancel();
  }

  String mmss(int seconds) {
    int mm = (seconds / 60).floor();
    int remainSeconds = (seconds % 60).floor();

    String ss = '$remainSeconds';
    if (remainSeconds < 10) {
      ss = '0$ss';
    }
    return '$mm:$ss';
  }

  void selectTime(int seconds) {
    setState(() {
      selectedSecond = seconds;
      stopTimer(seconds);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // ignore: deprecated_member_use
      backgroundColor: Theme.of(context).backgroundColor,
      body: Column(
        children: [
          Flexible(
            child: Container(
              alignment: Alignment.bottomCenter,
              child: Text(
                mmss(seconds),
                style: TextStyle(
                  color: Theme.of(context).cardColor,
                  fontSize: 89,
                  fontWeight: FontWeight.w600,
                ),
              ),
            ),
          ),
          Flexible(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                TextButton(
                  style: TextButton.styleFrom(
                    // ignore: deprecated_member_use
                    foregroundColor: Theme.of(context).backgroundColor,
                    backgroundColor:
                        Colors.white.withOpacity(selectedSecond == 3 ? 1 : 0.6),
                  ),
                  child: const Text('3'),
                  onPressed: () {
                    selectTime(3);
                  },
                ),
                TextButton(
                  style: TextButton.styleFrom(
                    // ignore: deprecated_member_use
                    foregroundColor: Theme.of(context).backgroundColor,
                    backgroundColor: Colors.white
                        .withOpacity(selectedSecond == min15 ? 1 : 0.6),
                  ),
                  child: const Text('15'),
                  onPressed: () {
                    selectTime(min15);
                  },
                ),
                TextButton(
                  style: TextButton.styleFrom(
                    // ignore: deprecated_member_use
                    foregroundColor: Theme.of(context).backgroundColor,
                    backgroundColor: Colors.white
                        .withOpacity(selectedSecond == min20 ? 1 : 0.6),
                  ),
                  child: const Text('20'),
                  onPressed: () {
                    selectTime(min20);
                  },
                ),
                TextButton(
                  style: TextButton.styleFrom(
                    // ignore: deprecated_member_use
                    foregroundColor: Theme.of(context).backgroundColor,
                    backgroundColor: Colors.white
                        .withOpacity(selectedSecond == min25 ? 1 : 0.6),
                  ),
                  child: const Text('25'),
                  onPressed: () {
                    selectTime(min25);
                  },
                ),
                TextButton(
                  style: TextButton.styleFrom(
                    // ignore: deprecated_member_use
                    foregroundColor: Theme.of(context).backgroundColor,
                    backgroundColor: Colors.white
                        .withOpacity(selectedSecond == min30 ? 1 : 0.6),
                  ),
                  child: const Text('30'),
                  onPressed: () {
                    selectTime(min30);
                  },
                ),
              ],
            ),
          ),
          Flexible(
            flex: 3,
            fit: FlexFit.tight,
            child: Center(
              child: IconButton(
                icon: Icon(isRunning
                    ? Icons.pause_circle_outlined
                    : Icons.play_circle_outline_sharp),
                color: Theme.of(context).cardColor,
                iconSize: 82,
                onPressed: isRunning ? onPausePressed : onStartPressed,
              ),
            ),
          ),
          Flexible(
            child: Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(50),
                  color: Theme.of(context).cardColor,
                ),
                child: Expanded(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text(
                            'ROUND',
                            style: TextStyle(
                              fontSize: 20,
                              fontWeight: FontWeight.w400,
                              color: Theme.of(context)
                                  .textTheme
                                  .displayLarge!
                                  .color,
                            ),
                          ),
                          Text(
                            '$rounds / $maxRound',
                            style: TextStyle(
                              fontSize: 30,
                              fontWeight: FontWeight.w400,
                              color: Theme.of(context)
                                  .textTheme
                                  .displayLarge!
                                  .color,
                            ),
                          )
                        ],
                      ),
                      Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text(
                            'GOAL',
                            style: TextStyle(
                              fontSize: 20,
                              fontWeight: FontWeight.w400,
                              color: Theme.of(context)
                                  .textTheme
                                  .displayLarge!
                                  .color,
                            ),
                          ),
                          Text(
                            '$goals / 12',
                            style: TextStyle(
                              fontSize: 30,
                              fontWeight: FontWeight.w400,
                              color: Theme.of(context)
                                  .textTheme
                                  .displayLarge!
                                  .color,
                            ),
                          )
                        ],
                      ),
                    ],
                  ),
                )),
          ),
        ],
      ),
    );
  }
}