To-do-Liste: Zum Löschen wischen

Teil des Abschnitts Projekte der Flutter-Journey von Coddy. Lektion 6 von 36.

Auf einem Smartphone entfernst du eine erledigte Aufgabe, indem du sie wegwischst. Umschließe jede Zeile mit einem Dismissible, und Flutter übernimmt das Verschieben für dich:

Dismissible(
  key: ObjectKey(task),
  direction: DismissDirection.endToStart,
  background: Container(color: Colors.red, ...),
  onDismissed: (direction) => _deleteTask(task),
  child: ListTile(...),
)

Der key teilt Flutter mit, welche Zeile welche ist, damit die richtige herausgeschoben wird. ObjectKey(task) verknüpft sie mit der Aufgabe selbst. endToStart bedeutet, dass du nach links wischst, und background ist das, was hinter der Zeile sichtbar wird, während sie herausgeschoben wird: rot mit einem Löschsymbol auf der rechten Seite.

onDismissed wird ausgeführt, wenn die Zeile vom Bildschirm verschwunden ist. Deine Aufgabe ist es, die Aufgabe dort innerhalb von setState aus der Liste zu entfernen. Entferne die Aufgabe selbst, nicht eine Position, damit die richtige entfernt wird, auch wenn sich die Liste später ändert.

Aufgabe

Mittel

Streiche Aufgaben weg:

Füge eine _deleteTask(Task task)-Methode hinzu, die die Aufgabe innerhalb von setState entfernt
Umschließe jedes ListTile mit einem Dismissible mit key: ObjectKey(task), das nach links gewischt wird
Sein background ist ein roter Container mit einem weißen Icons.delete auf der rechten Seite, 24 Pixel vom Rand entfernt

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 MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.teal),
      ),
      home: const TodoScreen(),
    );
  }
}

class Task {
  Task(this.title);

  final String title;
  bool done = false;
}

class TodoScreen extends StatefulWidget {
  const TodoScreen({super.key});

  @override
  State<TodoScreen> createState() => _TodoScreenState();
}

class _TodoScreenState extends State<TodoScreen> {
  final List<Task> _tasks = [Task('Buy milk'), Task('Walk the dog'), Task('Read a book')];
  final _controller = TextEditingController();

  int get _left => _tasks.where((task) => !task.done).length;

  void _addTask() {
    final title = _controller.text.trim();
    if (title.isEmpty) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('Type a task first')),
      );
      return;
    }
    setState(() {
      _tasks.add(Task(title));
    });
    _controller.clear();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('My Tasks')),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.fromLTRB(16, 16, 16, 8),
            child: Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _controller,
                    decoration: const InputDecoration(
                      labelText: 'New task',
                      border: OutlineInputBorder(),
                    ),
                  ),
                ),
                const SizedBox(width: 8),
                IconButton.filled(
                  onPressed: _addTask,
                  icon: const Icon(Icons.add),
                ),
              ],
            ),
          ),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
            child: Row(
              children: [
                Text(
                  _left == 1 ? '1 task left' : '$_left tasks left',
                  style: Theme.of(context).textTheme.titleSmall,
                ),
              ],
            ),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: _tasks.length,
              itemBuilder: (context, index) {
                final task = _tasks[index];
                return ListTile(
                  leading: Checkbox(
                    value: task.done,
                    onChanged: (value) {
                      setState(() {
                        task.done = value!;
                      });
                    },
                  ),
                  title: Text(
                    task.title,
                    style: task.done
                        ? const TextStyle(
                            decoration: TextDecoration.lineThrough,
                            color: Colors.grey,
                          )
                        : null,
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}