플러터:화면 전환(Drawer) - 편집 역사

Sam: /* Drawer와 BottomNavigationBar 비교 */

2026-01-07T01:05:39Z

Drawer와 BottomNavigationBar 비교

← 이전 판		2026년 1월 7일 (수) 01:05 판
15번째 줄:		15번째 줄:
	\|-		\|-
	\| 목적		\| 목적
	\| 설정·보조 메뉴, 추가 기능		\|
			* 설정·보조 메뉴, 추가 기능
			* 프로파일 보여주기
	\| 주요 화면 간 전환		\| 주요 화면 간 전환
	\|-		\|-
47번째 줄:		49번째 줄:

	// ① Drawer 메뉴 항목을 구조화		// ① Drawer 메뉴 항목을 구조화
	// ~~───────────────────────────────────────~~		// 이런 식으로 안하면 수정 시 코드의 위아래를 번갈아 오가며 수정해야 해서 불편함;
	class MenuItem {		class MenuItem {
	final String title;		final String title;
70번째 줄:		72번째 줄:
	// ② 메뉴 데이터를 한 곳에서 정의		// ② 메뉴 데이터를 한 곳에서 정의
	// ───────────────────────────────────────		// ───────────────────────────────────────
	~~late~~ final List<MenuItem> menuItems = [		final List<MenuItem> menuItems = [
	MenuItem(		MenuItem(
	title: "첫 번째 화면",		title: "첫 번째 화면",

Sam: /* 개요 */

2026-01-06T23:33:49Z

개요

← 이전 판		2026년 1월 6일 (화) 23:33 판
6번째 줄:		6번째 줄:
	* 기본적으로 스캐폴드의 속성으로 마련되어 있다.		* 기본적으로 스캐폴드의 속성으로 마련되어 있다.
	* Drawer는 보조 메뉴, 설정, 사용자 정보, 페이지 이동에 널리 사용된다.		* Drawer는 보조 메뉴, 설정, 사용자 정보, 페이지 이동에 널리 사용된다.
	* 하단 네비게이션바가 ~~“항상~~ 보이는 ~~메뉴”라면~~, Drawer는 "필요할 때 여는 메뉴"		* 하단 네비게이션바가 항상 보이는 메뉴라면, Drawer는 필요할 때 여는 메뉴.

	=== Drawer와 BottomNavigationBar 비교 ===		=== Drawer와 BottomNavigationBar 비교 ===

2025년 11월 24일 (월) 01:07에 Sam님의 편집

2025-11-24T01:07:08Z

@@ 148번째 줄: / 148번째 줄: @@
+|
 |}
 = 의문 =

Sam: /* 개요 */

2025-11-19T16:16:39Z

개요

차이 보기

Sam: 새 문서: {{플러터}} == 개요 == 앱 왼쪽(또는 오른쪽)에서 슬라이드하여 열리는 메뉴. Drawer는 보조 메뉴, 설정, 사용자 정보, 페이지 이동에 널리 사용된다. 하단 네비게이션바가 “항상 보이는 메뉴”라면, Drawer는 “필요할 때 여는 메뉴”라는 점이 다르다. = Drawer 기본 구조 = import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends St...

2025-11-19T07:48:02Z

새 문서: {{플러터}} == 개요 == 앱 왼쪽(또는 오른쪽)에서 슬라이드하여 열리는 메뉴. Drawer는 보조 메뉴, 설정, 사용자 정보, 페이지 이동에 널리 사용된다. 하단 네비게이션바가 “항상 보이는 메뉴”라면, Drawer는 “필요할 때 여는 메뉴”라는 점이 다르다. = Drawer 기본 구조 = <syntaxhighlight lang="dart"> import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends St...

새 문서

{{플러터}}

== 개요 ==
앱 왼쪽(또는 오른쪽)에서 슬라이드하여 열리는 메뉴.
Drawer는 보조 메뉴, 설정, 사용자 정보, 페이지 이동에 널리 사용된다.

하단 네비게이션바가 “항상 보이는 메뉴”라면,
Drawer는 “필요할 때 여는 메뉴”라는 점이 다르다.

= Drawer 기본 구조 =
<syntaxhighlight lang="dart">
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Drawer Demo',
debugShowCheckedModeBanner: false,
home: HomePage(),
);
}
}

class HomePage extends StatefulWidget {
@override
State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
int _selectedIndex = 0;

static const List<Widget> _pages = [
Center(child: Text('첫 번째 화면', style: TextStyle(fontSize: 24))),
Center(child: Text('두 번째 화면', style: TextStyle(fontSize: 24))),
Center(child: Text('세 번째 화면', style: TextStyle(fontSize: 24))),
];

void _selectPage(int index) {
setState(() {
_selectedIndex = index;
});
Navigator.pop(context); // Drawer 닫기
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Drawer Demo"),
),

drawer: Drawer(
child: ListView(
children: [
DrawerHeader(
child: Text(
"메뉴",
style: TextStyle(fontSize: 24),
),
),
ListTile(
title: Text("첫 번째 화면"),
onTap: () => _selectPage(0),
),
ListTile(
title: Text("두 번째 화면"),
onTap: () => _selectPage(1),
),
ListTile(
title: Text("세 번째 화면"),
onTap: () => _selectPage(2),
),
],
),
),

body: _pages[_selectedIndex],
);
}
}
</syntaxhighlight>

