Flutter 문서 번역 - 화면에 drawer 추가

Material Design을 사용하는 앱에는, navigation을 위한 두 가지 중요한 옵션인 tab 과 drawer가 있습니다. tab을 지원할 충분한 공간이 없을 때 drawer는 편리한 대안이 됩니다.

Flutter에서는 Drawer 위젯을 Scaffold와 함께 사용하여 Material Design drawer로 만듭니다. 여기서는 다음 단계를 사용합니다.

1. Scaffold를 만듭니다.
2. drawer를 추가합니다.
3. drawer에 항목을 채웁니다.
4. drawer를 프로그래밍으로 닫습니다.

1. Scaffold 만들기

앱에 drawer를 추가하려면, Scaffold 위젯에 넣으세요. Scaffold 위젯은 Material Design 가이드라인에 따라 앱에 일관된 시각적 구조를 제공합니다. 또한 Drawer, AppBar, SnackBar와 같은 특수 Material Design 구성 요소를 지원합니다.

이 예제에서는 drawer가 있는 Scaffold를 만듭니다.

Scaffold(
  appBar: AppBar(
    title: const Text('AppBar without hamburger button'),
  ),
  drawer: // 다음 단계에서 여기에 Drawer를 추가
);

2. drawer 추가하기

이제 Scaffold에 drawer를 추가하세요. drawer는 어떤 위젯이든 될 수 있지만, Material Design 사양을 준수하는 material library의 Drawer 위젯을 사용하는 것이 가장 좋습니다.

Scaffold(
  appBar: AppBar(
    title: const Text('AppBar with hamburger button'),
  ),
  drawer: Drawer(
    child: // 다음 단계에서 Drawer를 채웁니다.
  ),
);

3. drawer에 항목 채우기

이제 Drawer에 내용을 추가하세요. 이 예제에서는 ListView를 사용합니다. Column 위젯을 사용할 수도 있지만, ListView는 화면이 지원하는 공간보다 더 많은 공간을 차지하는 경우 drawer를 스크롤할 수 있어 편리합니다.

ListView를 DrawerHeader와 두 개의 ListTile 위젯으로 채웁니다. 목록 작업에 대한 자세한 내용은 list recipes를 참조하세요.

Drawer(
  // drawer에 ListView를 추가하세요. 이렇게 하면 drawer의 모든 항목이 들어갈 충분한 수직 공간이 없는 경우 사용자가 drawer의 옵션을 스크롤할 수 있습니다.
  child: ListView(
    // 중요: ListView에서 padding을 제거하세요.
    padding: EdgeInsets.zero,
    children: [
      const DrawerHeader(
        decoration: BoxDecoration(
          color: Colors.blue,
        ),
        child: Text('Drawer Header'),
      ),
      ListTile(
        title: const Text('Item 1'),
        onTap: () {
          // 앱의 state 업데이트
          // ...
        },
      ),
      ListTile(
        title: const Text('Item 2'),
        onTap: () {
          // 앱의 state 업데이트
          // ...
        },
      ),
    ],
  ),
);

4. drawer 프로그래밍으로 닫기

사용자가 항목을 탭한 후, drawer를 닫고 싶을 수 있습니다. Navigator로 할 수 있습니다.

사용자가 drawer를 열면, Flutter는 drawer를 navigation stack에 추가합니다. 따라서 drawer를 닫으려면 Navigator.pop(context)를 호출하세요.

ListTile(
  title: const Text('Item 1'),
  onTap: () {
    // 앱의 state 업데이트
    // ...
    // 그런 다음 drawer를 닫습니다.
    Navigator.pop(context);
  },
),

대화형(Interactive) 예제

이 예제는 Scaffold 위젯 내에서 사용되는 Drawer를 보여줍니다. Drawer에는 세 개의 ListTile 항목이 있습니다. _onItemTapped 함수는 선택한 항목의 인덱스를 변경하고 Scaffold의 중앙에 해당 텍스트를 표시합니다.

예제는 원문, Add a drawer to a screen > Interactive example 에서 확인