[Flutter][Widget][Issue] TabBar 왼쪽에 공간이 생기는 현상

문제 상황

---

 TabBar를 이용하여 한 페이지에 여러 개의 뷰를 보여주는 UI는 거의 대부분의 앱에서 사용될 정도로 흔하다. 일반적으로는 고정된 개수의 TabBar를 사용하기에 스크롤 할 일이 없는데, 때로는 여러 개의 TabBar를 두어 스크롤이 들어가기도 한다.

 

그런데 스크롤을 넣기 위해 `isScrollable`을 `true`로 바꾸면 사진과 같이 왼쪽에 의문의 Padding이 들어가게 된다. ▼

왼쪽에 영문모를 Padding이 들어간 모습

 

왜 이 빈 공간이 생기는 것이고, 어떻게 하면 제거할 수 있을까?

 

 

원인과 해결

---

원인

 원인은 `TabAlignment`에 있다. 사진의 설명에 나와있듯, 만약 TabBar의 `isScrollable`이 `true`가 되면 TabBar는 기본적으로 52pixel의 offset을 갖게 된다. 

startOffset에는 52px의 left Padding이 숨어있다.

 

정확히는 `isScrollable`이 `true`가 되면 `TabAlignment.startOffset`이 기본 `tabAlignment`가 되고, `TabAlignment.startOffset`에 52pixel의 offset이 있어서 위 사진과 같이 왼쪽이 붕 뜬 것 처럼 보이게 된다.

 

VScode의 기능으로 해당 위젯의 매개변수가 어떤 값을 기본으로 갖는지를 봐도, 기본은 null이기에 이 매커니즘을 알기가 어렵다. ▼

isScrollable이 true가 되기 전까지는 tabAlignment는 null로 설정되어있기에 기본 값으로 어떤게 할당되는지 알 수 없다.

 

 

해결방법

 해결 방법은 굉장히 간단하다. `TabAlignment.start`를 선언 해주면 된다. 교체를 해주고 나면 이후엔 붕 뜬 것처럼 보이지 않고 의도한 대로 보이는 것을 알 수 있다. ▼

변경 전 : 왼쪽에 Padding이 들어간 모습

 

변경 후 : 왼쪽의 Padding이 제거된 모습

 

 

참고한 github issue ▼

Scrollable Tabs have a gap on the left · Issue #138606 · flutter/flutter