Eine Wischgeste rückgängig machen

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

Ein Wisch kann leicht versehentlich ausgeführt werden, deshalb bieten gute Apps eine Möglichkeit, dies rückgängig zu machen: eine SnackBar, die angibt, was entfernt wurde, mit einer Schaltfläche zum Rückgängigmachen. Eine SnackBarAction ist diese Schaltfläche:

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

Damit das Element wieder an seine ursprüngliche Stelle kommt, merke dir vor dem Entfernen seinen Platz. items.indexOf(item) ist seine Position, items.removeAt(index) entfernt es, und items.insert(index, item) fügt es an derselben Position wieder ein.

items.add(item) würde es ebenfalls zurückbringen, aber ans Ende der Liste.

Aufgabe

Mittel

Wenn ein Element weggewischt wird, zeige eine SnackBar mit der Meldung Milk removed (mit dem Namen des Elements) und einer Aktion Undo an, die das Element an dieselbe Stelle zurücksetzt.

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)
            Dismissible(
              key: ValueKey(item),
              onDismissed: (direction) {
                setState(() {
                  items.remove(item);
                });
              },
              child: ListTile(title: Text(item)),
            ),
        ],
      ),
    );
  }
}