Ngăn kéo bên

Thuộc phần Danh sách và màn hình trong hành trình Flutter của Coddy. Bài học 25 trên 33.

Drawer là một bảng trượt vào từ bên cạnh, dùng cho những mục trong ứng dụng không phù hợp với các tab. Thêm nó vào 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);
          },
        ),
      ],
    ),
  ),
)

Khi có ngăn kéo, thanh ứng dụng sẽ hiển thị nút menu ba gạch ở đầu thanh. Chạm vào nút đó hoặc vuốt từ mép màn hình vào để mở ngăn kéo.

Ngăn kéo vẫn mở cho đến khi có thao tác đóng nó. Ngăn kéo đang mở giống như một màn hình nằm phía trên trang, vì vậy Navigator.pop(context) sẽ đóng nó. Gọi lệnh này sau khi bạn chạm vào một hàng, nếu không ngăn kéo sẽ che mất trang bạn chọn.

DrawerHeader là vùng lớn ở trên cùng, dùng để hiển thị tên ứng dụng hoặc tài khoản đã đăng nhập.

Thử thách

Dễ

Mở ngăn kéo bằng nút menu: trong đó chỉ có Inbox. Thêm hai hàng nữa giống hàng Inbox, mỗi hàng sẽ đặt folder và đóng ngăn kéo:

Sent, với Icons.send
Trash, với Icons.delete

Tự làm thử

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