Liste de tâches : Ajouter une tâche

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

Une liste de tâches à laquelle on ne peut rien ajouter est une affiche. Place un champ et un bouton d’ajout rond au-dessus de la liste, dans une Row.

Le champ reçoit un TextEditingController, afin que le bouton d’ajout puisse lire le texte saisi. L’ajout se fait en deux étapes : ajoute une nouvelle Task à la liste dans setState, afin que la liste soit redessinée, puis efface le champ pour la prochaine tâche :

void _addTask() {
  setState(() {
    _tasks.add(Task(_controller.text));
  });
  _controller.clear();
}

La liste partage maintenant l’écran avec le champ. Un ListView dans une Column doit être entouré d’un Expanded, afin qu’il occupe l’espace restant au lieu de demander tout l’espace disponible.

IconButton.filled est un IconButton sur un cercle plein de la couleur du thème, comme l’apparence d’une action principale dans Material 3.

Défi

Moyen

Ajoutez des tâches à partir d’un champ :

ajoutez à l’état un TextEditingController nommé _controller (et libérez-le)
faites du body une Column : d’abord une Row avec un padding de 16 pixels, contenant un TextField Expanded portant l’étiquette New task et un IconButton.filled avec Icons.add, puis la liste dans un Expanded
un appui sur le bouton ajoute la tâche saisie à la fin de la liste et vide le champ

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')];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('My Tasks')),
      body: ListView.builder(
        itemCount: _tasks.length,
        itemBuilder: (context, index) {
          final task = _tasks[index];
          return ListTile(
            title: Text(task.title),
          );
        },
      ),
    );
  }
}