Boczna szuflada

Część sekcji Listy i ekrany ścieżki Flutter w Coddy. Lekcja 25 z 33.

Drawer to panel, który wysuwa się z boku i służy do umieszczania tam opcji aplikacji, które nie mieszczą się w kartach. Przekaż go do 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);
          },
        ),
      ],
    ),
  ),
)

Gdy używasz panelu bocznego, pasek aplikacji wyświetla na początku przycisk menu z trzema liniami. Dotknij go lub przesuń palcem od krawędzi ekranu, aby otworzyć panel.

Panel boczny pozostaje otwarty, dopóki go nie zamkniesz. Otwarty panel boczny przypomina ekran wyświetlony nad stroną, więc Navigator.pop(context) go zamyka. Wywołaj tę metodę po dotknięciu wiersza, w przeciwnym razie panel zasłoni wybraną stronę.

DrawerHeader to duży obszar u góry, przeznaczony na nazwę aplikacji lub konto, na które zalogowano.

Wyzwanie

Łatwy

Otwórz szufladę przyciskiem menu: zawiera tylko folder Inbox. Dodaj dwa kolejne wiersze, podobne do wiersza Inbox, z których każdy ustawia folder i zamyka szufladę:

Sent, z Icons.send
Trash, z Icons.delete

Spróbuj swoich sił

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