Implementar deslizar para descartar

El patrón "deslizar para descartar" es común en muchas aplicaciones móviles. Por ejemplo, al escribir una aplicación de correo electrónico, es posible que desees permitir que el usuario deslice los mensajes de correo electrónico para eliminarlos de una lista.

Flutter facilita esta tarea proporcionando el Widget Dismissible. Aprende cómo implementar deslizar para descartar con los siguientes pasos:

1. Crear una lista de elementos.
2. Envuelve cada elemento en un Widget Dismissible.
3. Proporcionar indicadores "dejar atrás".

Primero, crea una lista de elementos. Para obtener instrucciones detalladas sobre cómo crear una lista, sigue la receta de Trabajar con listas largas.

En este ejemplo, necesitas 20 elementos de muestra con los que trabajar. Para mantenerlo simple, genera una lista de cadenas de texto (strings).

final items = List<String>.generate(20, (i) => 'Item ${i + 1}');

Muestra cada elemento de la lista en la pantalla. Los usuarios aún no podrán deslizar estos elementos para descartarlos.

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(title: Text(items[index]));
  },
)

En este paso, brinda a los usuarios la capacidad de deslizar un elemento fuera de la lista utilizando el Widget Dismissible.

Después de que el usuario haya deslizado el elemento para descartarlo, elimínalo de la lista y muestra un snackbar. En una aplicación real, es posible que debas realizar una lógica más compleja, como eliminar el elemento de un servicio web o una base de datos.

Actualiza la función itemBuilder() para que devuelva un Widget Dismissible:

itemBuilder: (context, index) {
  final item = items[index];
  return Dismissible(
    // Each Dismissible must contain a Key. Keys allow Flutter to
    // uniquely identify widgets.
    key: Key(item),
    // Provide a function that tells the app
    // what to do after an item has been swiped away.
    onDismissed: (direction) {
      // Remove the item from the data source.
      setState(() {
        items.removeAt(index);
      });
​
      // Then show a snackbar.
      ScaffoldMessenger.of(
        context,
      ).showSnackBar(SnackBar(content: Text('$item dismissed')));
    },
    child: ListTile(title: Text(item)),
  );
},

Tal como está, la aplicación permite a los usuarios deslizar elementos fuera de la lista, pero no proporciona una indicación visual de lo que sucede al hacerlo. Para proporcionar una señal de que los elementos se eliminan, muestra un indicador "dejar atrás" a medida que deslizan el elemento fuera de la pantalla. En este caso, el indicador es un fondo rojo.

Para añadir el indicador, proporciona un parámetro background al Widget Dismissible.

  ScaffoldMessenger.of(context)
      .showSnackBar(SnackBar(content: Text('$item dismissed')));
},
// Show a red background as the item is swiped away.
background: Container(color: Colors.red),
child: ListTile(
  title: Text(item),
),