I have a list, so something like
var x = [DateTime(xxxx), DateTime(xxxx)];
And I want to show users the days they worked out, so I want the days in that list to appear green, lets say. However, when I navigate to a new month and sometimes just navigate at all, the green circle disappears. I know my function is used correctly, because the font size differs from the default text, but it doesn't show the circle. I included images of the issue and the code for the calendar is linked below. Thank you!
Container(
width: size.width * .9,
child: TableCalendar(
firstDay: DateTime.utc(1900, 10, 16),
lastDay: DateTime.utc(2200, 3, 14),
availableGestures:
AvailableGestures.horizontalSwipe,
focusedDay: _focusedDay,
calendarFormat: _calendarFormat,
selectedDayPredicate: (day) {
return isSameDay(_selectedDay, day);
},
key: _calendarKey,
daysOfWeekStyle: DaysOfWeekStyle(
weekdayStyle: TextStyle(
color: AppColors(theme).secondaryText),
weekendStyle: TextStyle(
color: AppColors(theme).secondaryText)),
calendarStyle: CalendarStyle(
selectedDecoration: BoxDecoration(
color: AppColors(theme).darkGreen,
shape: BoxShape.circle),
isTodayHighlighted: false,
todayTextStyle: TextStyle(
color: AppColors(theme).primaryText,
),
defaultTextStyle: TextStyle(
color: AppColors(theme).primaryText,
fontSize: 20),
weekendTextStyle: TextStyle(
color: AppColors(theme).primaryText,
fontSize: 20),
outsideTextStyle: TextStyle(
color: AppColors(theme).primaryText),
outsideDecoration: BoxDecoration(
shape: BoxShape.circle,
)),
onDaySelected: (selectedDay, focusedDay) {
setState(() {
_selectedDay = selectedDay;
_focusedDay = focusedDay;
sortExercises();
});
},
calendarBuilders: CalendarBuilders(
defaultBuilder: (context, day, focusedDay) {
bool workedOut = worked_out_days.any(
(workedOutDay) =>
isSameDay(workedOutDay, day));
return workedOut
? Container(
margin: const EdgeInsets.all(4.0),
decoration: BoxDecoration(
color: AppColors(theme).footerGrey,
shape: BoxShape.circle,
),
child: Center(
child: Text(
'${day.day}',
style: TextStyle(
color: AppColors(theme)
.primaryText,
),
),
),
)
: null;
}),
headerStyle: HeaderStyle(
leftChevronVisible: false,
rightChevronVisible: false,
formatButtonVisible: false,
titleCentered: true,
headerMargin: EdgeInsets.only(bottom: 15),
titleTextStyle: TextStyle(
color: AppColors(theme).primaryText,
fontSize: 20)),
onPageChanged: (focusedDay) {
setState(() {
_focusedDay = focusedDay;
});
},
))
You can see in the image the 25, 26, 27, 28, and 29 for feb is selected (with a grey circle), but when I go to march, only 1 and 2 are selected, not 25, 26, 27, 28, and 29.
