מגירה צדדית

חלק מהיחידה רשימות ומסכים במסלול ה-Flutter של Coddy. שיעור 25 מתוך 33.

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);
              },
            ),
          ],
        ),
      ),
    );
  }
}