Usare Dismissible in Flutter

Il componente Dismissible di Flutter è quello che ci consente di usare lo swipe su un elemento di una lista per poi eseguire un'azione.

Ad esempio la cancellazione.

Di default la riga viene eliminata dalla vista, ma rimane comunque nei dati.

Nel senso che la cancellazione vera e proprio è a carico vostro (ad esempio la chiamata ad una API o la cancellazione dal db).

Detto ciò, non vi ripropongo tutto il codice che potete trovare in questo articolo.

Qui vediamo come aggiungere il componente Dismissible al componente che funge da riga in una Listview:

import 'package:book_flutter/models/book.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import '../screens/book_screen.dart';

class BookItem extends StatelessWidget {
  const BookItem({super.key});

  @override
  Widget build(BuildContext context) {
    final book = Provider.of<Book>(context, listen: false);

    return Dismissible(
      key: UniqueKey(),
      background: Container(
        color: Colors.redAccent,
        alignment: Alignment.centerRight,
        padding: const EdgeInsets.only(right: 6),
        child: const Icon(
          Icons.delete,
          color: Colors.white,
          size: 40,
        ),
      ),
      // direction: DismissDirection.endToStart,
      onDismissed: (direction) {
        if (direction == DismissDirection.endToStart) {
          print('CANCELLA');
          print(book.id);
        }

        if (direction == DismissDirection.startToEnd) {
          print('ALTRA AZIONE');
        }
      },
      child: Column(
        children: [
          ListTile(
            shape: RoundedRectangleBorder(
              side: BorderSide(
                color: Theme.of(context).primaryColor,
                width: 1,
              ),
              borderRadius: BorderRadius.circular(5),
            ),
            leading: CircleAvatar(
              radius: 20,
              child: Padding(
                padding: const EdgeInsets.all(6),
                child: FittedBox(
                  child: Text(
                    '€ ${book.price}',
                    style: Theme.of(context).textTheme.bodyText1,
                  ),
                ),
              ),
            ),
            title: Text(
              (book.title ?? ""),
              style: Theme.of(context).textTheme.bodyText1,
            ),
            subtitle: Text(book.author ?? ""),
            trailing: Wrap(
              spacing: 10,
              children: <Widget>[
                IconButton(
                  icon: const Icon(Icons.remove_red_eye),
                  color: Colors.purple,
                  onPressed: () => {
                    Navigator.of(context).pushNamed(
                      BookScreen.routeName,
                      arguments: book.id,
                    )
                  },
                ),
                IconButton(
                  icon: const Icon(Icons.delete),
                  color: Theme.of(context).errorColor,
                  onPressed: () => {},
                ),
              ],
            ),
          ),
          const SizedBox(
            height: 5,
          ),
        ],
      ),
    );
  }
}

Nell'evento onDismissed controlliamo in quale direzione va lo swipe; potreste ad esempio fare la cancellazione da un lato, e l'archiviazione dall'altro.

Se volete potete anche impostare che lo swipe possa andare in una sola direzione; basta che levate il commento a questa riga e scegliete la direzione:

direction: DismissDirection.endToStart,

Enjoy!