درج جانبي

جزء من قسم القوائم والشاشات في رحلة 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 إلى المساحة الكبيرة في الأعلى، المخصصة لاسم التطبيق أو الحساب الذي سجلت الدخول إليه.

التحدي

سهل

افتح لوحة التنقل باستخدام زر القائمة: فهي تحتوي على «الوارد» فقط. أضف صفّين آخرين مثل صفّ الوارد، بحيث يضبط كلٌّ منهما 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);
              },
            ),
          ],
        ),
      ),
    );
  }
}