[Flutter][오류] bottom overflowed pixels 오류 / label이 다음줄로 넘어가는 문제

 

 

 

화면 크기를 벗어나게 ui를 작성하면 이런 오류가 뜬다.

일단 Container의 높이를 50에서 60으로 높여줬다.

        height: 60,

 

근데 이번에는 라벨이 한줄을 넘어가버렸다.

TabBar 를 사용할 때 label 에 대해서 조절할 수 있는 속성이 있을 것 같아 찾아봤다.

https://stackoverflow.com/questions/72488870/tabbar-text-faded

TabBar text faded

여기를 참고했다.

 

labelPadding을 EdgeInsets.zero 로 설정해주면 되는 거였다.

labelPadding: EdgeInsets.zero,

편안..

 

---

아래는 Bottom 위젯을 만들 때 포함됐던 전체 코드이다.

 

Container(
        height: 60,
        child: TabBar(
          labelColor: Colors.white,
          labelPadding: EdgeInsets.zero,
          unselectedLabelColor: Colors.white60,
          indicatorColor: Colors.transparent,
          tabs: <Widget>[
            Tab(
                icon: Icon(
                  Icons.home,
                  size: 18,
                ),
                child: Text(
                  '홈',
                  style: TextStyle(fontSize: 9),
                )),
            Tab(
                icon: Icon(
                  Icons.search,
                  size: 18,
                ),
                child: Text(
                  '검색',
                  style: TextStyle(fontSize: 9),
                )),
            Tab(
                icon: Icon(
                  Icons.save_alt,
                  size: 18,
                ),
                child: Text(
                  '저장한 콘텐츠 목록',
                  style: TextStyle(fontSize: 9),
                )),
            Tab(
                icon: Icon(
                  Icons.list,
                  size: 18,
                ),
                child: Text(
                  '더보기',
                  style: TextStyle(fontSize: 9),
                )),
          ],
        ),
      ),
    );