[플러터] TabBar 만들기

Tabbar를 만드는 방법에도 여러가지가 있다.

AppBar와 함께 만들 수 있고 TabBar와 TabBarView 위젯으로도 만들 수 있다.

후자의 방법에 대해 알아보자.

 

TabBar & TabBarView

class _LibraryPageState extends State<LibraryPage>
    with SingleTickerProviderStateMixin {
    //클래스에 with 해준다.
    ...
    }

사용하고자하는 클래스에 TickerProvider를 with 해준다.

간단하게 Animation의 Sync를 맞춰준다고 생각하면 된다.

 

//선언부터 한다
TabController? _tabController;
  
  @override
  initState(){
  //정의는 initState 이후에 한다
  	_tabController = new TabController(vsync: this, length: tabNames.length);
  }

여기서 vsync는 앞서 with한 클래스이다.

이 때문에 선언과 정의를 한번에 할 수 없으니 initState에서 정의한다.

 

TabBar(
		//디자인과 관련된 속성들
        indicatorWeight: 4.h,
        indicatorSize: TabBarIndicatorSize.label,
        indicatorColor: seletecColor,
        unselectedLabelColor: Color(0xFFDDDDDD),
        labelColor: seletecColor,
        unselectedLabelStyle: TextStyle(color: unseletecColor, fontSize: 15.sp),
        labelStyle: TextStyle(
            color: seletecColor, fontSize: 23.sp, fontWeight: FontWeight.bold),

        onTap: (int i){
        	..//tab 전환시 동작할 함수
        },
        isScrollable: true, //tab이 스크롤이 되는지
        
        controller: controller,
        tabs: [
        //tab들의 속성
        	Tab(...), Tab(...) ....
        ]);

TabBar 위젯을 생성한다. tabs에 Tab들을 삽입한다.

 

TabBarView(
children: bodyWidgets, //List<Widget>
controller: _tabController!,
),

마지막으로 TabBarView에 원하는 View를 삽입해주면 된다.

controller가 관련된 동작을 모두 수행해주기에 index를 별도로 제어해주지 않아도 된다.

 

Lingory에 적용된 TabBarView