Gérer la sélection d’une période de dates avec le TableCalendar
Sommaire
- 1- Objectif
- 2- Étapes de réalisation?
- 2.1- Importer les packages nécessaires :
- 2.2- Définir les variables et initialiser le TableCalendar :
- 2.3- Ajouter la logique de sélection de période :
- 2.4- Afficher les dates sélectionnées :
- 2.5- Voici le code complet avec les modifications apportées :
- 2.5.1- Cours Flutter
Gérer la sélection d’une période de dates avec le table_calendar
-
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?
-
Importer les packages nécessaires :
- Commencez par importer les packages suivants dans votre fichier :
-
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 :
-
Ajouter la logique de sélection de période :
- Mettez à jour la logique de sélection de période dans la fonction onRangeSelected :
- Cette mise à jour garantit que lorsqu’une période est sélectionnée, la sélection de jour unique est effacée.
-
Afficher les dates sélectionnées :
- Ajoutez le code suivant pour afficher les dates sélectionnées dans votre interface utilisateur :
- 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.
-
Voici le code complet avec les modifications apportées :
- 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.
import 'package:table_calendar/table_calendar.dart';
import 'package:flutter/material.dart';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
);
}onRangeSelected: (start, end, focusedDay) {
setState(() {
_rangeStart = start;
_rangeEnd = end;
_focusedDay = focusedDay;
_selectedDay = null; // Clear the single day selection
});
},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}'),
],
)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}'),
],
),
],
),
);
}
} 