[flutter] 스크롤바를 사용하여 탭 바 구현하기

11 Dec 2023

flutter

앱에서 여러 개의 탭을 표시하고 싶을 때, 탭 간의 전환을 편리하게 할 수 있는 탭 바를 사용하는 것이 일반적입니다. 하지만 많은 수의 탭이 표시될 경우, 이를 위한 추가적인 UI 요소가 필요할 수 있습니다.

이 문제를 해결하는 한 가지 방법은 스크롤바를 사용하는 것입니다. 스크롤바를 통해 사용자는 모든 탭에 쉽게 접근할 수 있으며, 화면에 보이는 것 이상의 탭이 표시되어도 문제없이 스크롤할 수 있습니다.

이제 flutter에서 탭 바와 스크롤바를 함께 구현하는 방법에 대해 살펴보겠습니다.

1. 탭 바 구현하기

먼저, flutter에서 기본적인 탭 바를 구현하는 방법은 다음과 같습니다.

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('탭 바 예제'),
            bottom: TabBar(
              tabs: [
                Tab(text: 'Tab 1'),
                Tab(text: 'Tab 2'),
                Tab(text: 'Tab 3'),
              ],
            ),
          ),
          body: TabBarView(
            children: [
              Center(child: Text('탭 1')),
              Center(child: Text('탭 2')),
              Center(child: Text('탭 3')),
            ],
          ),
        ),
      ),
    );
  }
}

위 코드는 3개의 탭을 가지는 간단한 탭 바를 구현한 예제입니다.

2. 스크롤바 추가하기

위에서 구현한 탭 바에 스크롤바를 추가하는 방법은 매우 간단합니다.

TabBar(
  isScrollable: true,
  tabs: [
    Tab(text: 'Tab 1'),
    Tab(text: 'Tab 2'),
    Tab(text: 'Tab 3'),
    Tab(text: 'Tab 4'),
    // ... 중략 ...
    Tab(text: 'Tab N'),
  ],
),

TabBar 위젯의 isScrollable 속성을 true로 설정하면, 탭이 화면에 모두 표시되지 못할 경우 자동으로 스크롤바가 추가됩니다.

마무리

flutter를 사용하여 탭 바와 스크롤바를 함께 구현하는 방법을 알아보았습니다. 이를 참고하여 다양한 UI 요소를 효과적으로 구현해 보시기 바랍니다.