[Flutter 트랙] 앱개발 종합반 2-6 - Tapbar

Flutter TabBar 위젯

TabBar 위젯은 상단에 탭 메뉴를 제공하고, 각 탭을 클릭하면 해당하는 화면(TabBarView)이 전환되는 UI를 제공합니다. 대표적인 사용 사례로는 네이버, 카카오톡, 유튜브 등의 탭 네비게이션이 있습니다.

---

1. TabBar 기본 개념

TabBar UI는 3가지 핵심 요소로 구성됩니다.

• TabController → 탭 전환을 관리하는 컨트롤러
• TabBar → 상단 메뉴(탭) UI
• TabBarView → 탭에 따라 전환되는 화면

TabBar 기본 예제

import 'package:flutter/material.dart';

void main() {
    runApp(MaterialApp(home: TabBarExample()));
}

class TabBarExample extends StatefulWidget {
    @override
    _TabBarExampleState createState() => _TabBarExampleState();
}

class _TabBarExampleState extends State<TabBarExample> with SingleTickerProviderStateMixin {
    late TabController _tabController;

    @override
    void initState() {
        super.initState();
        _tabController = TabController(length: 3, vsync: this);
    }

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text("TabBar Example"),
                bottom: TabBar(
                    controller: _tabController,
                    tabs: [
                        Tab(text: "홈"),
                        Tab(text: "프로필"),
                        Tab(text: "설정"),
                    ],
                ),
            ),
            body: TabBarView(
                controller: _tabController,
                children: [
                    Center(child: Text("홈 화면", style: TextStyle(fontSize: 20))),
                    Center(child: Text("프로필 화면", style: TextStyle(fontSize: 20))),
                    Center(child: Text("설정 화면", style: TextStyle(fontSize: 20))),
                ],
            ),
        );
    }
}

➡️ TabBar와 TabBarView를 TabController로 연결해야 합니다.

---

2. TabController 이해하기

TabController는 탭 전환을 관리하는 컨트롤러입니다.

TabController 설정 예제

late TabController _tabController;

@override
void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this);
}

vsync: this → 애니메이션 최적화(부드러운 전환 효과)를 위해 필수! length: 3 → 3개의 탭을 사용할 것이라는 의미입니다.

---

3. TabBar 스타일 변경

TabBar의 색상과 패딩을 설정할 수 있습니다.

TabBar 스타일 예제

TabBar(
    controller: _tabController,
    labelColor: Colors.blue,  // 선택된 탭 색상
    unselectedLabelColor: Colors.grey,  // 선택되지 않은 탭 색상
    labelPadding: EdgeInsets.symmetric(vertical: 20),  // 위아래 패딩 추가
    tabs: [
        Tab(icon: Icon(Icons.home), text: "홈"),
        Tab(icon: Icon(Icons.person), text: "프로필"),
        Tab(icon: Icon(Icons.settings), text: "설정"),
    ],
),

➡️ 아이콘과 텍스트를 함께 사용 가능하며, 색상과 패딩 조절 가능

---

4. TabBarView 설정 (화면 전환)

TabBarView는 탭을 선택하면 해당하는 화면을 전환합니다.

TabBarView 예제

TabBarView(
    controller: _tabController,
    children: [
        Container(color: Colors.blue, child: Center(child: Text("홈 화면"))),
        Container(color: Colors.green, child: Center(child: Text("프로필 화면"))),
        Container(color: Colors.red, child: Center(child: Text("설정 화면"))),
    ],
),

➡️ TabBarView는 반드시 TabController와 연결되어야 합니다.

---

5. TabBar 스와이프 기능

스와이프 기능을 통해 탭을 전환할 수 있습니다. (기본적으로 활성화되어 있으며, 비활성화도 가능)

스와이프 비활성화 예제

TabBarView(
    controller: _tabController,
    physics: NeverScrollableScrollPhysics(),  // 스와이프 비활성화
    children: [
        Center(child: Text("홈 화면")),
        Center(child: Text("프로필 화면")),
        Center(child: Text("설정 화면")),
    ],
),

➡️ 스와이프가 불필요한 경우 `NeverScrollableScrollPhysics()`를 사용하면 됩니다.

---

6. 특정 탭으로 이동하는 버튼

버튼을 클릭하면 특정 탭으로 이동할 수 있습니다.

특정 탭 이동 예제

ElevatedButton(
    onPressed: () {
        _tabController.animateTo(2);  // 3번째 탭(설정)으로 이동
    },
    child: Text("설정 탭으로 이동"),
),

➡️ animateTo(index) 를 사용하여 특정 탭으로 전환할 수 있습니다.

---

7. 결론

• TabBar는 탭 메뉴 UI를 제공
• TabController를 사용하여 탭 전환 관리
• TabBarView를 통해 화면을 전환
• 스타일 변경 가능 (색상, 패딩 등)
• 스와이프 기능 활성화/비활성화 가능
• 특정 탭으로 이동하는 기능 지원

다음 강의에서는 레이아웃 구성 위젯을 살펴보겠습니다! 🚀