Getting a bad state: no element error when creating dynamic children

Hi, I'm using custom code to generate a list of provider availabilities that takes into account slots that been booked. I am then generating dynamic children to display buttons with each available slot. This works fine until I have instances where a user has no available slots and I get the "no element" error.

I've tried to use conditional visibility but I wasn't able to get this to work.

Here is the custom function I'm using:

List<DateTime>? getProviderAvailability(
List<DateTime> reservedSlots, 
DateTime startDateArg, 
DateTime currrentDateTime, 
) {
 /// MODIFY CODE ONLY BELOW THIS LINE 
const int startHour = 9; 
const int endHour = 17; 
const int intervalMinutes = 60; // 60 minutes for hour-long slots 
final int intervalsPerHour = 60 ~/ intervalMinutes; 
final int totalIntervals = (endHour - startHour) * intervalsPerHour; // Calculate the next available day starting at 9 AM 
DateTime nextAvailableDay = DateTime( 
startDateArg.year, startDateArg.month, startDateArg.day, startHour); // Generate all hour-long slots within working hours for the next available day 
List<DateTime> workingHourSlots = List.generate(
totalIntervals, (index) => nextAvailableDay.add(
Duration(
minutes: intervalMinutes * index)), 
); // Filter out slots that are before the current date and time 
workingHourSlots = workingHourSlots.where((slot) => slot.isAfter(currrentDateTime)).toList(); // Remove reserved slots for (var reserved in reservedSlots) 
{ workingHourSlots.removeWhere((slot) => slot.year == reserved.year && slot.month == reserved.month && slot.day == reserved.day && slot.hour == reserved.hour && slot.minute == reserved.minute); 
} 
return workingHourSlots; /// MODIFY CODE ONLY ABOVE THIS LINE 
}