[Flutter] Pomodoro 앱 만들기

UI

flexible

• 픽셀로 지정하면 기기마다 유연한 UI 대응을 하지 못하기 때문에 flexible을 이용하면 알아서 비율을 맞춰준다.
• flex: 로 비율 정해주기 가능.

  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          //Flexible UI를 비율에 맞춰 유연하게 만들어 줌.
          Flexible(
            flex: 1,
            child: Container(
              decoration: const BoxDecoration(
                color: Colors.red,
              ),
            ),
          ),
          Flexible(
            flex: 3,
            child: Container(
              decoration: const BoxDecoration(
                color: Colors.green,
              ),
            ),
          ),
          Flexible(
            flex: 1,
            child: Container(
              decoration: const BoxDecoration(
                color: Colors.blue,
              ),
            ),
          )
        ],
      ),
    );
  }

Expanded

• 영역을 꽉 채우도록 하는 위젯

Timer

  int totalSeconds = 1500;

  //dart:asnyc 클래스임.->  import 'dart:async';
  late Timer timer;

  void onTick(Timer timer) {
    setState(() {
      totalSeconds--;
    });
  }

  void onStartPressed() {
    timer = Timer.periodic(
      //1초마다 onTick을 실행
      const Duration(seconds: 1),
      onTick,
    );
  }

pause play

  bool isRunning = false;


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

  void onPausePressed() {
    // timer 취소 메서드
    timer.cancel();

    setState(() {
      isRunning = false;
    });
  }

isRunning에 따라 작동 함수와 표시 아이콘을 삼항조건문으로 처리.

              onPressed: () {
                  isRunning ? onPausePressed() : onStartPressed();
                },
                icon: Icon(isRunning
                    ? Icons.pause_circle_outline
                    : Icons.play_circle_outline),
              ),

Date Format

• 0초되면 리셋

static const twentyFiveMinutes = 1500;
int totalSeconds = twentyFiveMinutes;

void onTick(Timer timer) {
    if (totalSeconds == 0) {
      setState(() {
        totalPomodoros++;
        isRunning = false;
        totalSeconds = twentyFiveMinutes;
      });
      timer.cancel();
    } else {
      setState(() {
        totalSeconds--;
      });
    }
  }

date Format

• 1500을 25:00으로 바꾸기

// 기존 
child: Text(
                '$totalSeconds',
                style: TextStyle(
                  color: Theme.of(context).cardColor,
                  fontSize: 89,
                  fontWeight: FontWeight.w600,
                ),
                  
            

$totalSeconds->
 child: Text(
         format(totalSeconds),
         style: TextStyle(  
  --- format 함수 ----
  
    String format(int seconds) {
    var duration = Duration(seconds: seconds);
    var minutes = duration.toString().split('.')[0].split(':')[1];
    var second = duration.toString().split('.')[0].split(':')[2];
    return '$minutes:$second';
  }

완성본 깃헙 링크