Hoàn tác thao tác vuốt

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

Bạn có thể vô tình vuốt đi một mục, vì vậy ứng dụng tốt thường cung cấp cách khôi phục: một SnackBar cho biết mục nào đã bị xóa, kèm theo nút Hoàn tác. SnackBarAction chính là nút đó:

SnackBar(
  content: Text('$item removed'),
  action: SnackBarAction(
    label: 'Undo',
    onPressed: () {
      setState(() {
        items.insert(index, item);
      });
    },
  ),
)

Để đưa mục trở lại đúng vị trí ban đầu, hãy ghi nhớ vị trí của nó trước khi xóa. items.indexOf(item) là vị trí của mục, items.removeAt(index) xóa mục đó và items.insert(index, item) đưa mục trở lại đúng vị trí ấy.

items.add(item) cũng đưa mục đó trở lại, nhưng ở cuối danh sách.

Thử thách

Trung bình

Khi vuốt một mục đi, hãy hiển thị SnackBar thông báo Milk removed (kèm tên mục đó) và một thao tác Undo để đưa mục đó về đúng vị trí cũ.

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)
            Dismissible(
              key: ValueKey(item),
              onDismissed: (direction) {
                setState(() {
                  items.remove(item);
                });
              },
              child: ListTile(title: Text(item)),
            ),
        ],
      ),
    );
  }
}