Le package table_calendar en Flutter
Le package table_calendar en Flutter
-
Objectif
- Installer et configurer le package table_calendar dans un projet Flutter.
- Intégrer un calendrier de base dans l’application Flutter.
- Personnaliser le style et l’apparence du calendrier.
- Ajouter, afficher et gérer des événements dans le calendrier
-
Qu’est-ce que le package
table_calendar? - Le package table_calendar est un package Flutter qui fournit un widget de calendrier hautement personnalisable et riche en fonctionnalités. Il est facile à utiliser et offre une interface utilisateur prête à l’emploi avec des options de style personnalisables. Le package prend également en charge des générateurs de sélecteurs personnalisés pour une conception d’interface utilisateur sans limites, la prise en charge des paramètres régionaux, la sélection de plages, la sélection multiple, les événements et jours fériés dynamiques, le dimensionnement vertical automatique, ainsi que plusieurs formats de calendrier (mois, deux semaines, semaine).
- En termes simples, le package table_calendar est un excellent moyen d’ajouter un calendrier à votre application Flutter. Il est facile à intégrer et offre une multitude de fonctionnalités et d’options de personnalisation.
-
Fonctionnalités du package
table_calendar - Interface utilisateur personnalisable : Offrez un style unique à votre calendrier pour l’adapter à votre application.
- Prise en charge des paramètres régionaux : Localisez votre calendrier pour différents paramètres régionaux et langues.
- Sélection de plages et sélection multiple : Permettez aux utilisateurs de sélectionner des plages de dates ou plusieurs dates.
- Événements dynamiques et jours fériés : Affichez les événements et jours fériés spécifiques à chaque date.
- Formats de calendrier multiples : Affichez le calendrier en mode mois, deux semaines ou semaine.
- Dimensionnement automatique vertical : Ajustez automatiquement la taille verticale du calendrier en fonction du contenu.
-
Exemples d’utilisation du package
table_calendar - Voici quelques exemples de la façon dont vous pouvez utiliser le package table_calendar dans votre application Flutter :
- Calendrier des événements à venir : Affichez un calendrier des rendez-vous, réunions et engagements sociaux.
- Calendrier des événements pertinents : Montrez des événements à venir pertinents pour le contenu ou l’objectif de votre application, comme les actualités ou les événements sur les réseaux sociaux.
- Suivi des progrès : Utilisez un calendrier pour suivre les progrès des utilisateurs vers un objectif, tel qu’un objectif de remise en forme ou d’apprentissage.
- Sélection des dates pour les rendez-vous ou réservations : Permettez aux utilisateurs de sélectionner les dates et heures des rendez-vous ou des réservations.
-
Exemple d’intégration de table_calendar dans une application Flutter
- Voici un guide rapide pour intégrer et utiliser le package table_calendar dans une application Flutter :
- Ajouter table_calendar comme dépendance :
- Dans le fichier pubspec.yaml :
- Importer le package :
- Dans votre fichier Dart principal, importez table_calendar :
- Créer une page avec un calendrier :
- Ajouter des événements :
- Pour ajouter des événements au calendrier, vous pouvez utiliser un Map<DateTime, List<Event>> :
dependencies:
flutter:
sdk: flutter
table_calendar: ^3.0.6 # Assurez-vous d'utiliser la dernière version disponibleimport '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<CalendarPage> { 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 Event {
final String title;
Event(this.title);
}
class _CalendarPageState extends State<CalendarPage> {
late final ValueNotifier<List<Event>> _selectedEvents;
CalendarFormat _calendarFormat = CalendarFormat.month;
DateTime _focusedDay = DateTime.now();
DateTime? _selectedDay;
final Map<DateTime, List<Event>> _events = {
DateTime.utc(2022, 7, 7): [Event('Event 1')],
DateTime.utc(2022, 7, 8): [Event('Event 2')],
};
@override
void initState() {
super.initState();
_selectedDay = _focusedDay;
_selectedEvents = ValueNotifier(_getEventsForDay(_selectedDay!));
}
List<Event>_getEventsForDay(DateTime day) {
return _events[day] ?? [];
}
@override
void dispose() {
_selectedEvents.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Table Calendar Example'),
),
body: Column(
children: [
TableCalendar<Event>(
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) {
if (!isSameDay(_selectedDay, selectedDay)) {
setState(() {
_selectedDay = selectedDay;
_focusedDay = focusedDay;
});
_selectedEvents.value = _getEventsForDay(selectedDay);
}
},
onFormatChanged: (format) {
if (_calendarFormat != format) {
setState(() {
_calendarFormat = format;
});
}
},
onPageChanged: (focusedDay) {
_focusedDay = focusedDay;
},
eventLoader: _getEventsForDay,
),
const SizedBox(height: 8.0),
Expanded(
child: ValueListenableBuilder <List<Event>>(
valueListenable: _selectedEvents,
builder: (context, value, _) {
return ListView.builder(
itemCount: value.length,
itemBuilder: (context, index) {
return Container(
margin: const EdgeInsets.symmetric(
horizontal: 12.0,
vertical: 4.0,
),
decoration: BoxDecoration(
border: Border.all(),
borderRadius: BorderRadius.circular(12.0),
),
child: ListTile(
title: Text(value[index].title),
),
);
},
);
},
),
),
],
),
);
}
}