[Flutter] 37. TabBar 위젯이란?

[Flutter] 37. TabBar 위젯이란?

 

1. TabBar 위젯에 대해

(1) TabBar와 TabBarView 개념

 

(2) TabController 

 

(3) 위젯 생명주기

 

 

2. 시나리오 코드

import 'package:flutter/material.dart';
import 'package:class_v04/main.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

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

// 부모 클래스의 상태를 접근 수정 등 역할 수정
// SingleTickerProviderStateMixin - 애니메이션 쓸 때 알아서 처리해줌
class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin{
  
  // 멤버 변수 선언
  // late - 늦은 초기화
  // 나중에 초기화 된다. - optional 안 붙여도 오케이
  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('TapBar Example'),
          bottom: TabBar(
            controller: _tabController,
            tabs: [
              Tab(text: 'HOME',),
              Tab(text: 'HOME',),
              Tab(text: 'HOME',),
            ],
          ),
        ),
        body: Container(),
      ),
    );
  }
}

 

import 'package:flutter/material.dart';
import 'package:class_v04/main.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

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

// 부모 클래스의 상태를 접근 수정 등 역할 수정
// SingleTickerProviderStateMixin - 애니메이션 쓸 때 알아서 처리해줌
class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin{
  
  // 멤버 변수 선언
  // late - 늦은 초기화
  // 나중에 초기화 된다. - optional 안 붙여도 오케이
  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('TapBar Example'),
          bottom: TabBar(
            controller: _tabController,
            tabs: [
              Tab(text: 'HOME', icon: Icon(Icons.home),),
              Tab(text: 'Favorites', icon: Icon(Icons.star),),
              Tab(text: 'Settings', icon: Icon(Icons.settings),),
            ],
          ),
        ),
        body: TabBarView(
          children: [
            Center(child: Text('HOME')),
            Center(child: Text('Favorites')),
            Center(child: Text('Settings')),
          ],
        ),
      ),
    );
  }
}