Balayer pour supprimer

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

Dans une application de messagerie ou de shopping, vous supprimez un élément en le faisant glisser hors de l’écran. Encapsulez la ligne dans un Dismissible :

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

La ligne glisse sous votre doigt et disparaît. Une fois qu’elle a disparu, onDismissed s’exécute et vous supprimez l’élément de votre liste dans setState. Si vous ne le faites pas, la liste le contient toujours, et Flutter s’arrête avec une erreur : la ligne qu’il a supprimée est toujours dans la liste.

key indique à Flutter quelle ligne est laquelle ; elle doit donc être différente pour chaque ligne : ValueKey(item) utilise l’élément lui-même.

items est final, et vous pouvez tout de même en supprimer des éléments : final signifie que la variable contient toujours la même liste, et non que la liste ne change jamais.

Défi

Facile

La barre d’application compte les articles. Permets de faire glisser les éléments de la liste de courses : enveloppe chaque ListTile dans un Dismissible avec ValueKey(item) comme clé, et supprime l’élément de items lorsqu’il est balayé.

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)
            ListTile(title: Text(item)),
        ],
      ),
    );
  }
}