[flutter] Scaffold에서 옆에 drawer를 추가하는 방법은 어떻게 되나요?

12 Dec 2023

flutter

Scaffold는 Flutter 앱의 기본적인 레이아웃 구조를 제공하는데, 이 중에 하나가 Drawer입니다. Drawer를 Scaffold에 추가하는 방법은 매우 간단합니다.

1. Scaffold에 Drawer 추가하기

Scaffold(
  appBar: AppBar(
    title: Text('Scaffold with Drawer'),
  ),
  drawer: Drawer(
    child: ListView(
      padding: EdgeInsets.zero,
      children: <Widget>[
        DrawerHeader(
          decoration: BoxDecoration(
            color: Colors.blue,
          ),
          child: Text('Drawer Header'),
        ),
        ListTile(
          title: Text('Item 1'),
          onTap: () {
            // Update the state of the app
            // ...
            Navigator.pop(context);
          },
        ),
        ListTile(
          title: Text('Item 2'),
          onTap: () {
            // Update the state of the app
            // ...
            Navigator.pop(context);
          },
        ),
      ],
    ),
  ),
  body: Center(
    child: Text('Scaffold Body'),
  ),
)

2. Drawer 내에 아이템 추가하기

Drawer는 ListView와 ListTile을 사용하여 항목들을 보여줄 수 있습니다. DrawerHeader는 Drawer 상단에 대표적으로 표시될 수 있는 위젯입니다.

3. Item을 클릭했을 때의 동작 추가하기

각각의 ListTile에는 onTap 속성을 이용하여 클릭했을 때의 동작을 추가할 수 있습니다.

이렇게 간단하게 Scaffold에 Drawer를 추가하고 관리할 수 있습니다. 시작부터 샘플 코드를 사용하여 세부 동작을 확인해보세요.

기타 자세한 내용은 Flutter 공식 문서를 참고하세요.