Zum Löschen wischen

Teil des Abschnitts Listen und Bildschirme der Flutter-Journey von Coddy. Lektion 26 von 33.

In einer Mail- oder Shopping-App entfernst du ein Element, indem du es vom Bildschirm wischst. Umschließe die Zeile mit einem Dismissible:

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

Die Zeile gleitet unter deinem Finger weg. Sobald sie verschwunden ist, wird onDismissed ausgeführt, und du entfernst das Element mit setState aus deiner Liste. Wenn du das nicht tust, ist es weiterhin in der Liste, und Flutter bricht mit einem Fehler ab: Die Zeile, die es entfernt hat, ist noch in der Liste.

Der key teilt Flutter mit, welche Zeile welche ist. Deshalb muss er für jede Zeile unterschiedlich sein: ValueKey(item) verwendet das Element selbst.

items ist final, und du kannst trotzdem Elemente daraus entfernen: final bedeutet, dass die Variable immer dieselbe Liste enthält, nicht, dass sich die Liste niemals ändert.

Aufgabe

Einfach

Die App-Leiste zählt die Elemente. Gestalte die Einkaufsliste durch Wischen bedienbar: Umschließe jedes ListTile mit einem Dismissible, dessen Schlüssel ValueKey(item) ist, und entferne das Element aus items, wenn es weggewischt wird.

Probier es selbst

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