Flutter View 위젯 - TabController / TabBar / TabBarView

Flutter는 화면에 보여지는 모든 요소가 위젯으로 구성되어 있습니다.

화면에 출력되는 시각적 구성 요소를 다루는 위젯을 View 위젯이라고 합니다. 

 

그중에서도 TabBar 위젯에 대해 알아보겠습니다.

 

📚 TabBar - 탭으로 화면 전환

TabBar 위젯은 메뉴 위젯과 메뉴와 매칭이 되는 뷰 위젯 2가지 위젯이 필요합니다.

TabBar 위젯과 TabBarView 위젯 이렇게 2개를 구성을 해야만 사용할 수 있습니다.

또한 두 개의 위젯을 커뮤니케이션을 도와주는 TabController에 연결해 줘야 합니다.

따라서, TabBar를 사용하기 위해서는 TabController / TabBar / TabBarView 정의가 필요합니다.

 

🔧 TabController (어떤 탭이 선택됐는지 상태를 관리하는 컨트롤러)

- 다른 스크롤 컨트롤과 다르게 controller을 생성할 때에 초기값을 설정해야 합니다.

📌 TabController를 초기값을 정의할 수 있는 옵션
1. initiallndex
- 말 그대로 초기 Tab 메뉴와 TabView가 어떤 페이지를 먼저 보여줄 것인지 설정하는 값입니다.
   보통 첫 번째 탭이 활성화되어 사용되기 때문에 특정할 때 아니고는 initialIndex는 설정하지 않습니다.

2. animationDuration
- animationDuration 설정을 통해 탭 메뉴를 눌렀을 때 탭 메뉴 하단 인디케이터의 애니메이션 효과 시간을 정할 수 있습니다.
   ㄴ Duration 객체를 통해 조절할 수 있습니다.

3. length
- 메뉴가 몇 개인지를 설정하는 옵션으로 반드시 넣어야 하는 필수 값입니다.
- TabBar의 tabs에는 4개를 등록하고 controller의 length 값을 4가 아닌 다른 값을 넣으면 오류가 발생합니다.

4. vsync
- 'TabController'의 'vsync' 옵션은 탭 컨트롤러의 렌더링을 장치 디스플레이의 수직 동기화와 동기화할지 여부를 결정합니다.
   이 부분의 경우 this를 넣어주면 됩니다.
   또한 이를 this 클래스에 매칭하기 위해서는 TickerProviderStateMixin라는 클래스를 with라는 키워드로 포함시켜야 합니다.

📌 TabBar Controller 초기화 예제

class _SampleWidgetState extends State<SampleWidget>
    with TickerProviderStateMixin {
  late TabController _tabController;

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

 

🔧 TabBar(탭 UI - 버튼 영역)

- TabBar 위젯을 선언하고 controller를 반드시 넣어야 합니다.

   또한 초기에 탭 메뉴를 3개를 사용한다고 정의하면, 탭 메뉴 3개를 등록해 줘야 합니다. 

📌 자주 사용되는 TabBar의 옵션
1. labelColor
- 메뉴 색상

2. unselectedLabelColor
- 선택된 메뉴 외의 색상

3. labelPadding
- 메뉴 간격 조정

4. indicatorWeight
- 선택된 메뉴의 인디게이터의 두께 조절

5. labelStyle, unselectedLabelStyle
- 활성화된 메뉴 텍스트 스타일과 비활성 중인 텍스트 스타일 설정

📌 TabBar 위젯 옵션 예제

TabBar(
  controller: _tabController,
  labelColor: Colors.blue,
  unselectedLabelColor: Colors.grey,
  labelPadding: const EdgeInsets.symmetric(vertical: 20),
  tabs: const [
    Text('메뉴1'),
    Text('메뉴2'),
    Text('메뉴3'),
  ],
),​

 

🔧 TabBarView (탭에 따라 바뀌는 콘텐츠 영역)

- 메뉴를 구성한 후 화면이 될 부분을 정의합니다.

  탭 메뉴와 상호작용이 되기 위해서 controller를 연결해 줍니다.

  ㄴ 메뉴가 3개면, 뷰 화면도 3개를 등록합니다.