Annullare uno scorrimento

Fa parte della sezione Elenchi e schermate del percorso Flutter di Coddy. Lezione 27 di 33.

È facile scorrere per errore, quindi le buone app offrono un modo per annullare l’azione: una SnackBar che indica cosa è stato rimosso, con un pulsante Annulla. Una SnackBarAction è proprio quel pulsante:

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

Per rimettere l’elemento al suo posto, ricordati la sua posizione prima di rimuoverlo. items.indexOf(item) è la sua posizione, items.removeAt(index) lo rimuove e items.insert(index, item) lo rimette nella stessa posizione.

Anche items.add(item) lo rimetterebbe, ma alla fine dell’elenco.

Sfida

Medio

Quando un elemento viene eliminato con uno scorrimento, mostra una SnackBar con il messaggio Milk removed (con il nome dell'elemento) e un'azione Undo che rimette l'elemento nello stesso posto.

Provalo tu

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