[Flutter] TabBar 위젯

TabBar와 TabBarView 개념

• TabBar: 여러 개의 탭을 화면에 표시하며, 각 탭을 클릭할 수 있도록 해주는 위젯입니다. 사용자가 탭을 클릭하면 해당 탭에 대한 내용을 표시합니다.
• TabBarView: TabBar와 연결되어 각 탭에 해당하는 내용을 표시하는 역할을 합니다. 사용자가 탭을 선택하면 이 위젯이 해당하는 내용을 보여줍니다.
• TabController
  • TabController: 탭의 상태를 관리하는 클래스입니다. 탭의 개수와 현재 활성화된 탭을 추적합니다. SingleTickerProviderStateMixin을 사용하여 애니메이션과 상태 관리를 돕습니다.
  • length: 탭의 개수를 지정합니다.
  • vsync: 애니메이션의 성능을 최적화하는 데 사용됩니다. 이 예제에서는 this를 사용하여 현재 상태를 참조합니다.
• 위젯 생명주기
  • initState(): 위젯이 처음 생성될 때 호출됩니다. 이곳에서 TabController를 초기화합니다.
  • dispose(): 위젯이 더 이상 필요하지 않을 때 호출됩니다. 이곳에서 TabController를 정리하여 메모리 누수를 방지합니다.

import 'package:flutter/material.dart';

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

// StatefulWidget 클래스 - 상태를 관리 표현
class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

// 부모 클래스에 상태를 접근 수정 등 역할 수정.
class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin{

  // 멤버 변수 선언
  late TabController _tabController;
  // late -> 나중에 초기화 할거야!... null 값이라도 오류가 안남

  @override
  void initState() {
    super.initState();
    // 메모리에 올라 갈 때 단 한 번 호출 되는 메서드
    // vsync -> 애니메이션 돌아갈 때 알아서 부드럽게 해주는 녀석.. (SingleTickerProviderStateMixin)
    // 다형성 --> this
    _tabController = TabController(length: 3, vsync: this);
  }

  @override
  void dispose() {
    super.dispose();
    // 위젯이 제거 될 때 호출 된다. (자원 낭비 막기 위해..)
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('TabBar Example'),
          bottom: TabBar(
            controller: _tabController,
            tabs: [
              Tab(text: 'HOME'),
              Tab(text: 'Favorites', icon: Icon(Icons.star)),
              Tab(text: 'Settings', icon: Icon(Icons.settings)),
            ],
          ),
        ),
        body: TabBarView(
          controller: _tabController, // 연동
          children: [
            Center(child: Text('HOME')),
            Center(child: Text('Favorites')),
            Center(child: Text('Settings')),
          ],
        ),
      ),
    );
  }
}