플러터에서 TabBar 위젯 사용법 및 옵션: 탭 기반 UI 완벽 가이드

 

탭 기반 UI는 사용자에게 다양한 콘텐츠를 깔끔하게 구분하여 제공하는 데 매우 유용합니다.

Flutter의 TabBar 위젯을 사용하면 앱에 탭 인터페이스를 쉽게 추가할 수 있으며, 이를 통해 사용자는 앱의 여러 화면을 손쉽게 탐색할 수 있습니다.

이 가이드에서는 TabBar 위젯의 기본 사용법, 주요 옵션, 그리고 TabBar를 AppBar와 함께 사용하는 방법을 자세히 설명합니다.

1. TabBar 위젯 기본 사용법

TabBar 위젯은 탭을 생성하고 각 탭에 대한 콘텐츠를 제공하는 TabBarView와 함께 사용됩니다.

기본적인 TabBar의 사용법은 다음과 같습니다.

1.1. 기본 구조

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,  // 탭의 개수를 설정합니다.
        child: Scaffold(
          appBar: AppBar(
            title: Text('TabBar Example'),
            bottom: TabBar(
              tabs: [
                Tab(text: 'Tab 1'),
                Tab(text: 'Tab 2'),
                Tab(text: 'Tab 3'),
              ],
            ),
          ),
          body: TabBarView(
            children: [
              Center(child: Text('Content for Tab 1')),
              Center(child: Text('Content for Tab 2')),
              Center(child: Text('Content for Tab 3')),
            ],
          ),
        ),
      ),
    );
  }
}

1.2. 코드 설명

• DefaultTabController
  • TabBar와 TabBarView의 상태를 관리합니다. length 속성으로 탭의 개수를 설정합니다.
  • DefaultTabController는 탭 상태를 자동으로 관리하여 탭 간 전환을 원활하게 합니다.
• AppBar
  • AppBar의 bottom 속성에 TabBar를 설정하여 앱바 하단에 탭을 배치합니다.
• TabBar
  • TabBar 위젯에 여러 개의 Tab을 추가하여 탭을 생성합니다.
• TabBarView
  • 각 탭에 대한 콘텐츠를 표시합니다. TabBar에서 선택된 탭에 맞는 화면을 TabBarView에서 보여줍니다.

2. TabBar의 주요 옵션

TabBar 위젯은 다양한 옵션을 제공하여 탭의 외관과 동작을 커스터마이즈할 수 있습니다.

2.1. 주요 속성

• tabs
  • 탭 목록을 정의합니다. Tab 위젯의 리스트를 받아 각 탭의 제목과 아이콘을 설정할 수 있습니다.
  • 예: tabs: [Tab(text: 'Home'), Tab(icon: Icon(Icons.home))]
• isScrollable
  • 탭이 화면을 넘어가는 경우, 스크롤 가능 여부를 설정합니다. 기본값은 false입니다.
  • 예: isScrollable: true
• indicator
  • 탭 선택 시 표시되는 인디케이터의 스타일을 설정합니다. BoxDecoration을 사용하여 커스터마이징할 수 있습니다.
  • 예: indicator: BoxDecoration(color: Colors.blue, borderRadius: BorderRadius.circular(5))
• labelColor
  • 선택된 탭의 텍스트 색상을 설정합니다.
  • 예: labelColor: Colors.blue
• unselectedLabelColor
  • 선택되지 않은 탭의 텍스트 색상을 설정합니다.
  • 예: unselectedLabelColor: Colors.grey

2.2. 예제 코드

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            title: Text('Custom TabBar Example'),
            bottom: TabBar(
              isScrollable: true,  // 탭이 스크롤 가능하도록 설정합니다.
              indicator: BoxDecoration(
                color: Colors.blue,
                borderRadius: BorderRadius.circular(10),
              ),
              labelColor: Colors.white,
              unselectedLabelColor: Colors.grey,
              tabs: [
                Tab(text: 'Tab 1'),
                Tab(text: 'Tab 2'),
                Tab(text: 'Tab 3'),
              ],
            ),
          ),
          body: TabBarView(
            children: [
              Center(child: Text('Content for Tab 1')),
              Center(child: Text('Content for Tab 2')),
              Center(child: Text('Content for Tab 3')),
            ],
          ),
        ),
      ),
    );
  }
}

3. TabBar와 TabBarView의 결합

TabBar와 TabBarView는 함께 사용하여 탭과 관련된 콘텐츠를 효율적으로 표시할 수 있습니다. 탭을 클릭할 때마다 TabBarView의 콘텐츠가 변경되며, 사용자는 다양한 정보를 직관적으로 탐색할 수 있습니다.

3.1. 탭 전환 및 상태 관리

• DefaultTabController를 사용하여 탭 상태를 자동으로 관리하며, 탭의 상태를 유지하고 전환을 원활하게 합니다.
• 각 탭에 대해 적절한 콘텐츠를 제공하여 사용자 경험을 개선할 수 있습니다.

TabBar 위젯은 Flutter에서 탭 기반의 UI를 구현하는 데 매우 유용합니다.

다양한 옵션을 통해 탭의 외관과 동작을 커스터마이즈할 수 있으며, DefaultTabController와 함께 사용하여 탭 상태를 효율적으로 관리할 수 있습니다.

이 가이드를 참고하여 Flutter 애플리케이션에 깔끔하고 기능적인 탭 기반 UI를 구현해 보세요.

 

 

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