[Flutter] 탭 사용하기 (TabBar, TabBarView)

tabbar, tabbarview

탭을 사용하면 위와 같이 각 정보간의 전환을 쉽게 할 수 있다.

정보가 유사하지만 다른 느낌이라면 둘로 나누는 것이 좋겠다고 생각했다.

그래서 장소에 대한 "객관적(화장실, 주차장)이거나 전체 통계(리뷰평점)에 대한 정보"와 "그 통계를 이루는 개인의 리뷰" 를 나누고자 했다.

구현

// Tab 을 사용하기 위해 TickerProviderStateMixin 를 믹스인해줌.
class _TabViewState extends State<TabView> with TickerProviderStateMixin {
  // _tabConroller 를 사용할 때는 무조건 선언되어 있을 것이므로(initState에서 바로 선엄함)
  // late 키워드 사용함.
  late TabController _tabController;

  @override
  void initState() {
  	// 선택된 탭과 컨텐츠 섹션이 동기화를 TabController 가 수행해 줌.
    _tabController = TabController(
      length: 2, // 탭의 전체 길이
      vsync: this, // TickerProvider 가 widget 을 다시 그리기 위한 파라미터임. 
    );
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TabBar(
          labelColor: Color(0xFF4EACF8), // 선택된 탭의 색상
          unselectedLabelColor: Colors.black, // 선택되지 않은 택의 색상
          controller: _tabController,
          tabs: [
            Container( // 탭의 크기를 위해 Container로 감쌈
              child: Text("정보"), // 첫번째 페이지 Tab 의 타이틀
              alignment: Alignment.center,
              height: 40,
            ),
            Container(
              child: Text("리뷰"), // 첫번째 페이지 Tab 의 타이틀
              alignment: Alignment.center,
              height: 40,
            ),
          ],
        ),
        Expanded( // 페이지가 Column 의 남은 공간을 모두 사용할 수 있도록 Expanded로 TabBarView 를 감쌉니다.
          child: TabBarView(
            controller: _tabController,
            children: [
            	ServiceCard(), // Tab 의 첫번째 페이지
                ReviewCards(), // Tab 의 두번째 페이지
            ],
          ),
        ),
      ],
    );
  }
}