Nomad - Challengs - nine

main.dart

import 'dart:async';

import 'package:flutter/material.dart';

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  late final AnimationController _animationController = AnimationController(
      vsync: this, duration: const Duration(milliseconds: 300));

  late final Animation<double> _animation =
      Tween(begin: 1.0, end: 1.5).animate(_animationController);

  late Timer timer;

  bool _isPlay = false;
  String _setMinute = "00";
  String _setSecond = "00";
  int roundScore = 0;
  int goalScore = 0;

  int _selectedIndex = 0;
  int _totalSecond = 0;

  final List<int> times = [
    5,
    10,
    15,
    20,
    25,
    30,
    35,
    40,
    45,
    50,
  ];

  void _onPlanTimeTap(int index) {
    int minute = times[index];

    _totalSecond = minute * 60;
    _selectedIndex = index;

    if (minute < 10) {
      _setMinute = '0$minute';
    } else {
      _setMinute = '$minute';
    }
    _setSecond = "00";
    setState(() {});
  }

  @override
  void initState() {
    super.initState();
  }

  void _onActionTab() {
    if (_totalSecond == 0) return;

    if (_animationController.isCompleted) {
      _animationController.reverse();
    } else {
      _animationController.forward();
    }

    setState(() {
      _isPlay = !_isPlay;
    });

    if (_isPlay) {
      timer = Timer.periodic(const Duration(seconds: 1), (timer) => _onTick());
    } else {
      timer.cancel();
    }
  }

  void _onTick() {
    _totalSecond = _totalSecond - 1;
    Duration duration = Duration(seconds: _totalSecond);
    int m = duration.inMinutes;
    int s = duration.inSeconds % 60;
    if (m < 10) {
      _setMinute = '0$m';
    } else {
      _setMinute = '$m';
    }
    if (s < 10) {
      _setSecond = '0$s';
    } else {
      _setSecond = '$s';
    }
    if (_totalSecond == 0) {
      timer.cancel();
      roundScore = roundScore + 1;
      if (roundScore == 4) {
        goalScore = goalScore + 1;
        roundScore = 0;
      }
      _animationController.reverse();
      _isPlay = !_isPlay;
      _onPlanTimeTap(_selectedIndex);
    }
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        scaffoldBackgroundColor: Colors.orange.shade800,
        appBarTheme: AppBarTheme(
          color: Colors.orange.shade800,
        ),
      ),
      home: SafeArea(
        child: Scaffold(
          // backgroundColor: Colors.black,
          appBar: AppBar(
            title: const Text(
              'POMOTIMER',
              style: TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.w600,
                letterSpacing: 2,
              ),
            ),
            centerTitle: false,
            elevation: 0,
          ),
          body: Column(
            children: [
              Flexible(
                flex: 4,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Padding(
                      padding: const EdgeInsets.only(top: 40),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Container(
                            decoration: BoxDecoration(
                              color: Colors.white,
                              borderRadius: BorderRadius.circular(3),
                            ),
                            child: Padding(
                              padding: const EdgeInsets.symmetric(
                                  horizontal: 15, vertical: 30),
                              child: Text(
                                _setMinute,
                                style: TextStyle(
                                  color: Colors.orange.shade800,
                                  fontSize: 90,
                                  fontWeight: FontWeight.w800,
                                ),
                              ),
                            ),
                          ),
                          const SizedBox(width: 10),
                          const Text(
                            ":",
                            style: TextStyle(
                              color: Colors.white54,
                              fontSize: 50,
                              fontWeight: FontWeight.w600,
                            ),
                          ),
                          const SizedBox(width: 10),
                          Container(
                            decoration: BoxDecoration(
                              color: Colors.white,
                              borderRadius: BorderRadius.circular(3),
                            ),
                            child: Padding(
                              padding: const EdgeInsets.symmetric(
                                  horizontal: 15, vertical: 30),
                              child: Text(
                                _setSecond,
                                style: TextStyle(
                                  color: Colors.orange.shade800,
                                  fontSize: 90,
                                  fontWeight: FontWeight.w800,
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.symmetric(vertical: 30),
                      child: SizedBox(
                        height: 55,
                        child: ListView.builder(
                          scrollDirection: Axis.horizontal,
                          itemCount: times.length,
                          itemBuilder: (context, index) {
                            return Padding(
                              padding: const EdgeInsets.symmetric(
                                horizontal: 5,
                              ),
                              child: Container(
                                color: Colors.white,
                                child: Center(
                                  child: GestureDetector(
                                    onTap: () => _onPlanTimeTap(index),
                                    child: Container(
                                      decoration: BoxDecoration(
                                        color: Colors.white,
                                        borderRadius: BorderRadius.circular(5),
                                      ),
                                      child: Padding(
                                        padding: const EdgeInsets.all(20),
                                        child: Text(
                                          '${times[index]}',
                                          style: TextStyle(
                                              color: Colors.orange.shade800),
                                        ),
                                      ),
                                    ),
                                  ),
                                ),
                              ),
                            );
                          },
                        ),
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.symmetric(vertical: 30),
                      child: Center(
                        child: GestureDetector(
                          onTap: _onActionTab,
                          child: CircleAvatar(
                            backgroundColor: Colors.orange.shade900,
                            radius: 40,
                            child: AnimatedSwitcher(
                              duration: const Duration(milliseconds: 300),
                              transitionBuilder: (child, animation) {
                                return ScaleTransition(
                                  scale: _animation,
                                  child: child,
                                );
                              },
                              child: _isPlay
                                  ? const Icon(
                                      Icons.pause,
                                      color: Colors.white,
                                      size: 40,
                                    )
                                  : const Icon(
                                      Icons.play_arrow,
                                      color: Colors.white,
                                      size: 40,
                                    ),
                            ),
                          ),
                        ),
                      ),
                    )
                  ],
                ),
              ),
              Flexible(
                flex: 1,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    Column(
                      children: [
                        Text(
                          '$roundScore/4',
                          style: const TextStyle(
                            color: Colors.white54,
                            fontSize: 30,
                            fontWeight: FontWeight.w600,
                          ),
                        ),
                        const SizedBox(
                          height: 10,
                        ),
                        const Text(
                          'ROUND',
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 25,
                            fontWeight: FontWeight.w600,
                          ),
                        )
                      ],
                    ),
                    Column(
                      children: [
                        Text(
                          '$goalScore/12',
                          style: const TextStyle(
                            color: Colors.white54,
                            fontSize: 30,
                            fontWeight: FontWeight.w600,
                          ),
                        ),
                        const SizedBox(
                          height: 10,
                        ),
                        const Text(
                          'GOAL',
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 25,
                            fontWeight: FontWeight.w600,
                          ),
                        )
                      ],
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}