To-do-Liste: Verbleibende Aufgaben

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

Ein Blick auf den Bildschirm sollte dir zeigen, wie viel noch zu tun ist. Die Antwort ist die Anzahl der nicht erledigten Aufgaben, und du kannst sie jedes Mal aus der Liste ermitteln, wenn der Bildschirm aufgebaut wird.

Ein Getter ist der richtige Ort dafür. Er liest sich wie ein Feld, führt aber seinen Code jedes Mal aus, wenn du ihn verwendest, sodass er immer auf dem neuesten Stand ist:

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

Es gibt keine zusätzliche Variable, die du auf dem neuesten Stand halten musst, und auch kein eigenes setState: Wenn du eine Aufgabe abhäkst, wird bereits setState aufgerufen, der Bildschirm wird neu aufgebaut und der Getter zählt erneut.

Ein Detail sorgt dafür, dass es klingt, als hätte es ein Mensch geschrieben: „1 Aufgabe übrig“ statt „1 Aufgaben übrig“. Eine Bedingung wählt die passenden Wörter aus.

Aufgabe

Mittel

Zeige an, wie viele noch übrig sind:

Füge einen Getter _left hinzu, der die noch nicht erledigten Aufgaben zählt
Zeige zwischen dem Eingabefeld und der Liste in einem Text etwas wie 3 tasks left an, in einer Row mit 16 Pixeln Abstand an den Seiten und 8 Pixeln oben und unten
Sage bei genau einer Aufgabe 1 task left

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();

  void _addTask() {
    setState(() {
      _tasks.add(Task(_controller.text));
    });
    _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),
                ),
              ],
            ),
          ),
          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,
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}