Pomodoros 구조 복습

1. Widget Theme 만들기

class App extends StatelessWidget {
	const App({super.key});
	
	@override
    Widget build(BuildContext context) {
    	return MaterialApp(
        	theme: ThemeData(
            	**colorScheme**: ColorScheme.fromSwatch(
                	backgroundColor: const Color(0xFFE7626C),
            	),
                **textTheme**: const TextTheme(
                	displayLarge: TextStyle(
                    	color: Color(0xFF232B55),
                    ),
                ),
                **cardColor**: const Color(0xFFF4EDDB),
            ),
            home: const **HomeScreen()**,
        );
    }
}

위젯의 테마를 main.dart에 미리 만들어 두고, 상속할 수 있게 한다.

colorScheme, textTheme, cardColor, HomeScreen()

2. 실제 Screen 구현

class HomeScreen extends StatefulWidget {
	const HomeScreen({super.key});
    
    @override
    State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
	static const timeFormat = 1500;
    int totalSeconds = timeFormat;
    
    late Timer timer;
    
    bool isRunning = false;
    int totalPomodoros = 0;
}

main.dart에서 만들어 둔 HomeScreen() 상속

< ! 중요 ! > Timer에서 timer를 생성하였으나, 바로 초기화하고싶지 않기 때문에 late modifer 적용
(단, 호출할 때 반드시 초기화해야 함)

구현해야 할 기능

1) 타이머 작동
2) 타이머 시작/일시정지
3) 타이머 리셋
4) 타이머 초 -> 분 변환

2-1. onTick(Timer timer) {}

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

타이머의 초가 0이 되었다면(끝났다면),
timeFormat 값을 다시 부여하고
totalPomodoros(타이머 완료한 횟수)는 1회 올려준다.

2-2. onStartPressed() {}

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

사용자가 타이머 버튼을 눌렀을 때 인지하기 위해
버튼에 onStartPressed()를 부여할 예정

위에서 onTick()이 아니고 onTick인 이유는,
함수를 당장 실행하겠다고 알리는 것

Timer의 문법은 아래와 같다

Timer Timer.periodic(Duration duration, void Function(Timer) callback)

2-3. onPausePressed() {}

void onPausePressed() {
	timer.cancel();
    
    setState(() {
    	isRunning = false;
    {);
}

2-4. resetTimer() {}

void resetTimer() {
	timer.cancel();
    
    setState(() {
    	isRunning = false;
        totalSefcodns = timerFormat;
    });
}

2-5. 타이머 초를 분으로 formatting

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

Duration(seconds: seconds) -> ex) 0:25:00.000000 -> 25:00으로 분리하고싶음

duration(변수)를 스트링으로 바꾼 뒤 split "."기준으로 실행 -> 0:25:00 과 000000 가 분리되어 list에 저장됨

-> .first를 해서 첫번째 아이템만 가져옴

substring(start, end) -> start 부터 end 까지 해당하는 인덱스 스트링 컷팅

인덱스는 2~6 이지만 마지막 인덱스 +1 해서 커트해야 마지막 인덱스까지 표시 됨

🤔 참고사항 🤔

1) main.dart에서 생성한 theme 적용하기

• backgroundColor: Thmee.of(context).colorScheme.background
• color: Theme.of(context).cardColor

2) IconButton이 눌렸을 때, 동작 설정하기

• IconButton{ onPressed: 동작 }

IconButton{
	onPressed: isRunning ? onPausedPressed : onStartPressed,
    icon: Icon{
    	isRunning
        	? Icons.일시정지아이콘
            : Icons.재생아이콘
    }
}

-> IconButton이 눌렸을 때,

isRunning이 true면 onPausedPressed를 실행하고,
false면 onStartPressed를 실행한다

-> onPausedPressed의 setState((){}) 에 isRunning을 false로,
onStartPressed의 setState((){}) 에 isRunnigng을 true로 설정하였던 것을 기억

3) Flexible

• UI를 하드코딩하지 않아도 비율로 조절