Liste de tâches : La marquer comme terminée

Fait partie de la section Projets du Journey Flutter de Coddy. Leçon 3 sur 36.

Une tâche doit mémoriser si elle est terminée. Ajoute à la classe un deuxième champ qui commence à false et qui peut changer, afin qu’il ne soit pas final :

class Task {
  Task(this.title);

  final String title;
  bool done = false;
}

Chaque ligne reçoit une Checkbox comme widget leading:. Sa value correspond à done de la tâche, et son onChanged modifie done à l’intérieur de setState.

Une tâche terminée doit avoir l’air terminée. TextDecoration.lineThrough barre le texte, et une couleur grise le rend moins visible. Lorsque la tâche n’est pas terminée, le style est null et le texte conserve l’apparence du thème :

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

Défi

Moyen

Coche les tâches terminées :

ajoute bool done = false; à Task
ajoute à chaque ListTile une Checkbox en position leading: qui affiche et modifie l'état done de la tâche
lorsqu'une tâche est terminée, barre son titre et applique-lui la couleur Colors.grey

Essayez vous-même

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