[Flutter] tabbar background color in flutter

간단해 보이는 탭바의 배경색을 변경하는 로직을 짜보려고 했는데 생각보다 만만하지 않았기에 그 내용을 간추려 적어보려고 합니다.

 

우선 구현하고자 했던 View는 아래와 이미지와 같습니다.

1. 상단에는 여행지의 리스트가 보이고  2.하단에는 두개의 탭이 있는 화면입니다.

 

상단의 여행지 리스트와 하단의 탭 리스트 모두 스크롤이 되어야 했기에 NestedScrollView를 사용해서 구현했습니다.

NestedScrollView를 사용하는 예제는 많이 있으니 찾아보시고 혹시 code snippet이 필요하시면 댓글로 남겨주세요 :) 

 

그럼 탭바의 배경색을 변경하는 방법에 대해 바로 설명해보겠습니다.

PreferredSizeWidget renderTabBar() {
    var _tabBar = TabBar(
      . . .
      tabs: List<Widget>.generate(
        tabList.length,
        (int index) => Tab(text: tabList.elementAt(index), height: TABBAR_HEIGHT),
      ),
    );

    return PreferredSize( // <- 핵심
      preferredSize: _tabBar.preferredSize, 
      child: Material( // <- 핵심
        color: const Color(0xFFE8E8E8),
        child: SizedBox(
          width: Get.width,
          child: Center(child: _tabBar),
        ),
      ),
    );
}

핵심은 만들고자 하는 TabBar를 변수로 만들어서 PreferredSize와 Material로 감싼 후 color를 지정해주면 되는것입니다.

SizedBox는 TabBar 영역에만 색상이 적용되길래 탭바의 전체 영역에 색상을 적용하기 위해 추가해줬습니다.

 

추가로 한가지 팁을 더 드리자면, Tab의 사이즈를 키우고 싶으실때는 Tab()의 height 값을 지정해주시면 됩니다. 

저는 TabBar의 padding, labelPadding 값을 가지고 구현해보려고 했는데 TabBarView의 size overflow가 나서 조금 해맸습니다. ㅋ;;

 

이상입니다.

---