'Event markers not loading into Table Calendar widget [Flutter]
I'm trying to populate my Table Calendar widget with events from Firebase. I was able to do this successfully, with events being loaded into a list of events associated with that day. While the list shows successfully once I tap on a day, the marker on the calendar showing that the day has an event isn't showing up. Here is some of my code:
@override
void initState() {
_groupEvents();
super.initState();
}
List<PostEvent> _getEventsForDay(DateTime day) {
if (_selectedEvents[day] != null) {
return _selectedEvents[day]!;
}
return [];
}
Map<DateTime, List<PostEvent>> _groupEvents() {
for (var event in postedEvents) {
DateTime date = DateTime(event.dateTimeOfEvent.year,
event.dateTimeOfEvent.month, event.dateTimeOfEvent.day);
if (_selectedEvents[date] != null) {
setState(() {
_selectedEvents[date]!.add(event);
});
} else if (_selectedEvents[date] == null) {
setState(() {
_selectedEvents[date] = [
PostEvent(
title: event.title,
uid: event.uid,
description: event.description,
dateTimeOfEvent: DateTime(
event.dateTimeOfEvent.year,
event.dateTimeOfEvent.month,
event.dateTimeOfEvent.day,
event.dateTimeOfEvent.hour,
event.dateTimeOfEvent.minute),
)
//geohash: event.position.geohash,
//geopoint: event.position.geopoint)
];
});
}
}
return _selectedEvents;
}
@override
void dispose() {
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Column(
children: [
TableCalendar(
focusedDay: selectedDay,
firstDay: DateTime(1990),
lastDay: DateTime(2050),
weekendDays: const [DateTime.friday, DateTime.saturday],
calendarFormat: format,
onFormatChanged: (CalendarFormat _format) {
setState(() {
format = _format;
});
},
startingDayOfWeek: StartingDayOfWeek.sunday,
daysOfWeekVisible: true,
daysOfWeekStyle: const DaysOfWeekStyle(
weekendStyle: TextStyle(
color: Color.fromARGB(255, 46, 39, 39),
fontWeight: FontWeight.bold)),
//Day changed
onDaySelected: (DateTime selectDay, DateTime focusDay) {
setState(() {
selectedDay = selectDay;
focusedDay = focusDay;
});
},
selectedDayPredicate: (DateTime date) {
return isSameDay(selectedDay, date);
},
availableGestures: AvailableGestures.horizontalSwipe,
eventLoader: (day) {
return _getEventsForDay(day);
},
//To style the calendar
calendarStyle: CalendarStyle(
isTodayHighlighted: true,
markerDecoration: BoxDecoration(
color: Theme.of(context).primaryColorLight,
shape: BoxShape.circle),
defaultDecoration: BoxDecoration(
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(5.0),
),
selectedDecoration: BoxDecoration(
color: Theme.of(context).primaryColor,
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(5.0),
),
selectedTextStyle: const TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 15.5),
todayDecoration: BoxDecoration(
color: Theme.of(context).primaryColorLight,
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(5.0),
),
weekendTextStyle: const TextStyle(
color: Color.fromARGB(255, 0, 0, 0),
),
weekendDecoration: BoxDecoration(
color: Theme.of(context).primaryColorLight.withOpacity(0.2),
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(5.0),
)),
headerStyle: const HeaderStyle(
formatButtonVisible: true,
titleCentered: false,
formatButtonShowsNext: false,
formatButtonPadding:
EdgeInsets.symmetric(horizontal: 15, vertical: 7),
formatButtonTextStyle: TextStyle(
//color: Color.fromARGB(255, 161, 48, 48),
fontWeight: FontWeight.bold,
)),
),
..._getEventsForDay(DateTime(
selectedDay.year, selectedDay.month, selectedDay.day))
.map(
(PostEvent event) => ListTile(
leading: const Icon(Icons.event_note_outlined),
title: Text(event.title.toString()),
subtitle: Text(event.description.toString()),
trailing: const Icon(Icons.edit),
onTap: () {
eventPopup(event, context);
},
),
)
],
),
),
When I return [PostEvent()] instead of [] inside _getEventsForDay, the markers show up for every single day on the calendar with the dummy data in the list. When I return [] instead, no markers show at all even on days that have events. I know that the if condition inside the function is being called because the list of events is displaying on the page when I tap on a date, just not the markers.
Any help would be appreciated.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
