[flutter] 플러터 Drawer에서 사용자가 스와이프 동작을 통해 메뉴를 열고 닫는 방법은?

07 Dec 2023

flutter

사용자가 스와이프 동작을 통해 Drawer를 열고 닫을 수 있도록 하려면 Scaffold 위젯에서 drawer 속성을 사용하여 Drawer를 구현한 뒤, Scaffold의 body 속성에는 상태를 관리하기 위한 GlobalKey를 사용해주세요. 이렇게 하면 사용자가 스와이프 동작을 통해 Drawer를 열고 닫을 수 있습니다.

다음은 해당 기능을 구현하는 예제 코드입니다:

import 'package:flutter/material.dart';

class MyHomePage extends StatelessWidget {
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        title: Text('Flutter Drawer'),
      ),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            ListTile(
              title: Text('메뉴 1'),
              onTap: () {
                // 메뉴 1 선택 시 동작
              },
            ),
            ListTile(
              title: Text('메뉴 2'),
              onTap: () {
                // 메뉴 2 선택 시 동작
              },
            ),
          ],
        ),
      ),
      body: Container(
        child: Center(
          child: Text('메인 화면'),
        ),
      ),
    );
  }
}

위의 코드에서는 GlobalKey<ScaffoldState>를 사용하여 Scaffold의 상태를 관리하고, drawer 속성을 사용하여 Drawer를 구현했습니다. ListTile 위젯을 사용하여 메뉴를 추가하고, 각 메뉴의 onTap 콜백 함수를 정의하여 선택 시 동작을 정의할 수 있습니다.

이제 사용자는 스와이프 동작을 통해 Drawer를 열고 닫을 수 있게 됩니다. 앱의 홈 화면에서 스와이프 동작을 시도해보면 Drawer가 나타나고 사라지는 것을 확인할 수 있을 것입니다.

더 많은 정보가 필요하다면 플러터의 공식 문서(https://flutter.dev/)를 참조해주세요.