[노마드코더: Flutter 로 웹툰 앱 만들기] #5.4 Code Challenge

코드 챌린지

지금까지 만든 화면에는 존재하지 않는
Restart 하는 기능을 넣어보자!

 

when we want to make our screen changed....
we have to put inside of setState()

TextButton(
	style: ButtonStyle(
	shadowColor: MaterialStateProperty.all(Colors.red),
    backgroundColor: MaterialStateProperty.all(
    Theme.of(context).cardColor,
    )),
    onPressed: resetTimer,
    child: Text(
    	'RESET',
        style: TextStyle(
        color: Theme.of(context)
        .textTheme
        .headline1!
        .color!
        .withOpacity(0.8),
        fontSize: 15,
    	),
	),
),

위에는 버튼 코드

void resetTimer() {
    setState(() {
      totalSeconds = twentyFiveMinutes;
      });
}

해당 함수를 이용해서 

화면이 바뀌기 때문에 setTimer(){} 안에 넣었다.

문제 없이 바뀌는 것 완료~!

재생 중에도 초기화 되면서 시간이 줄어든다. 

 

 

---

home_screen.dart 전체 코드이다.

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;
  late Timer timer;
  int totalPomodoros = 0;

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

  // good example for a variable modifier 'late'
  void onStartPressed() {
    setState(() {
      isRunning = !isRunning;
    });
    timer = Timer.periodic(
      const Duration(seconds: 1),
      //1초마다 아래 함수가 실행된다.
      onTick,
    );
  }

  void onPausePressed() {
    //타이머를 멈추는 기능
    timer.cancel();
    setState(() {
      isRunning = false;
    });
  }

  String format(int seconds) {
    var duration = Duration(seconds: seconds);
    return duration.toString().split(".").first.substring(3, 7);
  }

  void resetTimer() {
    setState(() {
      totalSeconds = twentyFiveMinutes;
    });
  }

  @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: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    IconButton(
                      color: Theme.of(context).cardColor,
                      iconSize: 120,
                      onPressed: isRunning ? onPausePressed : onStartPressed,
                      icon: isRunning
                          ? const Icon(Icons.stop_circle_outlined)
                          : const Icon(Icons.play_circle_outline),
                    ),
                    TextButton(
                      style: ButtonStyle(
                          shadowColor: MaterialStateProperty.all(Colors.red),
                          backgroundColor: MaterialStateProperty.all(
                            Theme.of(context).cardColor,
                          )),
                      onPressed: resetTimer,
                      child: Text(
                        'RESET',
                        style: TextStyle(
                          color: Theme.of(context)
                              .textTheme
                              .headline1!
                              .color!
                              .withOpacity(0.8),
                          fontSize: 15,
                        ),
                      ),
                    ),
                  ]),
            ),
            // child: Center(
            //   child: IconButton(
            //     color: Theme.of(context).cardColor,
            //     iconSize: 120,
            //     onPressed: isRunning ? onPausePressed : onStartPressed,
            //     icon: isRunning
            //         ? const Icon(Icons.stop_circle_outlined)
            //         : const Icon(Icons.play_circle_outline),
            //   ),
            // ),
          ),
          Flexible(
            flex: 1,
            child: Row(
              children: [
                Expanded(
                  child: Container(
                    decoration: BoxDecoration(
                      borderRadius: const BorderRadius.only(
                        topLeft: Radius.circular(50),
                        topRight: Radius.circular(50),
                      ),
                      color: Theme.of(context).cardColor,
                    ),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Text('pomodoro',
                            style: TextStyle(
                              fontSize: 20,
                              fontWeight: FontWeight.w600,
                              color:
                                  Theme.of(context).textTheme.headline1!.color,
                            )),
                        Text('$totalPomodoros',
                            style: TextStyle(
                              fontSize: 58,
                              fontWeight: FontWeight.w600,
                              color:
                                  Theme.of(context).textTheme.headline1!.color,
                            )),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}