Gérer la sélection d'une période de dates avec le TableCalendar

Objectif

• Apprendre à importer et initialiser le TableCalendar dans une application Flutter.
• Comprendre comment gérer la sélection d'une période de dates avec le TableCalendar.
• Savoir afficher les dates de début et de fin de la période sélectionnée.

Étapes de réalisation?

1. Importer les packages nécessaires :

   • Commencez par importer les packages suivants dans votre fichier :

     import 'package:table_calendar/table_calendar.dart';
     import 'package:flutter/material.dart';

2. Définir les variables et initialiser le TableCalendar :

   • Ajoutez les variables nécessaires pour la gestion de la sélection de période dans votre classe :

     DateTime _focusedDay = DateTime.now();
     DateTime? _selectedDay;
     DateTime? _rangeStart;
     DateTime? _rangeEnd;
     
     Widget build(BuildContext context) {
       return TableCalendar(
         focusedDay: _focusedDay,
         firstDay: DateTime.utc(2023, 01, 01),
         lastDay: DateTime.utc(2024, 12, 31),
         calendarFormat: CalendarFormat.month,
         selectedDayPredicate: (day) {
           // Use `selectedDayPredicate` to determine which day is currently selected.
           // If this returns true, then `day` will be marked as selected.
     
           // Using `isSameDay` is recommended to disregard
           // the time-part of compared DateTime objects.
           return isSameDay(_selectedDay, day);
         },
         onDaySelected: (selectedDay, focusedDay) {
           if (!isSameDay(_selectedDay, selectedDay)) {
             // Call `setState()` when updating the selected day
             setState(() {
               _selectedDay = selectedDay;
               _focusedDay = focusedDay;
             });
           }
         },
         onRangeSelected: (start, end, focusedDay) {
           setState(() {
             _rangeStart = start;
             _rangeEnd = end;
             _focusedDay = focusedDay;
           });
         },
         // ... other TableCalendar customizations
       );
     }

3. Ajouter la logique de sélection de période :

   • Mettez à jour la logique de sélection de période dans la fonction onRangeSelected :

     onRangeSelected: (start, end, focusedDay) {
       setState(() {
         _rangeStart = start;
         _rangeEnd = end;
         _focusedDay = focusedDay;
         _selectedDay = null; // Clear the single day selection
       });
     },

   • Cette mise à jour garantit que lorsqu'une période est sélectionnée, la sélection de jour unique est effacée.

4. Afficher les dates sélectionnées :

   • Ajoutez le code suivant pour afficher les dates sélectionnées dans votre interface utilisateur :

     Row(
       mainAxisAlignment: MainAxisAlignment.center,
       children: [
         if (_rangeStart != null)
           Text('Date de début : ${_rangeStart!.day}/${_rangeStart!.month}/${_rangeStart!.year}'),
         if (_rangeEnd != null)
           Text('Date de fin : ${_rangeEnd!.day}/${_rangeEnd!.month}/${_rangeEnd!.year}'),
       ],
     )

   • Cela ajoutera un widget Row affichant les dates de début et de fin de la période sélectionnée, s'il y en a.

5. Voici le code complet avec les modifications apportées :

   import 'package:table_calendar/table_calendar.dart';
   import 'package:flutter/material.dart';
   
   class MyHomePage extends StatefulWidget {
     @override
     _MyHomePageState createState() => _MyHomePageState();
   }
   
   class _MyHomePageState extends State {
     DateTime _focusedDay = DateTime.now();
     DateTime? _selectedDay;
     DateTime? _rangeStart;
     DateTime? _rangeEnd;
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text('TableCalendar Example'),
         ),
         body: Column(
           children: [
             TableCalendar(
               focusedDay: _focusedDay,
               firstDay: DateTime.utc(2023, 01, 01),
               lastDay: DateTime.utc(2024, 12, 31),
               calendarFormat: CalendarFormat.month,
               selectedDayPredicate: (day) {
                 return isSameDay(_selectedDay, day);
               },
               onDaySelected: (selectedDay, focusedDay) {
                 if (!isSameDay(_selectedDay, selectedDay)) {
                   setState(() {
                     _selectedDay = selectedDay;
                     _focusedDay = focusedDay;
                     _rangeStart = null; // Clear the range selection
                     _rangeEnd = null;
                   });
                 }
               },
               onRangeSelected: (start, end, focusedDay) {
                 setState(() {
                   _rangeStart = start;
                   _rangeEnd = end;
                   _focusedDay = focusedDay;
                   _selectedDay = null; // Clear the single day selection
                 });
               },
             ),
             SizedBox(height: 16),
             Row(
               mainAxisAlignment: MainAxisAlignment.center,
               children: [
                 if (_rangeStart != null)
                   Text('Date de début : ${_rangeStart!.day}/${_rangeStart!.month}/${_rangeStart!.year}'),
                 if (_rangeEnd != null)
                   Text('Date de fin : ${_rangeEnd!.day}/${_rangeEnd!.month}/${_rangeEnd!.year}'),
               ],
             ),
           ],
         ),
       );
     }
   }

   • Ce code ajoute la fonctionnalité de sélection de période de dates au TableCalendar. Lorsque l'utilisateur sélectionne une période, les dates de début et de fin sont affichées dans une ligne en dessous du calendrier.