[Pomodoro App] #02. Timer

<아이콘버튼을 누르면 Timer가 작동되도록 하자>

: 지난번 #01 에서는 아이콘버튼을 눌러도 어떠한 이벤트가 발생하지 않았다.

: 이젠 아이콘버튼을 누르면 타이머가 작동되도록 하자(1초씩 줄어들도록 하자)

 

다음은 home_screen.dart의 코드이다.(main.dart는 변한 것이 없다.)

//home_screen.dart
//main은 #01랑 바뀐 거 없음 !

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> {

  int totalSeconds = 1500;
  late Timer timer;   //Timer를 통해 정해진 간격에 한번씩 함수를 시행할 수 있음

  void onTick(Timer timer){
    setState(() {
      totalSeconds = totalSeconds - 1;  //1초씩 줄어듦
    });
  }

  void onStartPressed(){
    timer = Timer.periodic(
        Duration(seconds: 1),     //1초마다
        onTick     //onTick 시행 (이때 onTick()이라고 쓰지 않는 것을 주의)
    );
  }


  @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('$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: onStartPressed,
              icon: Icon(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('0',
                          style: TextStyle(
                          fontSize: 60,
                          fontWeight: FontWeight.w600,
                          color: Theme.of
                          (context).textTheme.
                      headline1!.color,
                          ),
                      ),
                    ],
                  ),
                ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

 

*실행화면

>> 처음 화면은 왼쪽과 같이 보인다.

>> 아이콘을 누르면 상단에 있는 1500이 1초에 1씩 줄어든다.(오른쪽 사진은 줄어드는 모습이다.)