[Flutter 9기 창업반] 앱 개발 창업 부트캠프 23일차 _ 개인과제 트러블 슈팅

 

🛠️ 개인과제 트러블 슈팅

- Flutter ToDo 앱  UI 만들기

 

1️⃣ ToDo 상태가 엉켜서 같이 눌리는 문제 (완료 / 즐겨찾기)

 

배경 :

ToDo 리스트에서

• 체크 서클 버튼 → 완료 상태(isDone)
• 별 버튼 → 즐겨찾기 상태(isFavorite)
• 를 각각 독립적으로 토글하는 기능을 구현함.

 

발단 :

별 아이콘을 눌렀는데 체크 서클도 같이 눌리거나,

어떤 ToDo는 별과 체크가 아예 반응하지 않는 문제가 발생함.

처음에는 UI 위젯 문제이거나 상태 관리가 꼬인 줄로 오해함.

 

전개 :

문제를 추적해 보니 HomePage에서 ToDoView에 넘기는 콜백 부분에서

상태를 업데이트하는 로직이 서로 섞여 있었음.

//즐찾토글

onToggleFavorite: () {

setState(() {

todos[index] = t.copyWith(isFavorite: !t.isFavorite);

});

},

//완료토글

onToggleDone: () {

setState(() {

todos[index] = t.copyWith(isDone: !t.isDone);

});

이 두 로직이 짝이 맞아야 하는데,

이전 코드에서는 onToggleDone에서 isFavorite 값을 참조하거나,

반대로 onToggleFavorite에서 isDone을 건드리는 실수가 있었음.

 

위기 :

UI상으로는 버튼이 분리되어 있는데

상태는 같은 필드를 건드리고 있어

“하나를 누르면 둘 다 바뀌는” 이상한 현상이 발생함.

문제가 UI인지, copyWith인지, 위젯 트리인지 판단이 어려워 혼란이 커짐.

 

절정 :

콜백 하나하나를 다시 분리해서 점검하면서

각 토글이 자기 상태만 변경해야 한다는 원칙을 다시 정리함.

• 즐겨찾기 버튼 → isFavorite만 변경
• 완료 버튼 → isDone만 변경

필드 짝을 정확히 맞춰 copyWith를 호출하도록 수정함.

 

결말 :

상태가 완전히 분리되어 정상 동작하게 되었고,

ToDo 하나하나가 독립적으로 완료 / 즐겨찾기 상태를 유지함.

 

---

 

2️⃣ 배경색이 잘리고 화면이 이상하게 보이던 문제

 

배경 :

HomePage의 body 영역에 배경색을 깔고

그 위에 ToDo 리스트를 올리는 구조를 만들고 있었음.

 

발단 :

ToDoView가 하나만 있을 때는 괜찮아 보였지만

리스트가 생기자 배경색이 일부만 보이거나 카드 크기만큼만 색이 깔리는 현상이 발생.

 

전개 :

Expanded, Center, Padding 등을 이것저것 시도하면서

배경이 왜 줄어드는지 원인을 찾으려 했지만 오히려 레이아웃이 더 꼬이기 시작함.

 

위기 :

분명 자식 클래스에 배경 크기가 맞춰진다는건 알고 있었는데,

정확하게 어디에 색을 넣어야 하는지 몰라서 혼란스러웠음.

 

절정 :

배경색은 리스트가 아니라 body 전체를 감싸야 한다는 점을 인지.

Container(color: ...)를

ListView 바깥, Scaffold.body의 최상단에 배치하도록 구조를 수정함.

 

결말 :

배경색이 화면 전체에 안정적으로 적용되었고,

리스트 스크롤과도 충돌 없이 정상 동작.

Flutter 레이아웃에서

“어디까지 감싸는가”가 얼마나 중요한지 명확히 이해함.

 

 

---

 

📖 내가 느낀 어려웠던 점

 

이번 과제에서 가장 어려웠던 점은 위젯을 만드는 것 자체보다

보이는 것과 기능의 경계를 명확히 나누는 것이었다.

 

UI는 눈에 보이기 때문에 수정이 쉬운 반면,

데이터가 어디서 생성되고 어디서 수정되고 어디까지 전달되는지

이 흐름을 놓치면 전체 구조가 한 번에 무너졌다.

 

특히 Home → ToDoView → DetailPage로 이어지는 구조에서

어디까지가 표시용이고, 어디부터가 상태 변경 인지 구분하는 데 시간이 많이 걸렸다.

 

또한 기능이 늘어날수록 코드를 바로 치기보다

구조를 먼저 정리하지 않으면 계속 되돌아가게 된다는 점을 절실히 느꼈다.

 

길을 많이 잃었다...

 

---

 

📌 보완 방향 & 학습 계획

• 상태 소유자부터 먼저 정리하기
  → 이 데이터는 누가 관리하는지 먼저 결정한 후 UI 구현
• 콜백 흐름을 말로 설명해보는 연습
  → “이 버튼을 누르면 어떤 함수가, 어디서 호출되는가”를 설명 가능하게
• UI 수정 전에 구조부터 점검상위 구조부터 다시 확인
  → 화면이 이상하면 위젯을 늘리기보다 작은 기능 단위로 확실히 완성하기
• 하나씩 확실히 동작하는지 확인 후 다음 단계 진행
  → 즐겨찾기, 완료, 삭제 등
• 에러 메시지와 증상을 연결해서 이해하기UI가 아닌 상태 흐름 기준으로 해석하는 연습
  → “왜 이런 현상이 나오는지”