Un tiroir latéral

Fait partie de la section Listes et écrans du Journey Flutter de Coddy. Leçon 25 sur 33.

Un Drawer est un panneau qui coulisse depuis le côté, destiné aux options de l’application qui ne trouvent pas leur place dans les onglets. Ajoute-le au 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);
          },
        ),
      ],
    ),
  ),
)

Avec un tiroir, la barre d’application affiche à son début un bouton de menu composé de trois lignes. Appuie dessus ou balaie depuis le bord pour ouvrir le tiroir.

Le tiroir reste ouvert jusqu’à ce qu’une action le ferme. Un tiroir ouvert est comme un écran posé au-dessus de la page : Navigator.pop(context) le ferme. Appelle cette méthode après avoir appuyé sur une ligne, sinon le tiroir recouvre la page que tu as choisie.

Un DrawerHeader est la grande zone en haut, destinée au nom de l’application ou au compte connecté.

Défi

Facile

Ouvre le tiroir avec le bouton de menu : il ne contient que Inbox. Ajoute deux autres lignes comme celle d’Inbox, chacune définissant folder et fermant le tiroir :

Sent, avec Icons.send
Trash, avec Icons.delete

Essayez vous-même

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