flutter & dart - TabBar , DefaultTabController

Overview .

TabBar 란 ? 넘겨 볼수 있게 하는 네비게이션? 이다.

1. TabBar 란?
2. DefaultTabController 란?
3. 예제를 확인해 보자

 

0. 문서

https://api.flutter.dev/flutter/material/TabBar-class.html

TabBar class - material library - Dart API

https://api.flutter.dev/flutter/material/DefaultTabController-class.html

DefaultTabController class - material library - Dart API

 

 

1. TabBar 란?

머티리얼 디자인 기본 탭 표시줄.

기본 탭은 상단 앱 바 아래 콘텐츠 창 상단에 배치됩니다. 주요 콘텐츠 대상이 표시됩니다.

일반적으로 AppBar 의 AppBar.bottom 부분 으로 생성되고 TabBarView 와 함께 생성됩니다 .

TabController 가 제공되지 않으면 대신 DefaultTabController 조상을 제공해야 합니다. 탭 컨트롤러의 TabController.length는 탭 목록 의 길이 및 TabBarView.children 목록 의 길이 와 동일해야 합니다 .

상위 항목 중 하나가 Material 위젯 이어야 합니다 .

현재 컨텍스트에 설정된 경우 TabBarTheme 의 값을 사용합니다 .

 

2. DefaultTabController 란?

DefaultTabController는 TabBar 또는 TabBarView 와 TabController를 공유하는 데 사용되는 상속된 위젯입니다 . 탭 표시줄 위젯이 상태 비저장 상위 위젯이나 다른 상위 위젯에 의해 생성되기 때문에 명시적으로 생성된 TabController를 공유하는 것이 편리하지 않을 때 사용됩니다 .

 

그냥 TabBar Controller 이다.

밑은 플러터에서 기본 제공해 주는 예제이므로 하나 하나 봐보자

 

 

3. 예제를 확인해 보자

첫번째. DefaultTabController

initialIndex 는 처음 보여줄 화면 , length 는 탭 바의 길이다.

 DefaultTabController(
      initialIndex: 1, // 첫 화면
      length: 3, // 길이

 

두번째. AppBar 의 TabBar 

AppBar의 bottom 에 TabBar 를 두고 tabs[] 배열에 Tab 을 할 아이콘 등을 둘 수 있다.

AppBar(
          title: const Text('Primary and secondary TabBar'),
          bottom: const TabBar(
            dividerColor: Colors.transparent,
            tabs: <Widget>[
              Tab(
                text: 'Flights',
                icon: Icon(Icons.flight),
              ),
              Tab(
                text: 'Trips',
                icon: Icon(Icons.luggage),
              ),
              Tab(
                text: 'Explore',
                icon: Icon(Icons.explore),
              ),
            ],
          ),
        )

 

세번째. TabBarView 연결

이는 DefaultTabController 가 있기 때문에 controller 없이도 가능한것 같다.

const TabBarView(
          children: <Widget>[
            NestedTabBar('Flights'),
            NestedTabBar('Trips'),
            NestedTabBar('Explore'),
          ],
        )

 

다만 밑의 예제에서는 좀 다른데.

밑의 코드에서 주의 할 점은 TabController 로 TabBar  와 TabBarView  를 연결해 줄수 있다.

class NestedTabBar extends StatefulWidget {
  const NestedTabBar(this.outerTab, {super.key});

  final String outerTab;

  @override
  State<NestedTabBar> createState() => _NestedTabBarState();
}

class _NestedTabBarState extends State<NestedTabBar>
    with TickerProviderStateMixin {
  late final TabController _tabController;

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

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

 

위의 코드를 잠시 보면 with 를 사용하여 TickerProviderStateMixin 을 받고 TabController 의 vsync 에서 this 로 연결 시켜 준것을 확인 할 수 있다. 

initState 에서는 초기화를 시켜 주어야 this 가 동작을 했다.

class _NestedTabBarState extends State<NestedTabBar>
    with TickerProviderStateMixin
    
   ....
 
   @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 2, vsync: this);
  }

 

dispose 는 처분하다라는 소리이다.

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

 

네번째. 그럼 이 Controller 를 어디서 사용하냐?

바로 TabBar 와 TabBarView 에서 사용할 수 있다.

Column(
      children: <Widget>[
        TabBar.secondary(
          controller: _tabController,
          tabs: const <Widget>[
            Tab(text: 'Overview'),
            Tab(text: 'Specifications'),
          ],
        ),
        Expanded(
          child: TabBarView(
            controller: _tabController,
            children: <Widget>[
              Card(
                margin: const EdgeInsets.all(16.0),
                child: Center(child: Text('${widget.outerTab}: Overview tab')),
              ),
              Card(
                margin: const EdgeInsets.all(16.0),
                child: Center(
                    child: Text('${widget.outerTab}: Specifications tab')),
              ),
            ],
          ),
        ),
      ],
    );