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 :

  dependencies:
    flutter:
      sdk: flutter
    table_calendar: ^3.0.6  # Vérifiez la dernière version sur pub.dev

• Ensuite, installez les dépendances :

  flutter pub get

• Créez un fichier main.dart avec le code de base suivant pour afficher un calendrier simple :

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

• Personnalisation de Base du Calendrier
• Personnalisez les styles de base du calendrier en utilisant les classes CalendarStyle, DaysOfWeekStyle et HeaderStyle.

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

Exercices

1. 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.

     weekendTextStyle: TextStyle(color: Colors.red),

2. 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.

     selectedDecoration: BoxDecoration(
       color: Colors.green,
       shape: BoxShape.circle,
     ),

3. 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.

     headerStyle: HeaderStyle(
       formatButtonVisible: false,
       titleCentered: true,
       leftChevronIcon: Icon(Icons.chevron_left, color: Colors.blue),
       rightChevronIcon: Icon(Icons.chevron_right, color: Colors.blue),
     ),

4. 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.

     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,
       ),
     ),

5. 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.

     startingDayOfWeek: StartingDayOfWeek.monday, // Début de la semaine fixé à lundi
     

6. 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.

     calendarStyle: CalendarStyle(
       holidayTextStyle: TextStyle(color: Colors.purple), // Style pour les jours fériés
     ),
     

7. 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.
     

     headerStyle: const HeaderStyle(
               formatButtonVisible: false,
               titleCentered: true,
               leftChevronIcon: Icon(Icons.chevron_left, color: Colors.blue),
               rightChevronIcon: Icon(Icons.chevron_right, color: Colors.blue),
             ),