Liste de tâches : La liste des tâches

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

Cette section présente quatre applications, construites fonctionnalité par fonctionnalité. Tu connais déjà chaque élément ; maintenant, tu les assembles comme on crée de vraies applications.

La première application est une liste de tâches. À la fin de ce chapitre, tu sauras ajouter des tâches, les cocher comme terminées, les balayer pour les supprimer, annuler une suppression et filtrer ce que tu vois.

Chaque application commence par ses données. Pour l’instant, une tâche est un titre ; une petite classe le contient donc, et l’écran conserve une liste de tâches dans son State :

class Task {
  Task(this.title);

  final String title;
}

final List<Task> _tasks = [Task('Buy milk')];

ListView.builder transforme cette liste en lignes à l’écran. Il appelle itemBuilder une fois pour chaque index jusqu’à itemCount, et chaque appel renvoie un ListTile.

Défi

Facile

Afficher les tâches :

écris une classe Task avec un final String title et un constructeur Task(this.title)
dans _TodoScreenState, crée une liste _tasks de trois tâches : Buy milk, Walk the dog et Read a book
remplace le Center dans body: par un ListView.builder qui affiche le titre de chaque tâche dans un ListTile

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

// Écrivez la classe Task ici.

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

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

class _TodoScreenState extends State<TodoScreen> {
  // Créez la liste des tâches ici.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('My Tasks')),
      body: const Center(
        child: Text('Your tasks go here'),
      ),
    );
  }
}