Drawer

하요·2024년 7월 5일

drawer flutter

Flutter Widget of the Week

목록 보기

17/18

Flutter에서 사이드 내비게이션 관리하기: Drawer

애플리케이션의 내비게이션 구조를 사용자에게 제공하는 것은 중요한 디자인 고려사항입니다. Drawer 위젯은 애플리케이션의 주요 목적지 간의 전환을 쉽게 할 수 있는 사이드 내비게이션 메뉴를 제공합니다.

주요 속성

child: 드로어의 내용을 정의하는 위젯입니다. 보통 ListView를 사용하여 여러 개의 ListTile을 배치합니다.
elevation: 드로어의 그림자 높이를 설정합니다. 기본값은 16.0입니다.

ListView와 DrawerHeader

Drawer의 자식은 주로 ListView로 구성되며, 첫 번째 자식으로는 사용자 정보를 표시하는 DrawerHeader가 위치합니다. 나머지 항목들은 주로 ListTile로 구성되며, 마지막에는 AboutListTile이 위치할 수 있습니다.

주요 활용도

사이드 내비게이션 메뉴 제공: 사용자가 앱 내의 주요 섹션 간에 쉽게 이동할 수 있도록 도와줍니다.
유저 프로필 및 상태 정보 표시: DrawerHeader를 사용하여 사용자의 프로필 정보나 현재 상태를 표시할 수 있습니다.
설정 및 정보 항목 추가: 설정, 정보, 도움말 등의 항목을 쉽게 추가할 수 있습니다.

코드 예제

아래 예제는 Drawer를 사용하여 사이드 내비게이션 메뉴를 구성하는 방법을 보여줍니다. Scaffold의 drawer 속성에 Drawer 위젯을 할당하여 사용합니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _selectedDrawerIndex = 0;  // 현재 선택된 항목의 인덱스를 저장

  final List<Widget> _pages = [
    Center(child: Text('Home Page')),
    Center(child: Text('Settings Page')),
    Center(child: Text('Contact Us Page')),
  ];

  _getDrawerItemWidget(int pos) {
    return _pages[pos];
  }

  _onSelectItem(int index) {
    setState(() {
      _selectedDrawerIndex = index;
    });
    Navigator.of(context).pop();  // 드로어를 닫음
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Drawer Example with State Management'),
        ),
        drawer: Drawer(
          semanticLabel: 'Navigation menu',  // 접근성을 위한 레이블
          child: ListView(
            padding: EdgeInsets.zero,
            children: <Widget>[
              DrawerHeader(
                decoration: BoxDecoration(
                  color: Colors.blue,
                ),
                child: Text(
                  'Drawer Header',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 24,
                  ),
                ),
              ),
              ListTile(
                leading: Icon(Icons.home),
                title: Text('Home'),
                selected: _selectedDrawerIndex == 0,
                onTap: () => _onSelectItem(0),
              ),
              ListTile(
                leading: Icon(Icons.settings),
                title: Text('Settings'),
                selected: _selectedDrawerIndex == 1,
                onTap: () => _onSelectItem(1),
              ),
              ListTile(
                leading: Icon(Icons.contacts),
                title: Text('Contact Us'),
                selected: _selectedDrawerIndex == 2,
                onTap: () => _onSelectItem(2),
              ),
            ],
          ),
        ),
        body: _getDrawerItemWidget(_selectedDrawerIndex),
      ),
    );
  }
}

추가 팁

NavigationDrawer 사용 고려: Material 3를 사용하는 경우 NavigationDrawer 위젯을 고려해 보세요. Drawer와 유사하지만 추가 기능과 스타일을 제공합니다.

NavigationDrawer로의 업데이트

Material 3 버전의 컴포넌트인 NavigationDrawer가 있으며, Material 3로 구성된 애플리케이션에서는 NavigationDrawer가 선호됩니다. NavigationDrawer는 시각적으로 다소 차이가 있으며, Drawer 위젯이 하나의 자식만 가질 수 있는 반면, NavigationDrawer 위젯은 여러 위젯 목록을 가질 수 있습니다. 이 목록은 보통 NavigationDrawerDestination 위젯과 맞춤형 위젯들(예: 헤드라인, 구분선)로 구성됩니다.