DefaultTabController, TabController, TabBar, TabBarView

DefaultTabController는 Flutter에서 탭을 관리하는 위젯입니다. 이 위젯을 사용하면 여러 개의 탭을 쉽게 만들고 관리할 수 있습니다. 일반적으로 DefaultTabController 위젯은 AppBar의 bottom 속성에 TabBar를 할당하고, body에 TabBarView를 할당하여 사용됩니다.

아래는 간단한 DefaultTabController 예시 코드입니다:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,  // 탭의 수
        child: Scaffold(
          appBar: AppBar(
            title: Text('DefaultTabController Example'),
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.home), text: "Home"),
                Tab(icon: Icon(Icons.settings), text: "Settings"),
                Tab(icon: Icon(Icons.person), text: "Profile"),
              ],
            ),
          ),
          body: TabBarView(
            children: [
              Center(child: Text("Home Tab")),
              Center(child: Text("Settings Tab")),
              Center(child: Text("Profile Tab")),
            ],
          ),
        ),
      ),
    );
  }
}

주요 구성 요소

1. DefaultTabController: 이 위젯은 탭의 전체 수(length 속성으로 지정)와 자식 위젯(child 속성으로 지정)을 받습니다.

2. AppBar: 이 예제에서는 AppBar의 bottom 속성에 TabBar 위젯을 할당합니다.

3. TabBar: 여러 개의 Tab 위젯을 받아 사용자에게 탭을 표시합니다.

4. TabBarView: 실제 탭의 내용을 표시합니다. TabBar와 TabBarView의 순서와 개수는 일치해야 합니다.

DefaultTabController를 사용하면 각 탭간의 상태를 쉽게 관리할 수 있습니다. 이 위젯은 내부적으로 TabController를 생성하고 관리하므로, 별도로 TabController를 생성하고 초기화할 필요가 없습니다.

TabBar와 TabBarView는 Flutter에서 탭 인터페이스를 구현할 때 자주 사용되는 위젯들입니다. TabBar는 탭들을 보여주는 바(bar)를 생성하고, TabBarView는 각 탭에 해당하는 콘텐츠를 표시합니다. 다음은 TabBar와 TabBarView를 사용한 예시 코드입니다:

예시 코드:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3, // 탭의 수
        child: Scaffold(
          appBar: AppBar(
            title: Text('TabBar & TabBarView Example'),
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.home), text: "Home"),
                Tab(icon: Icon(Icons.star), text: "Favorites"),
                Tab(icon: Icon(Icons.person), text: "Profile"),
              ],
            ),
          ),
          body: TabBarView(
            children: [
              Center(child: Text("Home Tab")),
              Center(child: Text("Favorites Tab")),
              Center(child: Text("Profile Tab")),
            ],
          ),
        ),
      ),
    );
  }
}

코드 설명:

• DefaultTabController: TabBar와 TabBarView를 동기화하기 위해 사용됩니다. length는 탭의 수를 나타냅니다.

• AppBar: 앱의 상단 바입니다. bottom 속성에 TabBar를 넣어 탭들을 표시합니다.

• TabBar: 탭들을 보여줍니다. 각 Tab은 아이콘과 텍스트를 포함할 수 있습니다.

• TabBarView: TabBar의 각 탭에 해당하는 콘텐츠를 보여줍니다. 여기서는 간단한 Text 위젯을 중앙에 위치시켜 각 탭의 콘텐츠를 나타냅니다.

이 코드는 Flutter 앱에서 탭 기반의 인터페이스를 구현하는 기본적인 방법을 보여줍니다. TabBar와 TabBarView를 함께 사용하여 각 탭에 다양한 콘텐츠를 표시하고, 사용자가 탭을 전환할 때마다 해당 콘텐츠가 보이도록 할 수 있습니다.

위 예시 코드에서 DefaultTabController는 TabBar와 TabBarView를 함께 사용하는 경우에 필수적입니다. DefaultTabController는 TabBar와 TabBarView 간의 탭 선택 상태를 동기화하는 역할을 합니다. 즉, 사용자가 TabBar에서 탭을 선택하면 TabBarView에서 해당 탭에 맞는 내용이 표시되도록 합니다.

DefaultTabController 없이 TabBar와 TabBarView를 사용하려면 다른 방식으로 탭 상태를 관리해야 합니다. 이를 위해 TabController를 수동으로 생성하고 관리할 수 있습니다. TabController는 TabBar와 TabBarView에 직접 제공되며, 탭의 상태 및 전환을 제어합니다.

TabController를 사용한 예시:

class MyTabbedPage extends StatefulWidget {
  @override
  _MyTabbedPageState createState() => _MyTabbedPageState();
}

class _MyTabbedPageState extends State<MyTabbedPage> with SingleTickerProviderStateMixin {
  late TabController _tabController;

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

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TabBar & TabBarView with TabController'),
        bottom: TabBar(
          controller: _tabController,
          tabs: [
            Tab(icon: Icon(Icons.home), text: "Home"),
            Tab(icon: Icon(Icons.star), text: "Favorites"),
            Tab(icon: Icon(Icons.person), text: "Profile"),
          ],
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: [
          Center(child: Text("Home Tab")),
          Center(child: Text("Favorites Tab")),
          Center(child: Text("Profile Tab")),
        ],
      ),
    );
  }
}

이 예시에서는 TabController를 직접 생성하고, initState에서 초기화하며, dispose에서 해제합니다. TabController는 TabBar와 TabBarView에 controller 속성으로 전달됩니다.

결론적으로, DefaultTabController는 편리함을 제공하지만 필수적인 것은 아니며, TabController를 수동으로 사용할 수도 있습니다.