Flutter 튜토리얼 18편: 탭 바와 드로어 메뉴

요약#

핵심 요지#

문제 정의: 앱의 주요 섹션 간 이동을 위한 네비게이션 UI가 필요하다.
핵심 주장: TabBar¹, Drawer², BottomNavigationBar³로 일반적인 네비게이션 패턴을 구현한다.
주요 근거: Material Design 가이드라인에 따른 표준 네비게이션 컴포넌트를 제공한다.
실무 기준: 화면 크기와 콘텐츠 구조에 맞는 네비게이션 패턴을 선택해야 한다.
한계: 복잡한 중첩 네비게이션은 상태 관리가 필요할 수 있다.

문서가 설명하는 범위#

TabBar와 TabBarView로 탭 인터페이스 구현
Drawer로 사이드 메뉴 구현
BottomNavigationBar로 하단 탭 구현
NavigationRail로 반응형 네비게이션 구현

읽는 시간: 15분 | 난이도: 초급

참고 자료#

Work with tabs - 탭 구현
Add a drawer to a screen - 드로어 구현
NavigationBar - 하단 네비게이션
NavigationRail - 사이드 네비게이션

문제 상황#

앱에는 여러 주요 섹션이 있고, 사용자가 쉽게 이동할 수 있어야 합니다. 홈, 검색, 프로필 같은 주요 화면을 빠르게 전환하는 UI가 필요합니다.

일반적인 네비게이션 패턴#

1
탭 바: 화면 상단, 같은 레벨의 콘텐츠 전환
2
하단 탭: 화면 하단, 주요 섹션 이동 (3-5개)
3
드로어: 사이드 메뉴, 많은 항목 또는 설정
4
네비게이션 레일: 태블릿/데스크톱 사이드바

문제는 다음과 같습니다.

콘텐츠 구조에 맞는 네비게이션 패턴을 선택해야 한다.
탭과 콘텐츠를 동기화해야 한다.
선택 상태를 시각적으로 표시해야 한다.
화면 크기에 따라 적절한 패턴을 적용해야 한다.

해결 방법#

Flutter는 Material Design 가이드라인을 따르는 표준 네비게이션 위젯을 제공합니다.

챕터 1: TabBar 기본 구현#

Why#

NOTE
같은 레벨의 관련 콘텐츠를 빠르게 전환할 때 탭을 사용합니다.
예를 들어 “전체/인기/최신” 같은 필터링이나 “소개/리뷰/관련 상품” 같은 정보 분류에 적합합니다.
1
탭 선택 → TabController 동기화 → TabBarView 콘텐츠 표시

What#

NOTE
TabBar는 탭 버튼들을, TabBarView는 각 탭의 콘텐츠를 표시합니다.
DefaultTabController가 둘을 동기화합니다.

How#

TIP

DefaultTabController 사용 (권장)

1
import 'package:flutter/material.dart';
2

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

6
  @override
7
  Widget build(BuildContext context) {
8
    return DefaultTabController(
9
      length: 3, // 탭 개수
10
      child: Scaffold(
11
        appBar: AppBar(
12
          title: const Text('탭 데모'),
13
          bottom: const TabBar(
14
            tabs: [
15
              Tab(icon: Icon(Icons.home), text: '홈'),
16
              Tab(icon: Icon(Icons.search), text: '검색'),
17
              Tab(icon: Icon(Icons.person), text: '프로필'),
18
            ],
19
          ),
20
        ),
21
        body: const TabBarView(
22
          children: [
23
            Center(child: Text('홈 화면')),
24
            Center(child: Text('검색 화면')),
25
            Center(child: Text('프로필 화면')),
26
          ],
27
        ),
28
      ),
29
    );
30
  }
31
}

Tab 위젯 옵션

속성	설명
`icon`	탭 아이콘
`text`	탭 텍스트
`child`	커스텀 위젯 (text/icon 대신)

TabBar 스타일링

1
TabBar(
2
  tabs: [...],
3
  // 선택된 탭 스타일
4
  labelColor: Colors.white,
5
  unselectedLabelColor: Colors.white60,
6
  // 인디케이터 스타일
7
  indicatorColor: Colors.white,
8
  indicatorWeight: 3,
9
  indicatorSize: TabBarIndicatorSize.tab,
10
  // 탭 간격
11
  isScrollable: true, // 탭이 많을 때 스크롤 가능
12
)

