Flutter의 Drawer 사용법

Flutter에서 Drawer 위젯은 앱의 측면에서 슬라이드하여 나타나는 내비게이션 패널입니다. 사용자는 드로어를 통해 다양한 화면이나 기능으로 쉽게 접근할 수 있습니다. 이번 글에서는 Flutter의 Drawer 위젯의 다양한 기능과 사용법에 대해 자세히 살펴보겠습니다.

1. 기본 Drawer 사용법

Drawer 위젯을 사용하려면 Scaffold 위젯의 drawer 속성에 Drawer 위젯을 추가해야 합니다. 가장 기본적인 형태의 드로어는 다음과 같습니다.

 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Drawer Demo')),
        drawer: Drawer(
          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'),
                onTap: () {
                  Navigator.pop(context);
                },
              ),
              ListTile(
                leading: Icon(Icons.settings),
                title: Text('Settings'),
                onTap: () {
                  Navigator.pop(context);
                },
              ),
            ],
          ),
        ),
        body: Center(child: Text('Swipe from the left to see the drawer.')),
      ),
    );
  }
}

 

위 코드는 기본적인 드로어를 생성합니다. 드로어는 ListView 위젯으로 구성되며, DrawerHeader와 ListTile을 포함합니다. DrawerHeader는 드로어의 상단에 배치되며, ListTile은 드로어 항목을 나타냅니다.

2. Drawer 항목 클릭 이벤트 처리

드로어 항목을 클릭하면 특정 작업을 수행하도록 설정할 수 있습니다. 예를 들어, 다른 화면으로 네비게이션하거나 설정을 변경할 수 있습니다.

 

ListTile(
  leading: Icon(Icons.home),
  title: Text('Home'),
  onTap: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => HomeScreen()),
    );
  },
),
ListTile(
  leading: Icon(Icons.settings),
  title: Text('Settings'),
  onTap: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => SettingsScreen()),
    );
  },
),

 

위 코드는 각 드로어 항목을 클릭할 때 해당 화면으로 네비게이션하는 예제입니다. Navigator.push를 사용하여 새 화면으로 이동합니다.

 

 

반응형

 

 

3. 사용자 정의 DrawerHeader

DrawerHeader를 사용자 정의하여 프로필 정보나 다른 콘텐츠를 표시할 수 있습니다.

 

DrawerHeader(
  decoration: BoxDecoration(
    color: Colors.blue,
  ),
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      CircleAvatar(
        radius: 40,
        backgroundImage: NetworkImage('https://example.com/profile_image.jpg'),
      ),
      SizedBox(height: 10),
      Text(
        'John Doe',
        style: TextStyle(
          color: Colors.white,
          fontSize: 24,
        ),
      ),
      Text(
        'johndoe@example.com',
        style: TextStyle(
          color: Colors.white70,
          fontSize: 14,
        ),
      ),
    ],
  ),
)

 

위 코드는 프로필 이미지를 포함한 사용자 정의 DrawerHeader를 생성합니다. CircleAvatar를 사용하여 프로필 이미지를 표시하고, 사용자 이름과 이메일을 추가합니다.

4. EndDrawer 사용

드로어를 왼쪽이 아닌 오른쪽에서 열리도록 설정하려면 Scaffold의 endDrawer 속성을 사용하면 됩니다.

 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('EndDrawer Demo')),
        endDrawer: Drawer(
          child: ListView(
            padding: EdgeInsets.zero,
            children: <Widget>[
              DrawerHeader(
                decoration: BoxDecoration(
                  color: Colors.blue,
                ),
                child: Text(
                  'End Drawer Header',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 24,
                  ),
                ),
              ),
              ListTile(
                leading: Icon(Icons.home),
                title: Text('Home'),
                onTap: () {
                  Navigator.pop(context);
                },
              ),
              ListTile(
                leading: Icon(Icons.settings),
                title: Text('Settings'),
                onTap: () {
                  Navigator.pop(context);
                },
              ),
            ],
          ),
        ),
        body: Center(child: Text('Swipe from the right to see the end drawer.')),
      ),
    );
  }
}

 

위 코드는 오른쪽에서 열리는 드로어를 생성합니다. Scaffold의 endDrawer 속성을 사용하여 오른쪽 드로어를 설정합니다.

5. 드로어 상태 관리

드로어의 상태를 프로그램matically 제어하려면 ScaffoldState를 사용하여 드로어를 열거나 닫을 수 있습니다.

 

final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

void _openDrawer() {
  _scaffoldKey.currentState?.openDrawer();
}

Scaffold(
  key: _scaffoldKey,
  appBar: AppBar(
    title: Text('Drawer Control Demo'),
    leading: IconButton(
      icon: Icon(Icons.menu),
      onPressed: _openDrawer,
    ),
  ),
  drawer: Drawer(
    // Drawer content here
  ),
  body: Center(child: Text('Press the menu icon to open the drawer.')),
)

 

위 코드는 GlobalKey를 사용하여 ScaffoldState에 접근하고, 드로어를 열기 위한 함수를 정의합니다. 앱바의 메뉴 아이콘을 눌러 드로어를 열 수 있습니다.

결론

Drawer 위젯은 Flutter 애플리케이션에서 중요한 내비게이션 요소로 사용됩니다. 기본 드로어부터 사용자 정의 헤더, 오른쪽 드로어, 상태 관리 등 다양한 기능을 활용하여 사용자 경험을 향상시킬 수 있습니다. Drawer를 적절히 활용하여 직관적이고 효율적인 내비게이션을 제공하는 애플리케이션을 만들어보세요.