[Flutter] Drawer사용법

일정 관리 앱을 만들던 중 사이드 메뉴를 사용하려고 하니 `Drawer`를 사용해야 한다는 것을 알게됨.

그래서 `Drawer`에 대해 정리를 해보려고함

 

`Drawer`란?

• 사용자가 앱의 메뉴를 열거나 닫을 때 슬라이딩 형태로 화면에 나타나는 위젯
• 주로 앱의 내비게이션 메뉴를 구현하는데 사용되고 다른 메뉴로 넘어가는 기능으로 사용됨

Flutter에서는 `Drawer`위젯과 `Scaffold`를 조합하여 주로 사용함.

 

순서대로 보겠음.

 

예제

1. `Scaffold` 생성

App에 `Drawer`를 구현하려면, `Scaffold` 위젯으로 감싸야함.

`Scaffold` 위젯은 `MATERIAL Design` 가이드 라인을 따르는 App에 일관된 시각적 구조를 제공함.

• `Drawer`
• `AppBar`
• `SnackBar`

와 같은 특별한 `Material Design` 컴포넌트들을 지원함.

Scaffold(
  appBar: AppBar(
    title: const Text('여기서는 햄버거가 없는 AppBar'),
  ),
  drawer: // 여기에 드로어를 추가하면 됨.
);

 

2. `Drawer` 추가

다음으로 `Scaffold`에 `Drawer`를 추가함.

Scaffold(
  appBar: AppBar(
    title: const Text('여기서부턴 햄버거 버튼 있는 AppBar'),
  ),
  drawer: Drawer(
    child: // 다음 단계에서 드로어에 내용을 채우면 됨.
  ),
);

 

3. `Drawer`에 항목 채우기

드로어를 생성했으므로 여기에 항목들을 추가하면 됨.

여기서는 `ListView`를 사용하겠음. `Column`을 사용해도 되지만, `ListView`는 콘텐츠가 초과하게 되면 사용자가 `Drawer`를 스크롤 할 수 있게 해주기 때문임.

 

`DrawerHeader`와 `ListView` 2개를 추가해보겠음.

Drawer(
  // 드로어에 ListView를 추가함. 이는 콘텐츠가 화면을 초과하는 경우 사용자가 드로어를 스크롤할 수 있게 함.
  child: ListView(
    // 중요: ListView에서 모든 패딩을 제거함.
    padding: EdgeInsets.zero,
    children: [
      const DrawerHeader(
        decoration: BoxDecoration(
          color: Colors.blue,
        ),
        child: Text('드로어 헤더'),
      ),
      ListTile(
        title: const Text('항목 1'),
        onTap: () {
          // 앱의 상태를 업데이트함.
          // ...
        },
      ),
      ListTile(
        title: const Text('항목 2'),
        onTap: () {
          // 앱의 상태를 업데이트함.
          // ...
        },
      ),
    ],
  ),
);

 

4. `Drawer`를 프로그래밍 방식으로 열기

일반적으로 드로어를 열기 위해 별도의 코드는 필요하지 않음. 

왜냐하면, `leading`위젯이 `null`인 경우 `AppBar`의 기본 구현은 `DrawerButton`이기 때문임

But, `Drawer`를 자유롭게 제어하려면 `Builder`를 사용하여 `Scaffold.of(context).openDrawer()`를 호출할 수 있음.

Scaffold(
  appBar: AppBar(
    title: const Text('햄버거 버튼 있는 AppBar'),
    leading: Builder(
      builder: (context) {
        return IconButton(
          icon: const Icon(Icons.menu),
          onPressed: () {
            Scaffold.of(context).openDrawer();
          },
        );
      },
    ),
  ),
  drawer: Drawer(
    child: // 마지막 단계에서 드로어에 내용을 채움.
  ),
);

 

5. `Drawer`를 프로그래밍 방식으로 닫기

사용자가 항목을 탭한 후 드로어를 닫고 싶을 수 있음. 이를 위해 `Navigator`를 사용할 수 있음.

 

사용자가 `Drawer`를 열면 Flutter는 `Drawer`를 내비게이션 스택에 추가함.

즉, `Drawer`를 닫으려면 `Navigator.pop(context)를 호출함.

ListTile(
  title: const Text('항목 1'),
  onTap: () {
    // 앱의 상태를 업데이트함.
    // ...
    // 그런 다음 Drawer를 닫음
    Navigator.pop(context);
  },
);

 

 

 

[출처] https://1986hz.tistory.com/143