Annuler un balayage

Fait partie de la section Listes et écrans du Journey Flutter de Coddy. Leçon 27 sur 33.

Un balayage est facile à effectuer par accident, alors les bonnes applications offrent un moyen de revenir en arrière : une SnackBar qui indique ce qui a été supprimé, avec un bouton d’annulation. Une SnackBarAction est ce bouton :

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

Pour remettre l’élément à sa place, mémorise son emplacement avant de le supprimer. items.indexOf(item) correspond à sa position, items.removeAt(index) le supprime et items.insert(index, item) le remet à cette même position.

items.add(item) le rétablirait aussi, mais à la fin de la liste.

Défi

Moyen

Lorsqu’un élément est balayé pour le supprimer, affiche une SnackBar indiquant Milk removed (avec le nom de l’élément) et une action Undo qui remet l’élément à sa place.

Essayez vous-même

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