[TIL-020] Flutter로 기차 좌석 예매 어플 만들기-2

2025.04.01 - [TIL(Today I Learned)] - [TIL-019] Flutter로 기차 좌석 예매 어플 만들기-1

 

[TIL-019] Flutter로 기차 좌석 예매 어플 만들기-1

개요Flutter의 기본적인 상태 관리를 어떻게 하는지 알고 익숙해지기 위해 기차 좌석 예매 어플을 만들어 보자. 기능사용자의 시스템 테마에 따라 UI의 색상을 변경할 수 있다.상태 관리를 통해

skyhyunjinlee.tistory.com

 

문제 발생

simulator_screenshot_5199BDEA-9167-4E85-A4A7-52E065A838DD.png
완성본

 

많은 좌석을 완성본처럼 배치시키기 위해 무의식적으로 Column위젯을 사용하려다가 멈칫했다.

저번 TIL에서 언급했듯이 스크롤이 생기게 하기 위한 위젯은 따로 있었으니까.

 

공부를 한 보람을 느끼며 ListView위젯을 사용했지만 아래와 같은 아래가 수십 개나 발생했다.

etc-image-1
스크롤 생성을 위해 ListView위젯을 사용했으나 에러 발생

 

발생 이유 추측

에러의 내용은 잘 모르겠으나 hasSize라는 것을 보고 길이가 제한적이거나 무한이거나 하는 느낌의 에러가 발생한 것 같다고 추측했다.

그래서 위젯 트리를 다시 살펴보니 아래와 같았다.

etc-image-2
에러가 발생한 시점의 위젯 트리

 

Column위젯은 스크롤이 없는 위젯인데, ListView위젯은 스크롤이 생기는 위젯이니깐 아마 높이가 제한 되어 있는 Column위젯의 자식 요소로 ListView위젯을 사용하면 에러가 발생한 것이 아닐까 싶다.

 

해결 방법

etc-image-3
Expanded로 높이를 제한하여 해결

 

ListView위젯의 부모 요소에 높이를 지정해서 그 높이 내부에서만 스크롤이 생기면 되지 않을까 싶었다.

그래서 현재 StationBox(), seatStateBox(), reservationBox()가 차지하는 높이를 제외한 값을 갖기 위해 Expanded위젯으로 랩핑을 하니 깔끔하게 해결이 되었고 추측이 맞았다는 생각이 들었다.