Watch out#

WARNING

TabBar의 탭 개수와 TabBarView의 자식 개수가 일치해야 합니다.
또한 DefaultTabController의 length도 같아야 합니다.

1
// ❌ 탭 개수 불일치 → 런타임 에러
2
DefaultTabController(
3
  length: 3, // 3개
4
  child: Scaffold(
5
    appBar: AppBar(
6
      bottom: TabBar(tabs: [Tab(...), Tab(...)]), // 2개!
7
    ),
8
    body: TabBarView(children: [..., ..., ...]), // 3개
9
  ),
10
)
11

12
// ✅ 모두 동일한 개수
13
DefaultTabController(
14
  length: 3,
15
  child: Scaffold(
16
    appBar: AppBar(
17
      bottom: TabBar(tabs: [Tab(...), Tab(...), Tab(...)]), // 3개
18
    ),
19
    body: TabBarView(children: [..., ..., ...]), // 3개
20
  ),
21
)

결론: DefaultTabController로 TabBar와 TabBarView를 동기화하고, 탭 개수를 일치시킵니다.

챕터 2: TabController로 세밀한 제어#

Why#

NOTE
프로그래밍 방식으로 탭을 전환하거나 탭 변경을 감지해야 할 때가 있습니다.
버튼 클릭 시 특정 탭으로 이동하거나, 탭 변경 시 데이터를 로드하는 경우입니다.
1
이벤트 발생 → tabController.animateTo(index) → 탭 전환

What#

NOTE
TabController를 직접 생성하면 탭 상태를 세밀하게 제어할 수 있습니다.
addListener()로 탭 변경을 감지할 수 있습니다.

How#

TIP

TabController 직접 관리

1
class ManualTabControllerDemo extends StatefulWidget {
2
  const ManualTabControllerDemo({super.key});
3

4
  @override
5
  State<ManualTabControllerDemo> createState() => _ManualTabControllerDemoState();
6
}
7

8
class _ManualTabControllerDemoState extends State<ManualTabControllerDemo>
9
    with TickerProviderStateMixin {
10
  late TabController _tabController;
11

12
  @override
13
  void initState() {
14
    super.initState();
15
    _tabController = TabController(
16
      length: 3,
17
      vsync: this, // TickerProviderStateMixin 제공
18
      initialIndex: 0, // 초기 탭 인덱스
19
    );
20

21
    // 탭 변경 리스너
22
    _tabController.addListener(_handleTabChange);
23
  }
24

25
  void _handleTabChange() {
26
    if (_tabController.indexIsChanging) {
27
      // 탭이 변경 중
28
      print('탭 변경 중: ${_tabController.index}');
29
    } else {
30
      // 탭 변경 완료
31
      print('현재 탭: ${_tabController.index}');
32
      _loadDataForTab(_tabController.index);
33
    }
34
  }
35

36
  void _loadDataForTab(int index) {
37
    // 탭별 데이터 로드
38
  }
39

40
  void _goToTab(int index) {
41
    _tabController.animateTo(index);
42
  }
43

44
  @override
45
  void dispose() {
46
    _tabController.removeListener(_handleTabChange);
47
    _tabController.dispose();
48
    super.dispose();
49
  }
50

51
  @override
52
  Widget build(BuildContext context) {
53
    return Scaffold(
54
      appBar: AppBar(
55
        title: const Text('탭 컨트롤러 데모'),
56
        bottom: TabBar(
57
          controller: _tabController,
58
          tabs: const [
59
            Tab(text: '첫 번째'),
60
            Tab(text: '두 번째'),
61
            Tab(text: '세 번째'),
62
          ],
63
        ),
64
      ),
65
      body: TabBarView(
66
        controller: _tabController,
67
        children: const [
68
          Center(child: Text('첫 번째 탭')),
69
          Center(child: Text('두 번째 탭')),
70
          Center(child: Text('세 번째 탭')),
71
        ],
72
      ),
73
      floatingActionButton: FloatingActionButton(
74
        onPressed: () => _goToTab(2), // 세 번째 탭으로 이동
75
        child: const Icon(Icons.arrow_forward),
76
      ),
77
    );
78
  }
79
}

