플러터 기본기 다지기 - 3 (TabBar 위젯)

TabBar와 TabBarView 개념

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

import 'package:class_v03/main.dart';
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;

  @override
  void initState() {
    super.initState();
    // 메모리에 올라 갈때 단 한번 호출 되는 메서드
    _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'),
          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')),
          ],
        ),
      ),
    );
  }
}