8. TabBar

Apr 29, 2026

Contents

1. Flutter TabBar 정리 1️⃣ TabBar 개념 2️⃣ 구성 요소 역할 (구조 분해)3️⃣ 동작 원리 (중요 개념)4️⃣ 자주 발생하는 실수 5️⃣ 커스터마이징 포인트 6️⃣ 언제 사용하는가 7️⃣ TabBar vs BottomNavigationBar 비교 8️⃣ 정리 (핵심만 압축)9️⃣ 한 줄 요약

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 상태를 관리

➡️ 없으면 TabBar와 TabBarView 연결 안 됨

2) TabBar

실제 탭 버튼 UI

사용자가 클릭하는 영역

주요 옵션


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

3) TabBarView

탭 클릭 시 보여지는 화면

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

➡️ 안 맞으면 runtime 에러 발생

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

1) 내부 흐름

TabBar 클릭

DefaultTabController가 index 변경

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 비교

구분	TabBar	BottomNavigationBar
위치	상단	하단
화면 전환	같은 페이지 내부	전체 페이지 전환
컨트롤러	필요 (DefaultTabController)	필요 없음
사용 목적	콘텐츠 그룹 전환	앱 주요 메뉴

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

1) 필수 구조

DefaultTabController

TabBar

TabBarView

2) 반드시 맞춰야 하는 것

length == tabs == children

3) 자주 터지는 문제

높이 문제 → Expanded

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

9️⃣ 한 줄 요약

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

Contents