TabController 주요 속성/메서드

API	설명
`index`	현재 선택된 탭 인덱스
`animateTo(index)`	애니메이션과 함께 탭 전환
`indexIsChanging`	탭 전환 중 여부
`addListener()`	변경 리스너 등록
`previousIndex`	이전 탭 인덱스

Watch out#

WARNING

TabController를 사용하려면 TickerProviderStateMixin이 필요합니다.
또한 dispose()에서 컨트롤러를 해제해야 합니다.

1
// ❌ vsync 제공 안 함 → 에러
2
class _MyState extends State<MyWidget> {
3
  late TabController _tabController;
4

5
  @override
6
  void initState() {
7
    super.initState();
8
    _tabController = TabController(length: 3, vsync: this); // 에러!
9
  }
10
}
11

12
// ✅ mixin으로 vsync 제공
13
class _MyState extends State<MyWidget> with TickerProviderStateMixin {
14
  late TabController _tabController;
15

16
  @override
17
  void initState() {
18
    super.initState();
19
    _tabController = TabController(length: 3, vsync: this); // OK
20
  }
21
}

결론: TabController로 탭을 프로그래밍 방식으로 제어하고, TickerProviderStateMixin을 믹스인합니다.

챕터 3: Drawer 사이드 메뉴#

Why#

NOTE
많은 네비게이션 항목이나 설정 메뉴는 드로어에 넣는 것이 좋습니다.
주요 섹션 외에 프로필, 설정, 도움말 등을 드로어에 배치합니다.
1
햄버거 메뉴 → 드로어 열림 → 항목 선택 → 드로어 닫힘 → 화면 이동

What#

NOTE
Drawer 위젯은 Scaffold의 drawer 속성에 추가합니다.
AppBar가 있으면 자동으로 햄버거 메뉴 아이콘이 표시됩니다.

How#

TIP

기본 Drawer 구현

1
class DrawerDemo extends StatefulWidget {
2
  const DrawerDemo({super.key});
3

4
  @override
5
  State<DrawerDemo> createState() => _DrawerDemoState();
6
}
7

8
class _DrawerDemoState extends State<DrawerDemo> {
9
  int _selectedIndex = 0;
10

11
  final List<DrawerItem> _items = const [
12
    DrawerItem(icon: Icons.home, title: '홈'),
13
    DrawerItem(icon: Icons.search, title: '검색'),
14
    DrawerItem(icon: Icons.favorite, title: '즐겨찾기'),
15
    DrawerItem(icon: Icons.settings, title: '설정'),
16
  ];
17

18
  void _onItemTapped(int index) {
19
    setState(() {
20
      _selectedIndex = index;
21
    });
22
    Navigator.pop(context); // 드로어 닫기
23
  }
24

25
  @override
26
  Widget build(BuildContext context) {
27
    return Scaffold(
28
      appBar: AppBar(
29
        title: Text(_items[_selectedIndex].title),
30
      ),
31
      drawer: Drawer(
32
        child: ListView(
33
          padding: EdgeInsets.zero,
34
          children: [
35
            // 드로어 헤더
36
            const DrawerHeader(
37
              decoration: BoxDecoration(color: Colors.blue),
38
              child: Column(
39
                crossAxisAlignment: CrossAxisAlignment.start,
40
                mainAxisAlignment: MainAxisAlignment.end,
41
                children: [
42
                  CircleAvatar(
43
                    radius: 30,
44
                    backgroundImage: NetworkImage('https://i.pravatar.cc/150'),
45
                  ),
46
                  SizedBox(height: 8),
47
                  Text(
48
                    '홍길동',
49
                    style: TextStyle(color: Colors.white, fontSize: 18),
50
                  ),
51
                  Text(
52
                    '[email protected]',
53
                    style: TextStyle(color: Colors.white70),
54
                  ),
55
                ],
56
              ),
57
            ),
58
            // 네비게이션 항목
59
            ...List.generate(_items.length, (index) {
60
              return ListTile(
61
                leading: Icon(_items[index].icon),
62
                title: Text(_items[index].title),
63
                selected: _selectedIndex == index,
64
                onTap: () => _onItemTapped(index),
65
              );
66
            }),
67
            const Divider(),
68
            ListTile(
69
              leading: const Icon(Icons.logout),
70
              title: const Text('로그아웃'),
71
              onTap: () {
72
                Navigator.pop(context);
73
                // 로그아웃 처리
74
              },
75
            ),
76
          ],
77
        ),
78
      ),
79
      body: Center(
80
        child: Text('${_items[_selectedIndex].title} 화면'),
81
      ),
82
    );
83
  }
84
}
85

