TabBarView

TabBarView는 TabBar와 함께 사용되며 탭 간의 스와이프 가능한 뷰를 제공하는 Flutter의 위젯입니다. 이 위젯은 각 탭에 해당하는 컨텐츠를 표시하며, 사용자가 탭을 클릭하거나 좌우로 스와이프할 때 TabBar 위젯과 동기화되어 뷰를 전환합니다.

주요 특징 및 사용법

• 탭 동기화: TabBarView는 TabController를 사용하여 TabBar와 동기화되며, 탭을 통해 선택된 뷰와 사용자의 스와이프 제스처를 모두 처리할 수 있습니다.

• 뷰 스와이프: 사용자는 TabBarView 안의 내용을 좌우로 스와이프하여 다른 탭의 컨텐츠로 넘어갈 수 있습니다.

• 커스텀 위젯 뷰: 각 탭에 해당하는 컨텐츠는 커스텀 위젯으로 제공되며, 이를 통해 탭마다 고유한 레이아웃과 기능을 구현할 수 있습니다.

• 애니메이션: TabBarView는 탭 간 전환 시 슬라이드 애니메이션을 기본으로 제공합니다.

예제 코드

DefaultTabController(
  length: 3, // 탭의 개수
  child: Scaffold(
    appBar: AppBar(
      bottom: TabBar(
        tabs: [
          Tab(icon: Icon(Icons.directions_car)),
          Tab(icon: Icon(Icons.directions_transit)),
          Tab(icon: Icon(Icons.directions_bike)),
        ],
      ),
    ),
    body: TabBarView(
      children: [
        Icon(Icons.directions_car, size: 128), // 첫 번째 탭의 컨텐츠
        Icon(Icons.directions_transit, size: 128), // 두 번째 탭의 컨텐츠
        Icon(Icons.directions_bike, size: 128), // 세 번째 탭의 컨텐츠
      ],
    ),
  ),
);

이 예제에서 DefaultTabController는 TabBar와 TabBarView를 묶어주는 역할을 합니다. TabBar에서 정의된 탭의 순서와 TabBarView의 자식 위젯 순서는 일치해야 하며, 이를 통해 각 탭이 클릭될 때 해당하는 뷰가 TabBarView에 나타나게 됩니다.

사용 시 고려사항

• TabBarView와 TabBar를 사용할 때 둘 다 동일한 TabController에 연결되어 있어야 합니다. DefaultTabController를 사용하거나 직접 TabController를 생성하여 두 위젯에 제공할 수 있습니다.

• TabBarView 내의 각 뷰는 보통 Container, ListView, GridView, Stack 등과 같은 위젯을 통해 더 복잡한 레이아웃을 구성할 수 있습니다.

• TabBarView의 부드러운 스와이프 동작은 사용자가 탭 인터페이스를 통해 앱 내의 다른 부분으로 쉽게 이동할 수 있도록 하는 좋은 사용자 경험을 제공합니다.

TabBarView는 주로 물리적인 탭과 연결된 페이지를 표시하는 경우에 사용되며, 이러한 구조는 많은 앱에서 볼 수 있는 탭 기반의 레이아웃을 구현할 때 일반적으로 사용됩니다.