[flutter] 플러터 Drawer를 사용하여 설정 메뉴를 추가하는 방법은?

07 Dec 2023

flutter

플러터의 Drawer 위젯은 앱의 왼쪽에서 오른쪽으로 슬라이딩되는 메뉴를 제공하는 지침이다. Drawer에 설정 메뉴를 추가하려면 다음 단계를 따르면 된다.

Drawer를 사용할 위젯을 준비한다. 이 위젯은 Scaffold의 drawer 속성으로 설정될 것이다. Scaffold는 기본 앱 레이아웃을 제공하는 위젯이다.
AppBar에 Drawer 아이콘을 추가한다. 이 아이콘은 앱 바 상단에 토글 버튼으로 표시되어, Drawer를 열고 닫을 수 있다.
Drawer 아이템을 추가한다. 설정 메뉴와 같은 항목들을 ListTile 위젯으로 구성하여 Drawer에 추가한다.
Drawer 아이템을 선택했을 때의 동작을 구현한다. onChanged 콜백 함수를 사용하여 아이템을 선택했을 때의 동작을 정의할 수 있다.

아래는 설정 메뉴를 추가한 플러터 Drawer의 예시이다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Drawer"),
      ),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            UserAccountsDrawerHeader(
              accountName: Text("John Doe"),
              accountEmail: Text("johndoe@example.com"),
              currentAccountPicture: CircleAvatar(
                child: Icon(Icons.person),
              ),
            ),
            ListTile(
              leading: Icon(Icons.settings),
              title: Text("Settings"),
              onTap: () {
                // 설정 페이지로 이동하는 코드 추가
              },
            ),
            ListTile(
              leading: Icon(Icons.info),
              title: Text("About"),
              onTap: () {
                // 앱 정보 페이지로 이동하는 코드 추가
              },
            ),
          ],
        ),
      ),
      body: Container(),
    );
  }
}

위 코드에서는 AppBar에 Drawer 아이콘을 추가하고, Drawer에 UserAccountsDrawerHeader를 이용하여 사용자 정보를 표시한다. 그리고 ListTile을 사용하여 설정과 앱 정보 메뉴를 추가하고, onTap 콜백 함수에서 각각의 동작을 구현하면 된다.

플러터 Drawer를 사용하여 설정 메뉴를 추가하는 방법에 대해 알아보았다. 이를 활용하여 앱에 다양한 메뉴를 추가할 수 있다.