86
class DrawerItem {
87
  final IconData icon;
88
  final String title;
89

90
  const DrawerItem({required this.icon, required this.title});
91
}

UserAccountsDrawerHeader 사용

1
UserAccountsDrawerHeader(
2
  accountName: const Text('홍길동'),
3
  accountEmail: const Text('[email protected]'),
4
  currentAccountPicture: const CircleAvatar(
5
    backgroundImage: NetworkImage('https://i.pravatar.cc/150'),
6
  ),
7
  decoration: const BoxDecoration(color: Colors.blue),
8
  otherAccountsPictures: const [
9
    CircleAvatar(
10
      backgroundImage: NetworkImage('https://i.pravatar.cc/100'),
11
    ),
12
  ],
13
)

Watch out#

WARNING
드로어 항목을 탭하면 Navigator.pop(context)로 드로어를 닫아야 합니다.
드로어는 네비게이션 스택에 추가되므로 pop()으로 제거합니다.
1
ListTile(
2
  title: const Text('홈'),
3
  onTap: () {
4
    // 먼저 드로어 닫기
5
    Navigator.pop(context);
6
    // 그 다음 화면 이동 (필요시)
7
    Navigator.pushNamed(context, '/home');
8
  },
9
)
드로어를 닫지 않고 화면을 이동하면 이상한 동작이 발생할 수 있습니다.

결론: Drawer를 Scaffold.drawer에 추가하고, 항목 선택 시 Navigator.pop()으로 드로어를 닫습니다.

챕터 4: BottomNavigationBar 하단 탭#

Why#

NOTE
모바일 앱에서 3-5개의 주요 섹션을 하단 탭으로 제공합니다.
엄지손가락으로 쉽게 접근할 수 있어 모바일 UX에 적합합니다.
1
하단 탭 선택 → 상태 업데이트 → 화면 전환

What#

NOTE
BottomNavigationBar는 Scaffold의 bottomNavigationBar 속성에 추가합니다.
NavigationBar는 Material 3 스타일의 하단 네비게이션입니다.

How#

TIP

BottomNavigationBar 구현

1
class BottomNavDemo extends StatefulWidget {
2
  const BottomNavDemo({super.key});
3

4
  @override
5
  State<BottomNavDemo> createState() => _BottomNavDemoState();
6
}
7

8
class _BottomNavDemoState extends State<BottomNavDemo> {
9
  int _selectedIndex = 0;
10

11
  static const List<Widget> _pages = [
12
    HomePage(),
13
    SearchPage(),
14
    NotificationsPage(),
15
    ProfilePage(),
16
  ];
17

18
  void _onItemTapped(int index) {
19
    setState(() {
20
      _selectedIndex = index;
21
    });
22
  }
23

24
  @override
25
  Widget build(BuildContext context) {
26
    return Scaffold(
27
      appBar: AppBar(
28
        title: const Text('하단 네비게이션'),
29
      ),
30
      body: _pages[_selectedIndex],
31
      bottomNavigationBar: BottomNavigationBar(
32
        type: BottomNavigationBarType.fixed, // 4개 이상일 때 필요
33
        currentIndex: _selectedIndex,
34
        onTap: _onItemTapped,
35
        items: const [
36
          BottomNavigationBarItem(
37
            icon: Icon(Icons.home),
38
            label: '홈',
39
          ),
40
          BottomNavigationBarItem(
41
            icon: Icon(Icons.search),
42
            label: '검색',
43
          ),
44
          BottomNavigationBarItem(
45
            icon: Icon(Icons.notifications),
46
            label: '알림',
47
          ),
48
          BottomNavigationBarItem(
49
            icon: Icon(Icons.person),
50
            label: '프로필',
51
          ),
52
        ],
53
      ),
54
    );
55
  }
56
}

