[flutter] 플러터 Scaffold의 drawer 기능은 어떻게 구현되나요?

12 Dec 2023

flutter

예를 들어, 다음과 같이 Scaffold 위젯을 사용하여 drawer를 추가할 수 있습니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MyHomePage(),
  ));
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Drawer 예제'),
      ),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            DrawerHeader(
              child: Text('Drawer 헤더'),
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
            ),
            ListTile(
              title: Text('메뉴 항목 1'),
              onTap: () {
                // TODO: 메뉴 항목 1을 선택했을 때 처리 로직
              },
            ),
            ListTile(
              title: Text('메뉴 항목 2'),
              onTap: () {
                // TODO: 메뉴 항목 2을 선택했을 때 처리 로직
              },
            ),
          ],
        ),
      ),
      body: Center(
        child: Text('Flutter Drawer 예제'),
      ),
    );
  }
}

이렇게 하면 Scaffold의 drawer 속성에 Drawer 위젯을 추가하여 몇 줄의 코드로 drawer를 구현할 수 있습니다. 위 예제에서는 Drawer 내부에 ListView와 ListTile을 사용하여 드로어 항목들을 추가했습니다.DrawerHeader는 드로어의 상단에 표시될 헤더 부분을 나타냅니다.

Scaffold 위젯을 사용하면 앱에 쉽게 drawer 기능을 추가할 수 있으며, 필요에 따라 다양한 위젯을 사용하여 drawer를 사용자 정의할 수 있습니다.

더 자세한 내용은 Flutter 공식 문서를 참고하시기 바랍니다.