[Flutter 9기 창업반] 앱 개발 창업 부트캠프 22일차

오늘도 챗gpt와 싸웠다😡🔥

AI 남친 아님‼️  사랑싸움 아님‼️

애증의 관계.... 난 장님이 된 기분이었다구 알아?

 

어. 뭐 별일은 아니고, 과제하는데 자꾸 지 멋대로 하길래 싸운것뿐... ㅋㅋㅋㅋㅋ

너무 화도 나고 이렇게까지 하는데도 제대로 모르고 혼자 못하는 내가 너무 답답하고 짜증나서 울어버렸다

매번 급발진좀 하지 말고 차근차근히 물어보는것만 대답하라는데도 풀악셀 밟는 지피티....🤯

감정이 북받쳐 있는데 엄마가 전화와서 나름  요양보호사 동료 분들께 설문조사를 했는지 신이 나셔서 전화가 왔다

ㅋㅋㅋㅋㅋㅋㅋㅋ 너 왜 울엌ㅋㅋㅋㅋㅋ 과제하다가 너무 짜증나서... 라는 

고 3때도 안했던 대화를 하고나서 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ하... ㅋㅋㅋㅋㅋㅋㅋㅋ

다행히 좋은 소식도 전달 받았다.

단일 결제라면 그 금액이 10000원이어도 본인은 구매해서 사용하겠다는 고객님이 나타난것✨

 

뭐 아무튼 오늘은 아이템에서 벗어나 과제에 집중해야 했기에...

그리고 아직 과제가 진행중이기에ㅠ 

오늘 TIL은 음.. 현재까지 한 내용들만 정리해서 올려야겠다.

 

 

---

 

 

 

📘 TIL – Flutter ToDo 앱 실습 정리

 

 

1️⃣ BottomSheet로 ToDo 생성하기

 

• FloatingActionButton 클릭 시 showModalBottomSheet를 사용해 할 일 입력 UI를 띄움
• BottomSheet 내부에서
  • 제목(TextField)
  • 세부 설명(TextField)
  • 즐겨찾기(별 아이콘)
• 저장 버튼 클릭 시
• → Navigator.pop(context, todo)로 ToDo 객체를 HomePage로 반환

 

👉 BottomSheet는 “입력 전용 UI”이고,

데이터는 pop으로 상위 위젯에 전달된다는 걸 이해함

 

---

 

2️⃣ HomePage에서 ToDo 리스트 관리

 

• HomePage를 StatefulWidget으로 변경
• List<ToDo> todos 상태로 할 일 목록 관리
• BottomSheet에서 반환된 결과를 받아 todos.add(result)로 저장
• todos.isEmpty 여부에 따라
  • 비어있으면 EmptyTaskCard
  • 있으면 ToDo 리스트 화면을 보여주도록 분기 처리

 

👉 화면 분기는 bool이 아니라 “데이터 상태”로 판단하는 게 핵심

 

---

 

3️⃣ ToDoView 컴포넌트 분리

 

• 할 일 하나를 표현하는 UI를 ToDoView로 분리
• ToDoView는 다음을 외부에서 받음:
  • ToDo toDo
  • onToggleFavorite
  • onToggleDone

 

👉 View는 상태를 직접 바꾸지 않고,

“행동만 알려주는 역할”을 한다는 개념을 배움

 

---

 

4️⃣ copyWith의 역할 이해

 

• 즐겨찾기 / 완료 상태 토글 시
  • 기존 객체를 직접 수정하지 않고
  • copyWith로 새 ToDo 객체를 만들어 리스트에 다시 대입
• 이 방식이 필요한 이유:
  • 불변 데이터 패턴
  • 리스트 상태 변경을 Flutter가 정확히 인식하게 하기 위함

 

👉 copyWith는 “여러 개의 ToDo를 독립적으로 관리”하기 위한 필수 구조라는 걸 이해함

 

---

 

5️⃣ ListView로 ToDo 여러 개 표시

 

• ListView.separated 사용
  • padding: 좌우 16 / 상하 8
  • 아이템 간 간격 12
• 각 아이템에 ToDoView 연결
• 즐겨찾기 / 완료 토글이 각 ToDo마다 독립적으로 동작하도록 수정

 

👉 index 기반 상태 업데이트의 중요성 체감

 

---

 

6️⃣ 배경색 문제 해결

 

• Scaffold의 body 전체를 감싸는 방식으로 배경색 처리
• ListView 자체가 화면을 차지해도
• 배경은 body 기준으로 깔려야 한다는 개념 정리

 

👉 배경은 “자식 위젯 크기”가 아니라

Scaffold body 영역 기준이라는 걸 명확히 이해함

 

---

 

7️⃣ ToDoView 탭 → DetailPage 이동

 

• ToDoView를 GestureDetector로 감싸 클릭 이벤트 처리
• Navigator.push로 ToDoDetailPage 이동
• 터미널 로그로
  • 탭 이벤트 확인
  • 네비게이션 흐름 검증

 

👉 화면 전환 흐름이 “추상 개념”이 아니라 실제로 연결됨

 

---

 

✨ 오늘 핵심 요약 한 줄

 

Flutter에서 화면은 상태(List),

UI는 컴포넌트,

행동은 콜백으로 분리해서 관리한다