Yan Çekmece

Coddy'nin Flutter Journey'sinin Listeler ve Ekranlar bölümünün bir parçası. Ders 25 / 33.

Bir Drawer, sekmelere sığmayan uygulama bölümleri için kenardan içeri kayan bir paneldir. Bunu Scaffold'a ver:

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

Bir çekmece kullanıldığında uygulama çubuğunun başında üç çizgili bir menü düğmesi görünür. Bu düğmeye dokunmak veya kenardan içeri doğru kaydırmak çekmeceyi açar.

Bir çekmece, kapatılana kadar açık kalır. Açık bir çekmece, sayfanın üstünde duran bir ekran gibidir; bu nedenle Navigator.pop(context) onu kapatır. Bir satıra dokunulduktan sonra bunu çağır; yoksa çekmece, seçtiğin sayfanın üstünü kapatır.

DrawerHeader, uygulamanın adı veya oturum açmış hesap için üstteki büyük alandır.

Görev

Kolay

Menü düğmesiyle çekmeceyi aç: içinde yalnızca Inbox var. Inbox satırı gibi iki satır daha ekle; her biri folder değerini ayarlasın ve çekmeceyi kapatsın:

Sent, Icons.send ile
Trash, Icons.delete ile

Kendin dene

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