[Flutter] 탭바 기본 만들기 (TabBar, Tab, TabBarView, TabController, DefaultTabController)

🎁 탭바(TabBar) 만들기

탭바를 만드는 방법 중 Appbar 위젯의 bottom 인자를 사용하는 방법을 소개하려 한다. 먼저 TabBar() 위젯의 tabs 인자(List<Widget>)에 탭 역할을 할 위젯들을 넣는다. 어떤 위젯이든 되지만 Tab() 위젯을 제공해주고 있다. 탭바에 따른 화면들은 TabBarView() 의 children 인자(List<Widget>)에 넣어주면 되는데 TabBar() 위젯의 tabs 인자의 List 인덱스와 TabBarView() 의 children 인자의 List 인덱스가 서로 연결되어 탭을 클릭하면 그 인덱스의 화면이 보인다. 

 

TabBar 와 TabBarView 를 정의했다고 해서 자동으로 이 둘이 서로 연결되어 탭을 클릭하면 그 화면으로 넘어가는 것은 아니다. 서로를 연결해주는 방식으로 DefaultTabController  를 사용하는 방법과 TabController 를 사용하는 방법이 있다.

 

 

 

😶 DefaultTabController Widget

DefaultTabController 를 최상위 위젯으로 두고 Scaffold 의 AppBar 의 bottom 인자에 TabBar 위젯을 넣고, Scaffold 의 body 인자에 TabBarView 위젯을 넣으면 자동으로 DefaultTabController 위젯이 TabBar 와 TabBarView 를 연결해준다.

 

다음 예시는 Flutter api 사이트에서 참고한 코드이다.

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: DefaultTabBar()));

class DefaultTabBar extends StatelessWidget {
  const DefaultTabBar({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return  DefaultTabController(
      initialIndex: 1,
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('TabBar Widget'),
          bottom: const TabBar(
            tabs: <Widget>[
              Tab(
                icon: Icon(Icons.cloud_outlined),
                text: "CLOUD",
              ),
              Tab(
                icon: Icon(Icons.beach_access_sharp),
                text: "RAIN",
              ),
              Tab(
                icon: Icon(Icons.brightness_5_sharp),
                text: "SUN",
              ),
            ],
          ),
        ),
        body: const TabBarView(
          children: <Widget>[
            Center(
              child: Text("It's cloudy here"),
            ),
            Center(
              child: Text("It's rainy here"),
            ),
            Center(
              child: Text("It's sunny here"),
            ),
          ],
        ),
      ),
    );
  }
}

DefaultTabController 인자의 initialIndex 는 화면이 보일 때 선택된 탭 인덱스를 의미하고 length 는 탭들의 개수를 의미한다.

 

 

 

😶 TabController

TabController 를 변수로 선언하여 TabBar 와 TabBarView 의 controller 인자에 선언한 TabController 를 넣어주면 된다.

 

다음 예시는 Flutter api 사이트에서 참고한 코드이다.

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: DefaultTabBar()));

class DefaultTabBar extends StatefulWidget {
  const DefaultTabBar({Key? key}) : super(key: key);

  @override
  State<DefaultTabBar> createState() => _DefaultTabBarState();
}

class _DefaultTabBarState extends State<DefaultTabBar>
    with TickerProviderStateMixin {
  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: const Text('TabBar Widget'),
        bottom: TabBar(
          controller: _tabController,
          tabs: [
            Tab(
              icon: Icon(Icons.cloud_outlined),
              text: "CLOUD",
            ),
            Tab(
              icon: Icon(Icons.beach_access_sharp),
              text: "RAIN",
            ),
            Tab(
              icon: Icon(Icons.brightness_5_sharp),
              text: "SUN",
            ),
          ],
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: <Widget>[
          Center(
            child: Text("It's cloudy here"),
          ),
          Center(
            child: Text("It's rainy here"),
          ),
          Center(
            child: Text("It's sunny here"),
          ),
        ],
      ),
    );
  }
}