Liste de tâches : Tâches restantes

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

Un coup d’œil à l’écran devrait vous indiquer combien il reste à faire. La réponse est le nombre de tâches qui ne sont pas terminées, et vous pouvez le calculer à partir de la liste chaque fois que l’écran est construit.

Un getter est l’endroit idéal pour cela. Il se lit comme un champ, mais exécute son code chaque fois que vous l’utilisez : sa valeur est donc toujours à jour.

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

Pas besoin d’une variable supplémentaire à maintenir à jour ni d’un setState dédié : cocher une tâche appelle déjà setState, l’écran est reconstruit et le getter effectue à nouveau le décompte.

Un détail donne à l’interface un ton plus naturel : « 1 tâche restante », et non « 1 tâches restantes ». Une condition permet de choisir la bonne formulation.

Défi

Moyen

Affichez le nombre de tâches restantes :

ajoutez un getter _left qui compte les tâches qui ne sont pas terminées
entre le champ et la liste, affichez ce nombre dans un widget Text, par exemple 3 tasks left, dans un widget Row avec une marge intérieure de 16 pixels sur les côtés et de 8 en haut et en bas
pour exactement une tâche, affichez 1 task left

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