Material 3 NavigationBar

1
NavigationBar(
2
  selectedIndex: _selectedIndex,
3
  onDestinationSelected: _onItemTapped,
4
  destinations: const [
5
    NavigationDestination(
6
      icon: Icon(Icons.home_outlined),
7
      selectedIcon: Icon(Icons.home),
8
      label: '홈',
9
    ),
10
    NavigationDestination(
11
      icon: Icon(Icons.search_outlined),
12
      selectedIcon: Icon(Icons.search),
13
      label: '검색',
14
    ),
15
    NavigationDestination(
16
      icon: Icon(Icons.notifications_outlined),
17
      selectedIcon: Icon(Icons.notifications),
18
      label: '알림',
19
    ),
20
  ],
21
)

BottomNavigationBar vs NavigationBar

속성	BottomNavigationBar	NavigationBar
스타일	Material 2	Material 3
아이콘 상태	같은 아이콘	선택/비선택 아이콘
인디케이터	없음	필 인디케이터
권장	레거시 앱	새 앱

Watch out#

WARNING
BottomNavigationBar에 4개 이상의 항목이 있으면 type: BottomNavigationBarType.fixed를 설정해야 합니다.
기본값 shifting은 3개 이하일 때만 잘 작동합니다.
1
// ❌ 4개 이상에서 shifting 사용 → 아이콘 위치가 이상해짐
2
BottomNavigationBar(
3
  items: [..., ..., ..., ...], // 4개
4
  // type 미지정 (기본값: shifting)
5
)
6

7
// ✅ 4개 이상에서 fixed 사용
8
BottomNavigationBar(
9
  type: BottomNavigationBarType.fixed,
10
  items: [..., ..., ..., ...],
11
)

결론: 모바일 앱의 주요 섹션은 BottomNavigationBar나 NavigationBar로 구현합니다.

챕터 5: IndexedStack으로 상태 유지#

Why#

NOTE
탭을 전환할 때마다 화면이 새로 생성되면 스크롤 위치나 입력 상태가 초기화됩니다.
IndexedStack을 사용하면 화면 상태를 유지할 수 있습니다.
1
탭 A (스크롤 위치 유지) ↔ 탭 B (스크롤 위치 유지)

What#

NOTE
IndexedStack은 모든 자식을 메모리에 유지하고, 선택된 인덱스의 자식만 표시합니다.
화면 전환 시 상태가 보존됩니다.

How#

TIP

IndexedStack 사용

1
class StatefulBottomNav extends StatefulWidget {
2
  const StatefulBottomNav({super.key});
3

4
  @override
5
  State<StatefulBottomNav> createState() => _StatefulBottomNavState();
6
}
7

8
class _StatefulBottomNavState extends State<StatefulBottomNav> {
9
  int _selectedIndex = 0;
10

11
  // 화면들을 미리 생성 (상태 유지를 위해)
12
  final List<Widget> _pages = [
13
    const HomePage(key: PageStorageKey('home')),
14
    const SearchPage(key: PageStorageKey('search')),
15
    const ProfilePage(key: PageStorageKey('profile')),
16
  ];
17

18
  @override
19
  Widget build(BuildContext context) {
20
    return Scaffold(
21
      body: IndexedStack(
22
        index: _selectedIndex,
23
        children: _pages,
24
      ),
25
      bottomNavigationBar: NavigationBar(
26
        selectedIndex: _selectedIndex,
27
        onDestinationSelected: (index) {
28
          setState(() {
29
            _selectedIndex = index;
30
          });
31
        },
32
        destinations: const [
33
          NavigationDestination(icon: Icon(Icons.home), label: '홈'),
34
          NavigationDestination(icon: Icon(Icons.search), label: '검색'),
35
          NavigationDestination(icon: Icon(Icons.person), label: '프로필'),
36
        ],
37
      ),
38
    );
39
  }
40
}
41

42
// 스크롤 위치 유지를 위한 PageStorageKey 사용
43
class HomePage extends StatelessWidget {
44
  const HomePage({super.key});
45

46
  @override
47
  Widget build(BuildContext context) {
48
    return ListView.builder(
49
      key: const PageStorageKey('home_list'),
50
      itemCount: 100,
51
      itemBuilder: (context, index) => ListTile(
52
        title: Text('항목 $index'),
53
      ),
54
    );
55
  }
56
}

