Deslizar para eliminar

Parte de la sección Listas y pantallas del Journey de Flutter de Coddy. Lección 26 de 33.

En una aplicación de correo o de compras, eliminas un elemento deslizándolo fuera de la pantalla. Envuelve la fila en un Dismissible:

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

La fila se desliza debajo de tu dedo y desaparece. Cuando ya no está, se ejecuta onDismissed y eliminas el elemento de tu lista en setState. Si no lo haces, la lista todavía lo contiene y Flutter se detiene con un error: la fila que descartó todavía está en la lista.

key le indica a Flutter cuál es cada fila, así que debe ser diferente para cada una: ValueKey(item) usa el elemento mismo.

items es final, y aun así puedes eliminar elementos de esa lista: final significa que la variable siempre contiene la misma lista, no que la lista nunca cambie.

Desafío

Fácil

La barra de la aplicación cuenta los artículos. Permite deslizar la lista de compras: envuelve cada ListTile en un Dismissible con ValueKey(item) como clave y elimina el artículo de items cuando se desliza fuera de la lista.

Pruébalo tú mismo

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