플러터:화면 전환(Drawer) 편집하기

{{플러터}}

== 개요 ==
앱 왼쪽(또는 오른쪽)에서 슬라이드하여 열리는 메뉴.

* 기본적으로 스캐폴드의 속성으로 마련되어 있다.
* Drawer는 보조 메뉴, 설정, 사용자 정보, 페이지 이동에 널리 사용된다.
* 하단 네비게이션바가 항상 보이는 메뉴라면,  Drawer는 필요할 때 여는 메뉴.

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

= 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',
      home: HomePage(),
    );
  }
}

// ① Drawer 메뉴 항목을 구조화
// ───────────────────────────────────────
class MenuItem {
  final String title;
  final IconData icon;
  final Widget page;

  MenuItem({
    required this.title,
    required this.icon,
    required this.page,  // 메뉴를 탭하면 넘어갈 페이지를 담는다. 요런식으로 객체화를 준비해서 관리하면 편함.
  });
}

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

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

  // ② 메뉴 데이터를 한 곳에서 정의
  // ───────────────────────────────────────
  late final List<MenuItem> menuItems = [
    MenuItem(
      title: "첫 번째 화면",
      icon: Icons.home,
      page: Center(child: Text('첫 번째 화면', style: TextStyle(fontSize: 24))),
    ),
    MenuItem(
      title: "두 번째 화면",
      icon: Icons.star,
      page: Center(child: Text('두 번째 화면', style: TextStyle(fontSize: 24))),
    ),
    MenuItem(
      title: "세 번째 화면",
      icon: Icons.settings,
      page: Center(child: Text('세 번째 화면', style: TextStyle(fontSize: 24))),
    ),
  ];

  void _selectPage(int index) {
    setState(() {
      _selectedIndex = index;
    });
    Navigator.pop(context); // 최상단이 Drawer라서, Drawer 닫기
  }

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

      // ③ Drawer = ListView.builder로 자동 생성
      // ───────────────────────────────────────
      drawer: Drawer(
        child: ListView(   // 리스트 뷰 안에서 자동생성해서 관리한다.
          children: [
            DrawerHeader(
              child: Text("메뉴", style: TextStyle(fontSize: 24)),
            ),
            ...List.generate(menuItems.length, (index) {  // "..."은 리스트의 원소를 풀어 넣으라는 의미. 익명함수에 정의된 대로 리스트를 만들어 풀어 넣는다.
              final item = menuItems[index];
              return ListTile(
                leading: Icon(item.icon),
                title: Text(item.title),
                onTap: () => _selectPage(index),
              );
            }),
          ],
        ),
      ),
      body: menuItems[_selectedIndex].page,  // 위에서 지정한 페이지를 body에 담는다.
    );
  }
}</syntaxhighlight>

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

=== 팁 ===
다음처럼 page에 다른 파일에 정의한 위젯을 두면 편리하게 관리 가능.

    MenuItem(

      title: "데시벨 미터",

      icon: Icons.mic,

      page: DecibelMeterHome(),  // lib/features/decibel_meter/decibel_home.dart 에 정의된 위젯 사용

    ),

= 의문 =

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

하지만 원한다면 Drawer에서도 push를 통한 화면 이동이 가능하다.(Push가 화면을 위에 쌓는 거긴 하지만, 그렇다고 리소스가 과도하게 늘진 않는다. 그래도 하위 화면에서 위젯 등을 많이 사용하면 는다. 이걸 위한 다른 방식도 있지만, 그닥 쓸 상황이 만들어지진 않을듯.)

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

=== Drawer는 오른쪽에서도 만들 수 있나? ===
가능하다. Drawer 대신 아래처럼. 이 경우 화면 오른쪽에서 슬라이드된다.

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

양쪽 동시 사용도 가능하다. 위아래로는 공식 지원은 없고(25년 기준), 다른 위젯들을 조합해 구현은 가능.