Eine Seitenleiste

Teil des Abschnitts Listen und Bildschirme der Flutter-Journey von Coddy. Lektion 25 von 33.

Ein Drawer ist ein Bedienfeld, das von der Seite hereingleitet und für Bereiche einer App gedacht ist, die nicht in Tabs passen. Füge ihn dem Scaffold hinzu:

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

Mit einem Drawer zeigt die App-Leiste an ihrem Anfang eine Menütaste mit drei Linien an. Wenn du darauf tippst oder vom Rand nach innen wischst, wird der Drawer geöffnet.

Der Drawer bleibt geöffnet, bis ihn etwas schließt. Ein geöffneter Drawer ist wie ein Bildschirm über der Seite, daher schließt Navigator.pop(context) ihn. Rufe es auf, nachdem eine Zeile angetippt wurde, sonst verdeckt der Drawer die ausgewählte Seite.

Ein DrawerHeader ist der große Bereich oben, der für den Namen der App oder das angemeldete Konto vorgesehen ist.

Aufgabe

Einfach

Öffne die Schublade mit der Menütaste: Sie enthält nur den Posteingang. Füge zwei weitere Zeilen wie die Zeile für den Posteingang hinzu, die jeweils folder setzen und die Schublade schließen:

Sent mit Icons.send
Trash mit Icons.delete

Probier es selbst

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