= 이해를 위한 추가 설명 =
{| class="wikitable"
! 요소
! 설명
! 비고
|-
| drawer: Drawer()
| Scaffold에 Drawer를 추가하면 AppBar 왼쪽에 “햄버거 아이콘(≡)”이 자동 생성된다.
| IconButton을 따로 만들 필요 없음.
|-
| DrawerHeader
| 드로어 최상단 영역. 앱 제목, 프로필, 사용자 정보 등을 넣기에 적합하다.
| backgroundColor 지정 가능.
|-
| ListTile
| 메뉴 항목을 구성하는 기본 요소. onTap을 통해 화면 전환 처리.
| BottomNavigationBar와 같은 방식(인덱스 변경)으로 동작 가능.
|-
| Navigator.pop(context)
| Drawer를 닫는다. 메뉴 선택 시 Drawer가 열린 채로 남는 것을 방지한다.
|
|}

= Drawer와 BottomNavigationBar 비교 =
{| class="wikitable"
! 항목
! Drawer
! BottomNavigationBar
|-
| 목적
| 설정·보조 메뉴, 추가 기능
| 주요 화면 간 전환
|-
| 표시 방식
| 필요할 때만 열림
| 항상 화면 아래에 있음
|-
| 적합한 메뉴 수
| 많아도 괜찮음
| 보통 3~5개
|-
| 접근 방식
| 햄버거 버튼 또는 슬라이드
| 언제든 탭 가능
|}

== 의문 ==

=== 왜 Drawer에서는 Navigator.push 대신 index를 변경하는 방식이 많은가? ===
Drawer는 보통 앱의 주요 탭 전환을 담당하므로,
전체 레이아웃은 유지한 채 `body`만 교체하는 방식이 자연스럽다.

하지만 원한다면 Drawer에서도 push를 통한 화면 이동이 가능하다.

<syntaxhighlight lang="dart">
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (_) => SettingPage()),
);
}
</syntaxhighlight>

둘 다 가능하며 상황에 따라 선택하면 된다.

=== Drawer는 오른쪽에서도 만들 수 있나? ===
가능하다.

<syntaxhighlight lang="dart">
endDrawer: Drawer(...)
</syntaxhighlight>

이 경우 화면 오른쪽에서 슬라이드된다.

=== StatelessWidget으로 만들 수 없나? ===
Drawer가 선택한 메뉴에 따라 `body`를 바꾸려면
상태(index)를 유지해야 하므로 일반적으로 StatefulWidget이 필요하다.

내부 Navigator를 별도로 구성하면 Stateless로도 구현은 가능하지만
일반 구조에서는 잘 사용되지 않는다.

== 결론 ==
* Drawer는 “필요할 때 여는 메뉴”
* BottomNavigationBar는 “항상 보이는 메뉴”
* 구현 원리는 동일 → 메뉴 선택 시 상태를 변경하여 body를 교체
* 보조 메뉴, 설정, 사용자 정보, 페이지 전환 등에 널리 사용됨