[Pomodoro App] #04. Date Format

<타이머의 초가 0이 되면 Pomodoros를 1씩 증가시키고 타이머는 다시 처음으로 돌아가게 해보자>

: #03까지는타이머를 1500으로 해서 전체 초로 표기를 했는데 이젠 분단위로 끊어서 표현해보자.

: 타이머의 초가 다 끝나면 다시 처음으로 돌아가게 하자.

: 이때 하단의 pomodoros의 횟수를 1씩 증가시키도록 하자. 

 

home_screen.dart(main.dart는 변한게 없다. main.dart가 궁금하다면 #01을 보도록 해라!)

//home_screen.dart
//main은 그대로

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

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

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

class _HomeScreenState extends State<HomeScreen> {

  static const twentyFiveMinutes = 1500;

  int totalSeconds = twentyFiveMinutes;
  bool isRunning = false;
  int totalPomodoros = 0;
  late Timer timer;

  void onTick(Timer timer){  //1초마다 시행되는 함수
    if(totalSeconds == 0){ //totalSeconds가 0이 되면
      setState((){
        totalPomodoros = totalPomodoros + 1;  //totalPomodoros를 1 증가시키기
        isRunning = false; //isRunning도 false로 바꾸기 -> 아이콘 모양이 바뀜
        totalSeconds = twentyFiveMinutes;  //totalSeconds는 다시 1500으로 복귀
      });
      timer.cancel();  //타이머 멈추기
    }
    else{
      setState(() {
        totalSeconds = totalSeconds - 1;
      });
    }

  }

  void onStartPressed(){
    timer = Timer.periodic(
        Duration(seconds: 1),
        onTick
    );
    setState(() {
      isRunning = true;
    });
  }

  void onPausePressed(){ //멈추기
    timer.cancel();
    setState(() {
      isRunning = false;
    });
  }

  //타이머를 분단위로 표시하기 위한 함수
  String format(int seconds){
    var duration = Duration(seconds: seconds);
    //print(duration.toString().split("."));
    //duration을 문자열로 바꾸고 '.'을 기준으로 분할
    //list를 받게 됨 ex) [0:25:00, 000000] -> 이처럼 '.'을 기준으로 분할하여 list에 저장

    //print(duration.toString().split(".").first.subString(2,7));
    //우리는 리스트의 첫번째 부분만 필요하니까 .first 작성
    //또한 2번째 요소부터 7번째 까지가 필요하니까 .substring(2,7) 작성
    return duration.toString().split(".").first.substring(2,7);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Theme.of(context).
      backgroundColor,
      body:  Column(
        children: [
          Flexible(
            flex: 1,
            child: Container(
              alignment: Alignment.bottomCenter,
              child: Text(format(totalSeconds),
              style: TextStyle(color: Theme.of(context).cardColor,
                fontSize: 89,
                fontWeight: FontWeight.w600,
              ),
              ),
            ),
          ),
          Flexible(
           flex : 3,
            child: Center(
            child: IconButton(
              iconSize: 120,
              color: Theme.of(context).cardColor,
              onPressed: isRunning?
              onPausePressed : onStartPressed,
              icon: Icon(isRunning?
              Icons.pause_circle_outline:Icons.play_circle_outline),
            ),
            ),
          ),
          Flexible(
            flex: 1,
            child: Row(
              children: [
                Expanded(
                  child: Container(
                  decoration: BoxDecoration(
                    color: Theme.of(context).cardColor,
                    //borderRadius: BorderRadius.circular(50), //맨 아래 박스 모서리를 둥글게 만들기
                  ),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text('Pomodors',
                      style: TextStyle(
                        fontSize: 20,
                        fontWeight: FontWeight.w600,
                        color: Theme.of
                          (context).textTheme.
                          headline1!.color,
                      ),
                      ),
                      Text('$totalPomodoros',
                          style: TextStyle(
                          fontSize: 60,
                          fontWeight: FontWeight.w600,
                          color: Theme.of
                          (context).textTheme.
                      headline1!.color,
                          ),
                      ),
                    ],
                  ),
                ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

 

*실행화면

>> Duration과 split 등을 사용해서 왼쪽 사과 같이 초단위로 표시되던 시간을 분단위로 바꿔줬다.

>> 중앙의 사진처럼 재생아이콘을 누르면 아이콘이 변화하고 1초마다 상단의 타이머가 줄어든다.

>> 다시 멈춤아이콘을 누르면 오른쪽의 사진처럼 아이콘이 변화하고 타이머도 멈춘다.

>> 사진엔 없지만 초가 다 끝나면 하단의 Pomodoros도 1이 증가하게 된다.