[Flutter] DefaultTabController & TabBarView

플러터(Flutter)에서는 탭 기반 탐색(tab-based navigation)을 구현하기 위해 사용되는 세 가지 주요 위젯이 있습니다. 이들은 DefaultTabController, TabBarView, TabPageSelector입니다.

1. DefaultTabController: 탭 컨트롤러의 상태를 관리하며, 다양한 탭 간의 전환을 가능하게 해주는 위젯입니다. 보통 위젯 트리의 루트에 배치되며, 자손들에게 탭 컨트롤러를 제공합니다.
2. TabBarView: 각 탭에 해당하는 내용을 표시하는 위젯입니다. TabController를 인자로 받아들이며, 다른 탭 뷰 사이의 전환을 자동으로 애니메이션화합니다.
3. TabPageSelector: 현재 선택된 탭에 대한 시각적인 표시기를 제공하는 위젯입니다. TabController를 인자로 받아들이며, 활성 탭을 강조하는 도트의 행을 표시합니다.

다음은 이러한 위젯들을 사용하는 간단한 예시 코드입니다:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('탭 예제'),
        ),
        body: DefaultTabController(
          length: 3, // 탭의 개수
          child: Column(
            children: [
              TabBar(
                tabs: [
                  Tab(text: '탭 1'),
                  Tab(text: '탭 2'),
                  Tab(text: '탭 3'),
                ],
              ),
              Expanded(
                child: TabBarView(
                  children: [
                    Center(child: Text('탭 1의 내용')),
                    Center(child: Text('탭 2의 내용')),
                    Center(child: Text('탭 3의 내용')),
                  ],
                ),
              ),
              SizedBox(height: 10),
              TabPageSelector(), // 페이지 인디케이터 도트 표시
            ],
          ),
        ),
      ),
    );
  }
}

이 예제에서는 길이가 3인 DefaultTabController를 생성하여 세 개의 탭을 가지도록 설정합니다. Column 내부에 TabBar를 배치하여 탭 라벨을 표시합니다. 그리고 TabBarView를 사용하여 각 탭의 내용을 보여주고, TabPageSelector를 통해 탭을 시각적으로 표시합니다.

필요에 따라 이 위젯들의 외관과 동작을 더욱 자세히 커스터마이징할 수 있습니다.