[ project ] Stop Watch ( 스톱워치 )

니꼬쌤 강의 보고 포모도로 앱 만든 뒤 연습삼아 그냥 만들어 본 스톱워치아직 구간 기록은 구현이 안되어 있고 그 외는 모두 만들어놨습니다.삼성 앱에 시계 기능 중 스톱워치 기능을 그대로 가져와서 구현했습니다.다만 아쉽다면.. 마구자비로 짜내다보니 코드가 좀 엉망입니다..그 중 핵심코드를 꼽자면 // 밀리세컨드 기준으로 분:초:밀리세컨드 포맷 String format(int milliSecond) { int tempMilliSecond = milliSecond % 100; int tempSecond = ((milliSecond / 100) % 60).toInt(); int second = (milliSecond / 100).toInt(); int min = (second / 60..

• format_list_bulleted 카테고리 없음
• · 2025. 9. 2.

[ Project ] Pomodoro App

니꼬쌤 강의 들으며 포모도로 앱을 만들어 보았습니다. 주제는 포모도로 앱이고, 흔히 25분 일하고 5분 쉰다는 개념으로 필수적으로 시간이라는 개념이 들어가는 앱입니다. 그리하여, Timer 이라는 객체에 대해 공부를 해보았습니다. import 'dart:async';Timer? timer;int totalSeconds = 2500;// 타이머 시작void onStartPressed() { timer = Timer.periodic(Duration(seconds: 1), onTick);}// 1초마다 시작할 콜백 함수void onTick(Timer timer) { setState(() { totalSeconds--; });} 위와 같이 'dart:async' 를 import 해줘야 되구요.Tim..

• format_list_bulleted Mobile/Flutter
• · 2025. 9. 2.

[ project ] 클릭 게임

원하는 목표: 기억력 테스트 원래는 그냥 클릭하는 게임을 만들려고 했는데... 만들다 보니 아이디어가 떠올라서 기억력 테스트 게임을 만들어봐도 괜찮을거라 생각했다......만 내 실력을 훨씬 뛰어넘는 개념과 능력이 필요해서 일단 바이브 코딩으로 해보기로 했습니다.첫 화면. 이며 숫자 9가지를 보여줍니다. 점수를 얻는 방식은 1~9까지의 숫자를 순서대로 맞추는 것 입니다.5초가 지나면 다음과 같이 ? 가 되어 나오고 클릭하면 카드가 돌아가며1 ~ 9 까지 순차적으로 맞추면 점수가 올라가게 됩니다.중간에 틀리면 Game Over 라고 뜨며, 게임 종료가 됩니다.

• format_list_bulleted Mobile/Flutter
• · 2025. 9. 2.

[ 2025.08.20 ] 01. setState / Counter

흔히 보이는 Counter를 예시로 들겠습니다. 위에 변수 counter를 넣습니다. IconButton을 누르면 onPress 이벤트로 위에서 정의한 add 함수가 실행됩니다. 그런데 아마 안되실겁니다. 왜 그럴까요?일단 플러스 버튼을 딸각하면 add 함수가 호출되고 counter 변수가 증가 합니다. 하지만 Flutter 즉 화면에는 변화가 없습니다. Flutter에서 setState 로 이 변수가 변했다는걸 알려줘야 합니다.즉! State안에서 상태값이 바뀌었으니. UI를 다시 그려라! 리빌드 해라! 라는걸 의미하게 됩니다. 이렇게 하여 + 버튼을 누르게 되면 리빌드 되면서 ui 반영이 되는 모습입니다.

• format_list_bulleted Mobile/Flutter
• · 2025. 8. 20.

[ 2025.08.19 ] StatefulWidget

( 저는 제가 최대한 쉽게 이해할려했기 때문에.. 주관적 이라는 점 참고 바랍니다. ) 기본적으로 Flutter를 처음 접하게 되면 StatelessWidget 을 접하게 됩니다. 간단하게 말하면 Stateless 즉 상태 관리가 필요 없는..그럼 오늘 제가 배웠던 Stateful Widget 에 대해 설명해볼까 합니다.Stateful Widget 은 Stateless와는 반대로 상태관리를 할 수 있고, 화면에 즉각적으로 반응형 으로 반응이 됩니다. StatelessWidget StatefulWidget 일단 _MainAppState 라고 class가 따로 떨어져 나갔습니다. MainApp에서 _MainAppState 호출하여 State를 만들게 되고 _MainAppState 에서는 build로 화면을..

• format_list_bulleted Mobile/Flutter
• · 2025. 8. 19.

[ 2025. 07. 27 ] ✨ Flutter 기본 레이아웃 연습: Wrap으로 박스형 UI 구현

이번 실습에서는 Flutter를 이용해 간단한 박스형 UI 그리드 를 구현해보았습니다. `Wrap` 위젯을 활용해 A~H 알파벳 박스를 자동 줄바꿈 형태로 배치했으며,각 박스는 파스텔톤 배경을 적용하여 부드럽고 깔끔한 느낌의 레이아웃 을 구성했습니다. 구현된 요소는 다음과 같습니다: - `AppBar`: 상단 고정 헤더, 앱 타이틀 "App" 표시 - `Wrap`: 알파벳 박스를 유연하게 나열하고 줄바꿈 처리 - `AlphabetBox`: 재사용 가능한 커스텀 박스 위젯, 알파벳과 배경색 주입 가능 - `Scaffold`: 전체 레이아웃의 기본 구조 제공 Flutter의 기본 구조인 `StatelessWidget`, `Scaffold`, `MaterialApp` 등 핵심 위젯에 익숙해질 수 있는 연습..

• format_list_bulleted Mobile/Flutter
• · 2025. 7. 27.