Vuốt để xóa

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 26 trên 33.

Trong ứng dụng thư hoặc mua sắm, bạn xóa một mục bằng cách vuốt mục đó ra khỏi màn hình. Bọc hàng trong Dismissible:

Dismissible(
  key: ValueKey(item),
  onDismissed: (direction) {
    setState(() {
      items.remove(item);
    });
  },
  child: ListTile(title: Text(item)),
)

Hàng trượt đi dưới ngón tay bạn. Khi hàng biến mất, onDismissed chạy, và bạn xóa mục đó khỏi danh sách trong setState. Nếu không, danh sách vẫn còn mục đó, và Flutter dừng lại với lỗi: hàng vừa bị loại bỏ vẫn còn trong danh sách.

key cho Flutter biết hàng nào là hàng nào, vì vậy mỗi hàng phải có một khóa khác nhau: ValueKey(item) dùng chính mục đó.

items là final, và bạn vẫn có thể xóa mục khỏi danh sách: final nghĩa là biến luôn giữ cùng một danh sách, chứ không có nghĩa là danh sách không bao giờ thay đổi.

Thử thách

Dễ

Thanh ứng dụng đếm số mặt hàng. Hãy cho phép vuốt danh sách mua sắm: bọc mỗi ListTile trong một Dismissible với ValueKey(item) làm khóa, rồi xóa mặt hàng khỏi items khi vuốt bỏ mặt hàng đó.

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> {
  final List<String> items = ['Milk', 'Bread', 'Eggs', 'Apples', 'Cheese'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('${items.length} items')),
      body: ListView(
        children: [
          for (String item in items)
            ListTile(title: Text(item)),
        ],
      ),
    );
  }
}