flutter_프로젝트/1_타이머_만들기

7. 시간 선택하기

studyapps 2024. 11. 21. 22:01

최종 코드

 

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const stopWatch(),
    );
  }
}

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

  @override
  State<stopWatch> createState() => _stopWatchState();
}

class _stopWatchState extends State<stopWatch> {
  var ttotal = 100;
  Timer? _timer;
  bool isRunning = false;

  void start_btn() {
    _timer = Timer.periodic(const Duration(seconds: 1), (Timer t) {
      setState(() {
        isRunning = true;
        ttotal -= 1;
        if (ttotal <= 0) {
          _timer?.cancel();
          isRunning = false;
        }
      });
    });
  }

  void pause_btn() {
    setState(() {
      isRunning = false;
    });
    _timer?.cancel();
  }

  void showTimerPicker() {
    showCupertinoModalPopup(
      context: context,
      builder: (BuildContext context) {
        return Container(
          height: 250,
          color: Colors.white,
          child: CupertinoTimerPicker(
            mode: CupertinoTimerPickerMode.hm,
            onTimerDurationChanged: (Duration value) {
              setState(() {
                ttotal = value.inMinutes * 60 + value.inSeconds;
              });
            },
          ),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('StopWatch'),
        centerTitle: true,
        actions: [
          IconButton(
            icon: const Icon(Icons.timer),
            onPressed: showTimerPicker,
          )
        ],
      ),
      body: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Column(
            // mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const SizedBox(
                height: 100,
              ),
              Container(
                  height: 200,
                  width: 200,
                  decoration: const BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(100)),
                    color: Colors.amber,
                  ),
                  child: Center(
                    child: Text(
                      '$ttotal',
                      style: const TextStyle(
                        fontSize: 40,
                        color: Colors.white,
                      ),
                    ),
                  )),
              const SizedBox(
                height: 30,
              ),
              ElevatedButton(
                onPressed: isRunning ? pause_btn : start_btn,
                child: Text(isRunning ? 'Pause' : 'Start'),
              )
            ],
          )
        ],
      ),
    );
  }
}