Geser untuk Menghapus

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

Di aplikasi email atau belanja, kamu menghapus item dengan menggesernya hingga keluar dari layar. Bungkus baris dengan Dismissible:

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

Baris meluncur menjauh di bawah jarimu. Setelah baris itu hilang, onDismissed dijalankan, lalu kamu menghapus item dari list-mu di setState. Jika tidak, item itu masih ada di list, dan Flutter berhenti dengan error: baris yang disingkirkan masih ada di list.

key memberi tahu Flutter baris yang mana, jadi nilainya harus berbeda untuk setiap baris: ValueKey(item) menggunakan item itu sendiri.

items bersifat final, dan kamu tetap bisa menghapus item darinya: final berarti variabel selalu menyimpan list yang sama, bukan berarti list itu tidak pernah berubah.

Tantangan

Mudah

Bilah aplikasi menghitung jumlah item. Buat shopping list bisa dihapus dengan menggeser: bungkus setiap ListTile dengan Dismissible menggunakan ValueKey(item) sebagai key-nya, lalu hapus item dari items saat item tersebut digeser hingga hilang.

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)
            ListTile(title: Text(item)),
        ],
      ),
    );
  }
}