[flutter] 플러터 Drawer의 디자인 패턴은 어떻게 적용되는가?

07 Dec 2023

flutter

플러터(Flutter)에서 Drawer는 앱의 사이드 메뉴를 표시하는데 사용되는 중요한 컴포넌트입니다. 사용자가 사이드로 슬라이드하여 다양한 네비게이션 옵션을 제공하고, 전역적으로 접근 가능한 기능을 제공합니다. 이러한 Drawer를 구현하는데 있어서 다양한 디자인 패턴을 사용할 수 있지만, 가장 일반적으로 사용되는 방법은 다음과 같습니다.

1. Scaffold와 Drawer 사용

Drawer를 구현하기 위해서는 Scaffold 위젯 안에 Drawer 위젯을 배치해야 합니다. Scaffold의 drawer 속성을 지정하여 Drawer를 추가할 수 있습니다. 다음은 간단한 예제 코드입니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

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

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      drawer: Drawer(
        child: ListView(
          children: <Widget>[
            ListTile(
              title: Text('메뉴1'),
              onTap: () {
                // 메뉴1 클릭 시 동작
              },
            ),
            ListTile(
              title: Text('메뉴2'),
              onTap: () {
                // 메뉴2 클릭 시 동작
              },
            ),
          ],
        ),
      ),
      body: Center(
        child: Text('내용'),
      ),
    );
  }
}

위 코드에서 Drawer 위젯을 Scaffold의 drawer 속성으로 지정하고, ListView와 ListTile을 사용하여 메뉴 항목을 추가합니다. ListTile 위젯의 onTap 속성을 사용하여 각 항목을 클릭했을 때의 동작을 지정할 수 있습니다.

2. Drawer의 커스터마이징

Drawer의 디자인을 커스터마이징하려면 Drawer 위젯 대신 Drawer 클래스의 상속 클래스를 사용할 수 있습니다. 다음은 Drawer를 상속한 CustomDrawer 클래스를 구현한 예제입니다.

class CustomDrawer extends Drawer {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        children: <Widget>[
          DrawerHeader(
            decoration: BoxDecoration(
              color: Colors.blue,
            ),
            child: Text(
              'Custom Drawer Header',
              style: TextStyle(
                color: Colors.white,
                fontSize: 24.0,
              ),
            ),
          ),
          ListTile(
            title: Text('메뉴1'),
            onTap: () {
              // 메뉴1 클릭 시 동작
            },
          ),
          ListTile(
            title: Text('메뉴2'),
            onTap: () {
              // 메뉴2 클릭 시 동작
            },
          ),
        ],
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      drawer: CustomDrawer(), // CustomDrawer 사용
      body: Center(
        child: Text('내용'),
      ),
    );
  }
}

위 코드에서 CustomDrawer 클래스를 생성하여 Drawer를 상속하고, DrawerHeader로 커스텀 헤더를 추가하였습니다. 이렇게하면 Drawer의 외관을 사용자 정의할 수 있습니다.

3. Drawer 사용 시 주의사항

Drawer는 앱의 전역적인 컨텍스트에서 쉽게 접근할 수 있는 네비게이션을 제공하기 때문에 사용할 때 몇 가지 주의사항이 있습니다.

Drawer를 스크롤 가능하게 만들려면 ListView 위젯을 사용해야 합니다.
Drawer의 메뉴 항목은 ListTile을 사용하여 리스트 형태로 표시됩니다.
Drawer의 메뉴 항목은 onTap 속성을 사용하여 클릭 이벤트를 처리할 수 있습니다.
Drawer는 Scaffold 위젯 안에서만 동작합니다.