Flutter Calendar - Showing custom data on days not works well - flutter

Question

I´m using flutter with a calendar carousel (https://pub.dev/packages/flutter_calendar_carousel)
For each day for which there is an entry in the database, I want to display an icon in the calendar. What is the best way to do this?
That´s my current code:
Please check the part with the customDayBuilder
class _CalendarScreenState extends State<CalendarScreen> {
DateTime _currentDate;
openNewEntryDialog(BuildContext context, date) {
setState(() {
_currentDate = date;
});
showBarModalBottomSheet(
context: context,
builder: (BuildContext context, scrollController) {
return AddCalendarEntry(
scrollController: scrollController,
currentDate: _currentDate,
);
});
}
#override
Widget build(BuildContext context) {
final calendarEntriesData = Provider.of<CalendarEntries>(context);
void initState() {
_currentDate = widget._currentDate;
super.initState();
}
dayPressed(date, events) {
this.setState(() => _currentDate = date);
}
return Material(
child: CupertinoPageScaffold(
backgroundColor: Colors.white,
navigationBar: CupertinoNavigationBar(
trailing: IconButton(
icon: Icon(Icons.add),
color: Colors.white,
onPressed: () => openNewEntryDialog(context, DateTime.now())),
middle: Text("Juni 2020",
style: Theme.of(context).appBarTheme.textTheme.headline1),
backgroundColor: Theme.of(context).primaryColor,
),
child: Padding(
padding: const EdgeInsets.only(left: 15.0, right: 15.0),
child: Column(
children: <Widget>[
Expanded(
child: CalendarCarousel(
markedDateIconBorderColor: Theme.of(context).primaryColor,
weekdayTextStyle:
TextStyle(color: Theme.of(context).primaryColor),
daysTextStyle:
TextStyle(color: Theme.of(context).primaryColor),
todayButtonColor: Theme.of(context).primaryColor,
weekendTextStyle: TextStyle(color: Colors.black),
locale: "de",
selectedDayButtonColor: Colors.grey.shade100,
selectedDateTime: _currentDate,
headerTextStyle: TextStyle(
color: Theme.of(context).primaryColor, fontSize: 25),
onDayPressed: (DateTime date, List<Event> events) =>
dayPressed(date, events),
onDayLongPressed: (DateTime date) =>
openNewEntryDialog(context, date),
customDayBuilder: (bool isSelectable,
int index,
bool isSelectedDay,
bool isToday,
bool isPrevMonthDay,
TextStyle textStyle,
bool isNextMonthDay,
bool isThisMonthDay,
DateTime day) {
return FutureBuilder(
future: calendarEntriesData.getAll(),
builder: (BuildContext context,
AsyncSnapshot<List<CalendarEntry>> snapshot) {
if (!snapshot.hasData ||
snapshot.connectionState ==
ConnectionState.waiting) {
return Center(
child: CircularProgressIndicator(),
);
} else {
for (final entry in snapshot.data) {
var temp =
DateTime.parse(entry.dateTime).toUtc();
var d1 = DateTime.utc(
temp.year, temp.month, temp.day);
var d2 = DateTime.utc(
day.year, day.month, day.day);
if (d2.compareTo(d1) == 0) {
return Center(
child: Icon(Icons.local_airport));
}
}
}
});
},
),
),
Expanded(
flex: 1,
child: Container(
margin: EdgeInsets.only(top: 35),
child: FutureBuilder<List<CalendarEntry>>(
future: calendarEntriesData
.getCurrentMonthEntries(_currentDate != null
? _currentDate
: DateTime.now()),
builder: (BuildContext context,
AsyncSnapshot<List<CalendarEntry>> snapshot) {
if (!snapshot.hasData ||
snapshot.connectionState ==
ConnectionState.waiting) {
return Center(
child: CircularProgressIndicator(),
);
} else {
return Container(
height: 100,
child: ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (BuildContext context,
int index) {
return ListTile(
title: Text(snapshot
.data[index].servicePartner
.toString()),
subtitle: snapshot.data[index]
.dateTime ==
null
? Text("Unbekannt")
: Text(DateFormat(
"dd.MM.yyyy")
.format(DateTime.parse(
snapshot.data[index]
.dateTime))),
trailing: Text((snapshot
.data[index]
.minutes /
60)
.toString() +
" Stunden"),
);
}));
}
})))
],
),
)));
}
}
How you can see, I´m using a FutureBuilder to check all database entries. And if a day matches, I show an Icon on this day. This works in general, but
I have some errors on the screen
The performance is very bad, because there is some flickering..for each click on another day the widget renders completely. I don´t want this.
How could I improve my code? How could I do this better?
Thanks so much for your help!

Answer 1

Please use the button and button style for this to generate a clickable.
Also resolved your issue.
Widget renderDay(
bool isSelectable,
int index,
bool isSelectedDay,
//bool isToday,
bool isPrevMonthDay,
TextStyle? textStyle,
TextStyle defaultTextStyle,
bool isNextMonthDay,
bool isThisMonthDay,
DateTime now,
) {
final EventList<T>? markedDatesMap = widget.markedDatesMap;
List<Event> markedEvents =
widget.markedDatesMap!.getEvents(now) as List<Event>? ?? [];
return Container(
child: ElevatedButtonTheme(
data: ElevatedButtonThemeData(
style: ButtonStyle(
side: MaterialStateProperty.resolveWith<BorderSide>((states) =>
BorderSide(
color: ColorConstants.WHITE)),
backgroundColor: MaterialStateProperty.resolveWith<Color>(
(states) => markedEvents.length > 0 &&
!isPrevMonthDay &&
!isNextMonthDay
? _getStatusColor(
markedEvents[0].dayStatus!.toLowerCase())
: isSelectedDay && widget.selectedDayButtonColor != null
? widget.selectedDayButtonColor
: widget.dayButtonColor,
),
shape: MaterialStateProperty.resolveWith<OutlinedBorder>((_) {
return RoundedRectangleBorder(
borderRadius: BorderRadius.circular(80));
}),
textStyle: MaterialStateProperty.resolveWith<TextStyle>(
(states) =>
TextStyle(color: ColorConstants.BUTTON_BG_COLOR)),
padding: MaterialStateProperty.all(
EdgeInsets.all(widget.dayPadding),
),
),
),
child: ElevatedButton(
onPressed:
widget.disableDayPressed ? null : () => _onDayPressed(now),
child: Stack(
children: <Widget>[
getDayContainer(
isSelectable,
index,
isSelectedDay,
// isToday,
isPrevMonthDay,
textStyle,
defaultTextStyle,
isNextMonthDay,
isThisMonthDay,
now),
],
),
),
),
);
}