Les composants de style du table_calendar en Flutter
Sommaire
- 1- Objectif
- 2- Définitions?
- 3- Activités
- 4- Exercices
- 4.1- Changer les Couleurs des Week-ends
- 4.2- Personnaliser l'Apparence des Jours Sélectionnés
- 4.3- Modifier le Style de l'En-tête
- 4.4- Ajouter des Événements et les Styliser
- 4.5- Changer le début de la semaine
- 4.6- Ajouter des jours fériés (optionnel)
- 4.7- Supprimer l'option de deux semaines
- 4.7.1- Cours Flutter
Les composants de style du table_calendar en Flutter
-
Objectif
- Comprendre les composants de style du TableCalendar.
- Apprendre à personnaliser l’apparence du TableCalendar en utilisant les propriétés disponibles.
- Appliquer des styles spécifiques pour les jours, les week-ends, les jours sélectionnés et les jours avec des événements.
- Créer un thème cohérent pour le calendrier en utilisant les options de personnalisation.
-
Définitions?
- TableCalendar : Un widget Flutter qui affiche un calendrier hautement personnalisable avec des options pour afficher des événements, sélectionner des jours, et bien plus.
- CalendarStyle : Une classe qui contient les styles pour les cellules de jours dans le TableCalendar.
- DaysOfWeekStyle : Une classe qui contient les styles pour les noms des jours de la semaine.
- HeaderStyle : Une classe qui contient les styles pour l’en-tête du calendrier, incluant le mois et l’année.
-
Activités
- Installation et Configuration Initiale
- Créez un nouveau projet Flutter et ajoutez le package table_calendar dans votre fichier pubspec.yaml :
- Ensuite, installez les dépendances :
- Créez un fichier main.dart avec le code de base suivant pour afficher un calendrier simple :
- Personnalisation de Base du Calendrier
- Personnalisez les styles de base du calendrier en utilisant les classes CalendarStyle, DaysOfWeekStyle et HeaderStyle.
-
Exercices
-
Changer les Couleurs des Week-ends
- Objectif : Modifier les couleurs des textes des jours de week-end.
- Activité : Utilisez la propriété weekendTextStyle dans CalendarStyle pour changer la couleur des jours de week-end en rouge.
-
Personnaliser l’Apparence des Jours Sélectionnés
- Objectif : Personnaliser la décoration des jours sélectionnés.
- Activité : Utilisez la propriété selectedDecoration dans CalendarStyle pour définir une décoration spécifique aux jours sélectionnés.
-
Modifier le Style de l’En-tête
- Objectif : Personnaliser l’en-tête du calendrier.
- Activité : Utilisez HeaderStyle pour centrer le titre de l’en-tête et changer les icônes des chevrons.
-
Ajouter des Événements et les Styliser
- Objectif : Ajouter des événements au calendrier et personnaliser leur apparence.
- Activité : Utilisez eventLoader pour charger les événements et CalendarStyle pour styliser les jours avec des événements.
-
Changer le début de la semaine
- Objectif : Configurer le calendrier pour qu’il commence la semaine par lundi.
- Activité : Utiliser la propriété startingDayOfWeek pour définir le début de la semaine.
-
Ajouter des jours fériés (optionnel)
- Objectif : Définir des styles spécifiques pour les jours fériés si nécessaire.
- Activité : Utiliser la propriété holidayStyle dans CalendarStyle pour définir les styles des jours fériés.
-
Supprimer l’option de deux semaines
- Objectif : Configurer les formats disponibles pour le calendrier en excluant l’option de deux semaines.
- Activité : Utiliser la propriété availableCalendarFormats pour définir les formats disponibles.
dependencies:
flutter:
sdk: flutter
table_calendar: ^3.0.6 # Vérifiez la dernière version sur pub.devflutter pub get
import 'package:flutter/material.dart'; import 'package:table_calendar/table_calendar.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Calendar Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: CalendarPage(), ); } } class CalendarPage extends StatefulWidget { @override _CalendarPageState createState() => _CalendarPageState(); } class _CalendarPageState extends State{ CalendarFormat _calendarFormat = CalendarFormat.month; DateTime _focusedDay = DateTime.now(); DateTime? _selectedDay; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Table Calendar Example'), ), body: TableCalendar( firstDay: DateTime.utc(2020, 1, 1), lastDay: DateTime.utc(2030, 12, 31), focusedDay: _focusedDay, calendarFormat: _calendarFormat, selectedDayPredicate: (day) { return isSameDay(_selectedDay, day); }, onDaySelected: (selectedDay, focusedDay) { setState(() { _selectedDay = selectedDay; _focusedDay = focusedDay; }); }, onFormatChanged: (format) { if (_calendarFormat != format) { setState(() { _calendarFormat = format; }); } }, onPageChanged: (focusedDay) { _focusedDay = focusedDay; }, ), ); } }
class _CalendarPageState extends State{ CalendarFormat _calendarFormat = CalendarFormat.month; DateTime _focusedDay = DateTime.now(); DateTime? _selectedDay; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Table Calendar Example'), ), body: TableCalendar( firstDay: DateTime.utc(2020, 1, 1), lastDay: DateTime.utc(2030, 12, 31), focusedDay: _focusedDay, calendarFormat: _calendarFormat, selectedDayPredicate: (day) { return isSameDay(_selectedDay, day); }, onDaySelected: (selectedDay, focusedDay) { setState(() { _selectedDay = selectedDay; _focusedDay = focusedDay; }); }, onFormatChanged: (format) { if (_calendarFormat != format) { setState(() { _calendarFormat = format; }); } }, onPageChanged: (focusedDay) { _focusedDay = focusedDay; }, startingDayOfWeek: StartingDayOfWeek.monday, // Début de la semaine fixé à lundi calendarStyle: CalendarStyle( todayDecoration: BoxDecoration( color: Colors.orange, shape: BoxShape.circle, ), selectedDecoration: BoxDecoration( color: Colors.blue, shape: BoxShape.circle, ), weekendTextStyle: TextStyle(color: Colors.red), ), daysOfWeekStyle: DaysOfWeekStyle( weekdayStyle: TextStyle(color: Colors.blue), weekendStyle: TextStyle(color: Colors.red), ), headerStyle: HeaderStyle( formatButtonVisible: false, titleCentered: true, leftChevronIcon: Icon(Icons.chevron_left, color: Colors.blue), rightChevronIcon: Icon(Icons.chevron_right, color: Colors.blue), ), ), ); } }
weekendTextStyle: TextStyle(color: Colors.red),selectedDecoration: BoxDecoration(
color: Colors.green,
shape: BoxShape.circle,
),headerStyle: HeaderStyle(
formatButtonVisible: false,
titleCentered: true,
leftChevronIcon: Icon(Icons.chevron_left, color: Colors.blue),
rightChevronIcon: Icon(Icons.chevron_right, color: Colors.blue),
),final Map> _events = {
DateTime.utc(2022, 7, 7): [Event('Event 1')],
DateTime.utc(2022, 7, 8): [Event('Event 2')],
};
eventLoader: (day) {
return _events[day] ?? [];
},
calendarStyle: CalendarStyle(
markersMaxCount: 1,
markerDecoration: BoxDecoration(
color: Colors.blue,
shape: BoxShape.circle,
),
), startingDayOfWeek: StartingDayOfWeek.monday, // Début de la semaine fixé à lundi
calendarStyle: CalendarStyle(
holidayTextStyle: TextStyle(color: Colors.purple), // Style pour les jours fériés
),
headerStyle: const HeaderStyle(
formatButtonVisible: false,
titleCentered: true,
leftChevronIcon: Icon(Icons.chevron_left, color: Colors.blue),
rightChevronIcon: Icon(Icons.chevron_right, color: Colors.blue),
),