Flutter TabbarView를 Column 내부에서 dynamic하게 사용하기

pessoa
링크샵스를 작업하던 중 Tabbar를 Column내부에서 사용해야하는 생겼다. 하지만 TabbarView는 정확한 사이즈를 요구하는 위젯이기 때문에 Column 내부에서 dynamic하게 사용할 수 없고, 정확한 사이즈의 위젯 안에 넣어 사용해야 한다.
다만, Column과 같은 list widgets을 자식으로 가지는 위젯 내부에 넣는 방법이 아니라면 여러 위젯들 사이에 집어넣을 수 있는데, 그렇게 하기 위한 방법 중 하나는 NestedScrollView를 사용하는 것이다.
NestedScrollView는 내부에 header와 body 영역을 구분하여 사용할 수 있어, TabbarView를 독립적인 영역으로 구분하여 build할 수 있다.
https://api.flutter.dev/flutter/widgets/NestedScrollView-class.html
(위 링크에서 NestedScrollView와 Tab을 사용하는 방법을 설명하고 있다.)

TabbarView를 NestedScrollView로 묶어서 사용하여 스크롤이 되는 것 까지 확인하였지만, 예기치 못한 오류가 발생였다. https://okky.kr/article/677171 <-이 글과 유사한 오류
NestedScrollView가 scroll을 허용하기는 하지만 NestedScrollView를 감싸고 있는 부모 위젯이 자식 위젯이 scroll되는 것을 인식하지 못하고 overflow 오류를 내고 있는것으로 예상되는것이었다

이것을 해결하기 위해 TabbarView내부의 위젯들을 모두 ListView로 구성하였다. ListView는 기본적으로 scroll되는 속성을 가지고 있어 NestedScrollView의 상위 위젯이 하위에 scroll되는 위젯이 있음을 인식할 것으로 기대했기때문이다. 그리고 예상한것과 같이 ListView가 overflow 오류를 잡아주는 것을 확인하였다.

결론 : TabbarView를 다른 위젯들 사이에서 dynamic한 사이즈로 사용하고 싶다면, NestedScrollView를 이용하여 사용해야한다. (만약 overflow 오류가 난다면 ListView로 잡아주도록 하자.)