Batalkan Geser

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

Geser mudah dilakukan tanpa sengaja, jadi aplikasi yang baik menyediakan cara untuk membatalkannya: SnackBar yang memberi tahu apa yang dihapus, dengan tombol Urungkan. SnackBarAction adalah tombol itu:

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

Agar item kembali ke tempat semula, ingat posisinya sebelum kamu menghapusnya. items.indexOf(item) adalah posisinya, items.removeAt(index) menghapusnya, dan items.insert(index, item) mengembalikannya ke posisi yang sama.

items.add(item) juga akan mengembalikannya, tetapi di akhir list.

Tantangan

Sedang

Saat sebuah barang diswipe, tampilkan SnackBar yang bertuliskan Milk removed (dengan nama barang tersebut) dan aksi Undo yang mengembalikan barang ke tempat semula.

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