PageStorageKey로 스크롤 위치 유지

1
ListView.builder(
2
  key: const PageStorageKey('unique_key'),
3
  // ...
4
)

Watch out#

WARNING

IndexedStack은 모든 자식을 메모리에 유지하므로 리소스를 더 사용합니다.
화면이 많거나 무거운 위젯이 있으면 지연 로딩을 고려하세요.

1
// ⚠️ 모든 화면이 메모리에 유지됨
2
IndexedStack(
3
  children: [
4
    HeavyWidget1(), // 메모리 사용
5
    HeavyWidget2(), // 메모리 사용
6
    HeavyWidget3(), // 메모리 사용
7
  ],
8
)
9

10
// 대안: 필요할 때만 생성
11
body: _selectedIndex == 0
12
    ? const HomePage()
13
    : _selectedIndex == 1
14
        ? const SearchPage()
15
        : const ProfilePage(),

결론: 화면 상태 유지가 필요하면 IndexedStack을, 메모리 효율이 중요하면 조건부 렌더링을 사용합니다.

챕터 6: NavigationRail로 반응형 네비게이션#

Why#

NOTE
태블릿이나 데스크톱에서는 하단 탭보다 사이드 레일이 더 적합합니다.
화면 크기에 따라 네비게이션 스타일을 전환하는 반응형 디자인이 필요합니다.
1
모바일: BottomNavigationBar
2
태블릿: NavigationRail
3
데스크톱: NavigationRail (확장)

What#

NOTE
NavigationRail은 화면 왼쪽에 수직으로 배치되는 네비게이션입니다.
extended 속성으로 레이블을 표시하거나 숨길 수 있습니다.

How#

TIP

반응형 네비게이션 구현

1
class ResponsiveNavDemo extends StatefulWidget {
2
  const ResponsiveNavDemo({super.key});
3

4
  @override
5
  State<ResponsiveNavDemo> createState() => _ResponsiveNavDemoState();
6
}
7

8
class _ResponsiveNavDemoState extends State<ResponsiveNavDemo> {
9
  int _selectedIndex = 0;
10

11
  @override
12
  Widget build(BuildContext context) {
13
    final screenWidth = MediaQuery.of(context).size.width;
14
    final isWideScreen = screenWidth >= 600;
15
    final isVeryWideScreen = screenWidth >= 900;
16

17
    return Scaffold(
18
      body: Row(
19
        children: [
20
          // 태블릿/데스크톱: NavigationRail 표시
21
          if (isWideScreen)
22
            NavigationRail(
23
              extended: isVeryWideScreen, // 넓은 화면에서 레이블 표시
24
              selectedIndex: _selectedIndex,
25
              onDestinationSelected: (index) {
26
                setState(() {
27
                  _selectedIndex = index;
28
                });
29
              },
30
              leading: isVeryWideScreen
31
                  ? const Padding(
32
                      padding: EdgeInsets.all(8.0),
33
                      child: Text(
34
                        '내 앱',
35
                        style: TextStyle(
36
                          fontSize: 20,
37
                          fontWeight: FontWeight.bold,
38
                        ),
39
                      ),
40
                    )
41
                  : const SizedBox(height: 8),
42
              destinations: const [
43
                NavigationRailDestination(
44
                  icon: Icon(Icons.home_outlined),
45
                  selectedIcon: Icon(Icons.home),
46
                  label: Text('홈'),
47
                ),
48
                NavigationRailDestination(
49
                  icon: Icon(Icons.search_outlined),
50
                  selectedIcon: Icon(Icons.search),
51
                  label: Text('검색'),
52
                ),
53
                NavigationRailDestination(
54
                  icon: Icon(Icons.notifications_outlined),
55
                  selectedIcon: Icon(Icons.notifications),
56
                  label: Text('알림'),
57
                ),
58
                NavigationRailDestination(
59
                  icon: Icon(Icons.person_outlined),
60
                  selectedIcon: Icon(Icons.person),
61
                  label: Text('프로필'),
62
                ),
63
              ],
64
            ),
65
          // 콘텐츠 영역
66
          Expanded(
67
            child: _buildPage(_selectedIndex),
68
          ),
69
        ],
70
      ),
71
      // 모바일: BottomNavigationBar 표시
72
      bottomNavigationBar: isWideScreen
73
          ? null
74
          : NavigationBar(
75
              selectedIndex: _selectedIndex,
76
              onDestinationSelected: (index) {
77
                setState(() {
78
                  _selectedIndex = index;
79
                });
80
              },
81
              destinations: const [
82
                NavigationDestination(
83
                  icon: Icon(Icons.home_outlined),
84
                  selectedIcon: Icon(Icons.home),
85
                  label: '홈',
86
                ),
87
                NavigationDestination(
88
                  icon: Icon(Icons.search_outlined),
89
                  selectedIcon: Icon(Icons.search),
90
                  label: '검색',
91
                ),
92
                NavigationDestination(
93
                  icon: Icon(Icons.notifications_outlined),
94
                  selectedIcon: Icon(Icons.notifications),
95
                  label: '알림',
96
                ),
97
                NavigationDestination(
98
                  icon: Icon(Icons.person_outlined),
99
                  selectedIcon: Icon(Icons.person),
100
                  label: '프로필',
101
                ),
102
              ],
103
            ),
104
    );
105
  }
106

107
  Widget _buildPage(int index) {
108
    switch (index) {
109
      case 0:
110
        return const Center(child: Text('홈 화면'));
111
      case 1:
112
        return const Center(child: Text('검색 화면'));
113
      case 2:
114
        return const Center(child: Text('알림 화면'));
115
      case 3:
116
        return const Center(child: Text('프로필 화면'));
117
      default:
118
        return const Center(child: Text('알 수 없는 화면'));
119
    }
120
  }
121
}

