플러터] 네비게이션과 라우팅 - 탭(Tap) 작업하기

Material Design 가이드라인을 따르는 앱에서 탭 작업은 일반적인 패턴입니다. Flutter는 material 라이브러리의 일환으로 탭 레이아웃을 간편하게 만들 수 있는 방법을 제공합니다.

 

이 문서에서는 다음 단계를 사용하여 탭 예제를 만듭니다:

1. TabController 생성하기
2. 탭 생성하기
3. 각 탭에 대한 콘텐츠 생성하기

 

 

 

1. TabController 생성하기

탭이 제대로 작동하려면 선택된 탭과 콘텐츠 섹션을 동기화해야 합니다. 이 작업은 TabController가 담당합니다.

TabController를 수동으로 생성하거나 DefaultTabController 위젯을 사용하여 자동으로 생성할 수 있습니다.

 

DefaultTabController를 사용하는 것이 가장 간단한 옵션입니다. 이는 TabController를 생성하고 모든 자손 위젯에 사용할 수 있도록 합니다.

return MaterialApp(
  home: DefaultTabController(
    length: 3,
    child: Scaffold(),
  ),
);

 

 

 

2. 탭 생성하기

탭이 선택되면 콘텐츠를 표시해야 합니다. TabBar 위젯을 사용하여 탭을 생성할 수 있습니다. 이 예제에서는 세 개의 Tab 위젯으로 구성된 TabBar를 생성하고 이를 AppBar 내에 배치합니다.

return MaterialApp(
  home: DefaultTabController(
    length: 3,
    child: Scaffold(
      appBar: AppBar(
        bottom: const TabBar(
          tabs: [
            Tab(icon: Icon(Icons.directions_car)),
            Tab(icon: Icon(Icons.directions_transit)),
            Tab(icon: Icon(Icons.directions_bike)),
          ],
        ),
      ),
    ),
  ),
);

 

기본적으로 TabBar는 위젯 트리를 거슬러 올라가 가장 가까운 DefaultTabController를 찾습니다. TabController를 수동으로 생성하는 경우, 이를 TabBar에 전달하세요.

 

 

 

3. 각 탭에 대한 콘텐츠 생성하기

이제 탭이 있으므로 탭이 선택될 때 콘텐츠를 표시해야 합니다. 이를 위해 TabBarView 위젯을 사용합니다.

 

주의: 순서는 중요하며 TabBar의 탭 순서와 일치해야 합니다.

body: const TabBarView(
  children: [
    Icon(Icons.directions_car),
    Icon(Icons.directions_transit),
    Icon(Icons.directions_bike),
  ],
),

 

 

 

인터랙티브 예제

인터랙티브 예제를 통해 실제로 탭을 어떻게 구현하는지 확인할 수 있습니다.

import 'package:flutter/material.dart';

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

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

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