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

1.타이머 만들기 - 스케치

studyapps 2024. 7. 13. 23:39

플러터 책은 몇번 보고 "따라치기" 만 해서는 실력이 늘 수 없다는 것을 깨닫고... -_-;;;

 

책에 나온것과 비슷한 것들을 스스로 작성해보고....책과 맞춰 보는 방법을 택하기로 하였음

 

또 모든 코드를 기억 못하는 관계로, 블로그에 내용을 남기고자함

 

<타이머 만들기>

 

flutter 책에 보면 자주 나오는 예제이다. 책에 나온것과 유사하게 만들어 보기로 한다.

 

처음에는 아래와 같은 디자인을 만들어 보도록 한다.

 

아무기능도 없는 껍데기 완성

 

import 'package:flutter/material.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> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('StopWatch'),
        centerTitle: true,
        // 앱바 타이틀이 중앙에 오게 한다
      ),
      body: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Column(
            children: [
              const SizedBox(
                height: 100,
              // 높이 100인 박스를 먼저 배치
              ),
              Container(
                  height: 200,
                  width: 200,
              // 아래에 컨테이너 배치
                  decoration: const BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(100)),
                    // 모서리를 둥글게 한다 반지름 100으로 높이 너비 200에 반지름 100임으로 원이 된다
                    color: Colors.amber,
                  ),
                  child: const Center(
                    child: Text(
                      "25:00",
                      style: TextStyle(
                        fontSize: 40,
                        color: Colors.white,
                      ),
                    ),
                   // 컨테이너 아래 텍스트를 배치한다
                  )),
              const SizedBox(
                height: 30,
              ),
              ElevatedButton(
                onPressed: () {},
                child: const Text('Start'),
              )
             // 버튼을 배치한다.
            ],
          )
        ],
      ),
    );
  }
}

 

<결과>