Drawer Samping

Termasuk bagian List dan Layar dalam perjalanan Flutter di Coddy. Pelajaran 25 dari 33.

Drawer adalah panel yang meluncur masuk dari sisi layar, untuk menampilkan bagian aplikasi yang tidak muat di tab. Berikan ke 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);
          },
        ),
      ],
    ),
  ),
)

Dengan drawer, app bar menampilkan tombol menu dengan tiga garis di bagian awalnya. Ketuk tombol itu atau geser dari tepi untuk membuka drawer.

Drawer tetap terbuka sampai ada sesuatu yang menutupnya. Drawer yang terbuka seperti layar di atas halaman, jadi Navigator.pop(context) menutupnya. Panggil setelah sebuah baris diketuk, atau drawer akan menutupi halaman yang kamu pilih.

DrawerHeader adalah area besar di bagian atas, untuk nama aplikasi atau akun yang sudah masuk.

Tantangan

Mudah

Buka drawer dengan tombol menu: drawer ini hanya memiliki Inbox. Tambahkan dua baris lagi seperti baris Inbox, masing-masing mengatur folder dan menutup drawer:

Sent, dengan Icons.send
Trash, dengan Icons.delete

Coba sendiri

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