Flutter의 탭바(Tabs) 사용법

Flutter에서 TabBar 위젯은 여러 화면을 탭으로 나누어 표시하는 데 사용됩니다. 탭바는 사용자가 다양한 카테고리나 기능 간에 쉽게 이동할 수 있도록 도와주는 중요한 UI 요소입니다. 이번 글에서는 Flutter의 TabBar 위젯의 다양한 기능과 사용법에 대해 자세히 살펴보겠습니다.

1. 기본 TabBar 사용법

TabBar 위젯을 사용하려면 DefaultTabController와 함께 TabBar와 TabBarView를 설정해야 합니다. DefaultTabController는 탭의 상태를 관리하는 역할을 합니다.

 

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            title: Text('Tabs Demo'),
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.directions_car), text: "Car"),
                Tab(icon: Icon(Icons.directions_transit), text: "Transit"),
                Tab(icon: Icon(Icons.directions_bike), text: "Bike"),
              ],
            ),
          ),
          body: TabBarView(
            children: [
              Center(child: Text("Car Tab")),
              Center(child: Text("Transit Tab")),
              Center(child: Text("Bike Tab")),
            ],
          ),
        ),
      ),
    );
  }
}

 

위 코드는 세 개의 탭과 각각의 탭에 대응하는 콘텐츠를 표시하는 기본적인 탭바 예제입니다. DefaultTabController의 length 속성은 탭의 개수를 지정합니다.

2. 커스텀 TabBar 스타일링

TabBar와 TabBarView의 스타일을 커스터마이징할 수 있습니다. indicatorColor, labelColor, unselectedLabelColor 등의 속성을 사용하여 탭바의 스타일을 조정할 수 있습니다.

 

TabBar(
  indicatorColor: Colors.red,
  labelColor: Colors.green,
  unselectedLabelColor: Colors.grey,
  tabs: [
    Tab(icon: Icon(Icons.directions_car), text: "Car"),
    Tab(icon: Icon(Icons.directions_transit), text: "Transit"),
    Tab(icon: Icon(Icons.directions_bike), text: "Bike"),
  ],
);

 

위 코드는 선택된 탭의 색상을 빨간색, 선택된 탭의 텍스트 색상을 녹색, 선택되지 않은 탭의 텍스트 색상을 회색으로 설정합니다.

3. 탭바의 위치 변경

탭바를 앱바 아래에 두는 대신 화면의 다른 위치에 배치할 수 있습니다. 예를 들어, 탭바를 화면의 하단에 배치할 수 있습니다.

 

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            title: Text('Tabs Demo'),
          ),
          body: TabBarView(
            children: [
              Center(child: Text("Car Tab")),
              Center(child: Text("Transit Tab")),
              Center(child: Text("Bike Tab")),
            ],
          ),
          bottomNavigationBar: TabBar(
            tabs: [
              Tab(icon: Icon(Icons.directions_car), text: "Car"),
              Tab(icon: Icon(Icons.directions_transit), text: "Transit"),
              Tab(icon: Icon(Icons.directions_bike), text: "Bike"),
            ],
            labelColor: Colors.blue,
            unselectedLabelColor: Colors.grey,
            indicatorSize: TabBarIndicatorSize.label,
            indicatorColor: Colors.blue,
          ),
        ),
      ),
    );
  }
}

 

위 코드는 탭바를 화면의 하단에 배치하여 하단 내비게이션 형태로 사용합니다.

 

 

반응형

 

4. 동적 탭 추가 및 제거

TabController를 사용하면 탭을 동적으로 추가하거나 제거할 수 있습니다. TabController를 생성하고 상태를 관리하여 탭의 개수를 동적으로 변경할 수 있습니다.

 

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  TabController _tabController;
  List<Widget> _tabs = [Tab(icon: Icon(Icons.directions_car), text: "Car")];
  List<Widget> _tabViews = [Center(child: Text("Car Tab"))];

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: _tabs.length, vsync: this);
  }

  void _addTab() {
    setState(() {
      _tabs.add(Tab(icon: Icon(Icons.directions_bike), text: "Bike"));
      _tabViews.add(Center(child: Text("Bike Tab")));
      _tabController = TabController(length: _tabs.length, vsync: this);
    });
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Dynamic Tabs Demo'),
          bottom: TabBar(
            controller: _tabController,
            tabs: _tabs,
          ),
        ),
        body: TabBarView(
          controller: _tabController,
          children: _tabViews,
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _addTab,
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

 

위 코드는 탭을 동적으로 추가할 수 있는 예제입니다. 플로팅 액션 버튼을 눌러 새로운 탭을 추가할 수 있습니다.

결론

TabBar 위젯은 Flutter 애플리케이션에서 여러 화면을 탭으로 나누어 표시하는 데 매우 유용한 도구입니다. 기본 탭바부터 커스텀 스타일링, 위치 변경, 동적 탭 추가 등 다양한 기능을 활용하여 사용자 경험을 향상시킬 수 있습니다. TabBar와 TabBarView를 적절히 활용하여 직관적이고 효율적인 사용자 인터페이스를 설계해보세요.