Watch out#

WARNING
NavigationRail을 사용할 때 Row와 Expanded를 올바르게 구성해야 합니다.
레일이 고정 너비를 차지하고 콘텐츠가 나머지 공간을 채워야 합니다.
1
// ✅ 올바른 구조
2
Row(
3
  children: [
4
    NavigationRail(...), // 고정 너비
5
    Expanded(child: content), // 나머지 공간
6
  ],
7
)
8

9
// ❌ Expanded 없으면 오버플로우 발생
10
Row(
11
  children: [
12
    NavigationRail(...),
13
    content, // 너비가 제한되지 않음
14
  ],
15
)

결론: MediaQuery로 화면 크기를 확인하고, 모바일은 하단 탭, 태블릿/데스크톱은 레일을 표시합니다.

한계#

탭과 드로어 네비게이션에는 몇 가지 한계가 있습니다.

중첩 네비게이션: 각 탭에 독립적인 네비게이션 스택을 유지하기 어렵습니다.
상태 관리: 화면 간 상태 공유는 별도 상태 관리 솔루션이 필요합니다.
딥 링킹: 특정 탭의 특정 화면으로 직접 이동하려면 추가 설정이 필요합니다.
애니메이션: 탭 전환 시 커스텀 애니메이션 적용이 제한적입니다.

TabBar(탭 바): 탭 버튼들을 가로로 배치하는 위젯이다. AppBar.bottom에 주로 배치한다. ↩
Drawer(드로어): 화면 가장자리에서 슬라이드되어 나오는 사이드 메뉴 패널이다. ↩
BottomNavigationBar(바텀 네비게이션 바): 화면 하단에 배치되는 탭 형태의 네비게이션이다. ↩

Flutter 튜토리얼 18편: 탭 바와 드로어 메뉴

요약#

핵심 요지#

문서가 설명하는 범위#

참고 자료#

문제 상황#

일반적인 네비게이션 패턴#

해결 방법#

챕터 1: TabBar 기본 구현#

Why#

What#

How#

Watch out#

챕터 2: TabController로 세밀한 제어#

Why#

What#

How#

Watch out#

챕터 3: Drawer 사이드 메뉴#

Why#

What#

How#

Watch out#

챕터 4: BottomNavigationBar 하단 탭#

Why#

What#

How#

Watch out#

챕터 5: IndexedStack으로 상태 유지#

Why#

What#

How#

Watch out#

챕터 6: NavigationRail로 반응형 네비게이션#

Why#

What#

How#

Watch out#

한계#

Footnotes#

공유

목차