8. TabBar

1. Flutter TabBar 정리

1️⃣ TabBar 개념

1) 정의

• Tab 형태의 UI를 제공하는 위젯

• 여러 화면(탭)을 상단 탭 버튼으로 전환 가능하게 함

• 일반적으로 TabBar + TabBarView + DefaultTabController 3개를 같이 사용

2) 핵심 구조 (중요)

DefaultTabController(
  length: 3,
  child: Scaffold(
    appBar: AppBar(
      bottom: TabBar(
        tabs: [
          Tab(text: "A"),
          Tab(text: "B"),
          Tab(text: "C"),
        ],
      ),
    ),
    body: TabBarView(
      children: [
        Center(child: Text("A 화면")),
        Center(child: Text("B 화면")),
        Center(child: Text("C 화면")),
      ],
    ),
  ),
)

2️⃣ 구성 요소 역할 (구조 분해)

1) DefaultTabController

• 탭 상태를 관리하는 컨트롤러

• length: 탭 개수

• 내부적으로 index 상태를 관리

2) TabBar

• 실제 탭 버튼 UI

• 사용자가 클릭하는 영역

• 주요 옵션

TabBar(
  tabs: [...],          // 탭 목록
  isScrollable: true,   // 탭이 많을 때 스크롤
  indicatorColor: Colors.red, // 선택 표시 색
  labelColor: Colors.black,   // 선택된 탭 색
  unselectedLabelColor: Colors.grey, // 선택 안된 탭 색
)

3) TabBarView

• 탭 클릭 시 보여지는 화면

• children 순서 = TabBar의 tabs 순서와 반드시 일치해야 함

3️⃣ 동작 원리 (중요 개념)

1) 내부 흐름

1. TabBar 클릭

2. DefaultTabController가 index 변경

3. TabBarView가 해당 index 화면 표시

4️⃣ 자주 발생하는 실수

1) length 불일치

length: 3
tabs: 2개
children: 3개

2) TabBarView 높이 문제

• TabBarView는 무한 높이 문제 발생 가능

Expanded(
  child: TabBarView(...)
)

3) Nested Scroll 문제

• TabBarView 안에 ListView 넣으면 충돌 발생 가능

• 보통 구조

Expanded(
  child: TabBarView(
    children: [
      ListView(...),
      ListView(...),
    ],
  ),
)

5️⃣ 커스터마이징 포인트

1) 아이콘 + 텍스트

Tab(
  icon: Icon(Icons.home),
  text: "홈",
)

2) 탭 스크롤 가능

isScrollable: true

3) Indicator 커스터마이징

indicatorWeight: 4,
indicatorPadding: EdgeInsets.all(8),

6️⃣ 언제 사용하는가

1) 대표적인 사용 케이스

• 카테고리별 화면 분리

• 상단 네비게이션

• SNS 앱 (게시물 / 릴스 / 태그 등)

7️⃣ TabBar vs BottomNavigationBar 비교

8️⃣ 정리 (핵심만 압축)

1) 필수 구조

• DefaultTabController

• TabBar

• TabBarView

2) 반드시 맞춰야 하는 것

• length == tabs == children

3) 자주 터지는 문제

• 높이 문제 → Expanded

• 스크롤 충돌 → 구조 설계 필요

9️⃣ 한 줄 요약

TabBar는 "컨트롤러 기반으로 여러 화면을 하나의 화면 안에서 스위칭하는 구조"