Flutter TabBar 사용법

 

오늘은 flutter의 탭바 기본적인 사용법을 알아보겠다.

 

아주 기초만 담고 있기 때문에, 이미 탭바의 사용법을 알고 있다면 뒤로 가기를 누르면 된다.

 

 

 

1. 사전준비

 

플러터 프로젝트 하나만 있으면 된다.

 

새로 만들어도 되고, 이미 만들어놓은 프로젝트를 써도 된다.

 

lib 폴더는 다음과 같이 구성하면 된다.

lib
└ main.dart
└ views
  └ MyTabBar.dart
  └ FirstTab.dart
  └ SecondTab.dart

 

 

 

 

2. 시작하기

 

플러터 프로젝트를 생성했다면 중구난방한 코드가 매우 많을 것이다.

 

 

아래 코드만 남기고 나머진 전부 지운다.

main.dart

 

 

debugShowCheckedModeBanner → false로 설정 시, 화면 상단에 나타나는 Debug Mode 배너가 사라진다.

 

 

TabBar를 적용할 파일을 하나 만든다.

import 'package:flutter/material.dart';
import 'package:flutter_practice/views/FirstTab.dart';
import 'package:flutter_practice/views/SecondTab.dart';

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

  @override
  State<MyTabBar> createState() => _MyTabBarState();
}

class _MyTabBarState extends State<MyTabBar> with SingleTickerProviderStateMixin {
  TabController? tabController;

  @override
  void initState(){
    super.initState();
    tabController = TabController(
      length: 2, 
      vsync: this,
      initialIndex: 0
    );
  }

  @override
  void dispose(){
    tabController!.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: TabBarView(
        controller: tabController,
        children: const <Widget>[
          FirstTab(), SecondTab()
        ]
      ),
      bottomNavigationBar: TabBar(
        controller: tabController,
        tabs: const <Tab> [
          Tab(text: "첫 번째 탭"),
          Tab(text: "두 번째 탭",)
        ]
      ),
    );
  }
}

 

TabBar는 탭을 클릭함에 따라 화면이 바뀐다.

즉, 클릭에 따라 상태가 바뀐다.

 

 

상태가 안바뀐다면 Stateless를 쓰면 되지만, 지속적으로 상태가 바뀌니까 Stateful을 써야 한다.

 

 

 

State를 상속받는 클래스에 with SingleTickerProviderStateMixin 이 보일텐데,

 

플러터에서 탭바를 동작하려면 탭 컨트롤러가 필요하다.

 

 

탭 컨트롤러는 탭뷰와 탭바 사이의 화면 전환을 위해 사용한다.

 

 

 

 

initState를 좀 더 들여다보자.

  @override
  void initState(){
    super.initState();
    tabController = TabController(
      length: 2, 
      vsync: this,
      initialIndex: 0
    );
  }

탭바를 제어하려면 반드시 initState로 초기 상태를 설정해야 한다.

 

 

 

TabController를 통해

 

탭의 갯수(length),

탭의 애니메이션 시점(vsync),

시작 시 탭의 인덱스(initialIndex)

 

이 세 가지를 기본으로 설정할 수 있다.

 

 

갯수를 10개로 하고싶으면 10,

탭 인덱스가 5번째에서 시작하고 싶으면 4를 입력하면 된다.

 

 

 

 

예제는 2개의 탭을 넣을 것이기 때문에, FirstTab과 SecondTab 파일을 생성하여 넣어보겠다.

 

import 'package:flutter/material.dart';

class FirstTab extends StatelessWidget {
  const FirstTab({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Center(child: Text("여기는 첫 번째 탭입니다.")),
      ), 
    );
  }
}

FirstTab.dart

 

화면 중앙에 텍스트가 나타나는 아주 간단한 화면을 만들었다.

SecondTab.dart도 똑같이 만들어보자.

 

 

import 'package:flutter/material.dart';

class SecondTab extends StatelessWidget {
  const SecondTab({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Center(child: Text("여기는 두 번째 탭입니다.")),
      ), 
    );
  }
}

SecondTab.dart

 

 

 

 

 

이제 main.dart에 MyTabBar.dart를 넣으면 된다.

 

import 'package:flutter/material.dart';
import 'package:flutter_practice/views/MyTabBar.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyTabBar(),
    );
  }
}

main.dart

 

 

아래 나와 있는 자잘한 것들은 모두 지우고 MyApp만 남겼다.

(어짜피 필요없는 것들이다.)

 

 

이제 실행화면을 보자.

 

 

 

첫 번째 탭과 두 번째 탭 모두 문제없이 동작한다.

 

 

 

 

 

 

아주 간단한 TabBar 예제를 살펴봤다.

 

 

이 예제를 따라해봤다면, 간단한 TabBar 구현은 그렇게 안 어렵다는 것을 알 수 있다.

 

 

 

 

좀 더 자세하게 알고 싶으면 여러분들이 직접 검색해서 찾아보거나, 삽질해보기 바란다.