To-do-Liste: Als erledigt markieren

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

Eine Aufgabe muss sich merken, ob sie erledigt ist. Gib der Klasse ein zweites Feld, das mit false beginnt und geändert werden kann, also nicht final ist:

class Task {
  Task(this.title);

  final String title;
  bool done = false;
}

Jede Zeile erhält ein Checkbox-Widget als leading:. Sein value ist das done der Aufgabe, und sein onChanged setzt done innerhalb von setState.

Eine erledigte Aufgabe sollte auch erledigt aussehen. TextDecoration.lineThrough zeichnet eine Linie durch den Text, und eine graue Farbe lässt ihn in den Hintergrund treten. Wenn die Aufgabe nicht erledigt ist, lautet der Stil null und der Text behält das Aussehen des Themes bei:

style: task.done
    ? const TextStyle(decoration: TextDecoration.lineThrough, color: Colors.grey)
    : null,

Aufgabe

Mittel

Erledigte Aufgaben abhaken:

bool done = false; zu Task hinzufügen
jedem ListTile eine leading:-Checkbox geben, die done der Aufgabe anzeigt und ändert
wenn eine Aufgabe erledigt ist, ihren Titel durchstreichen und ihn zu Colors.grey machen

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;
}

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