사이드 드로어

Coddy Flutter 여정의 목록과 화면 섹션에 포함된 레슨. 33개 중 25번째.

Drawer는 탭에 넣기 어려운 앱의 항목을 표시하기 위해 옆에서 밀려 나오는 패널입니다. Scaffold에 지정하세요.

Scaffold(
  appBar: AppBar(title: Text(folder)),
  drawer: Drawer(
    child: ListView(
      children: [
        const DrawerHeader(child: Text('Mail')),
        ListTile(
          title: const Text('Sent'),
          onTap: () {
            setState(() {
              folder = 'Sent';
            });
            Navigator.pop(context);
          },
        ),
      ],
    ),
  ),
)

드로어가 있으면 앱 바의 시작 부분에 세 줄 모양의 메뉴 버튼이 표시됩니다. 이 버튼을 탭하거나 화면 가장자리에서 안쪽으로 스와이프하면 드로어가 열립니다.

드로어는 닫는 동작을 할 때까지 열린 상태로 유지됩니다. 열린 드로어는 페이지 위에 표시되는 화면과 같으므로 Navigator.pop(context)을 호출하면 닫힙니다. 행을 탭한 후 호출하지 않으면 드로어가 선택한 페이지를 가립니다.

DrawerHeader는 앱 이름이나 로그인한 계정을 표시하는 상단의 넓은 영역입니다.

챌린지

쉬움

메뉴 버튼으로 서랍을 여세요. 서랍에는 Inbox만 있습니다. Inbox 행과 같은 방식으로 행을 두 개 더 추가하고, 각 행에서 folder를 설정하고 서랍을 닫으세요:

Sent, Icons.send 사용
Trash, Icons.delete 사용

직접 해보기

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  String folder = 'Inbox';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(folder)),
      body: Center(
        child: Text('No messages in $folder'),
      ),
      drawer: Drawer(
        child: ListView(
          children: [
            const DrawerHeader(
              child: Text('Mail', style: TextStyle(fontSize: 24)),
            ),
            ListTile(
              leading: const Icon(Icons.inbox),
              title: const Text('Inbox'),
              onTap: () {
                setState(() {
                  folder = 'Inbox';
                });
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
    );
  }
}