I have a Column containing a Listview and a tableCalendar and I have placed them inside a two expanded widget so they should be taking up half the space each, but the TableCalendar is overflowing and the listview is scrolling behind it and Is still visible, What could be causing this I thought two expanded widget would divide the space up according to the flex factor:
return Column(
children: [
Expanded(
flex: 2,
child: TableCalendar(
firstDay: DateTime.utc(2010, 10, 16),
lastDay: DateTime.utc(2030, 3, 14),
focusedDay: DateTime.now(),
calendarFormat: _calendarFormat,
calendarStyle: const CalendarStyle(outsideDaysVisible: false),
onFormatChanged: (format) {
setState(() {
_calendarFormat = format;
});
},
selectedDayPredicate: (day) {
return isSameDay(_selectedDay, day);
},
onDaySelected: (selectedDay, focusedDay) {
setState(() {
_selectedDay = selectedDay;
_focusedDay = focusedDay; // Update focused day as well
filteredBooking =
filterBookingsByDate(selectedDay, bookings);
//ChatGpt here you should show the bookings that have a startDate on the selected day
//use the Selected Day to get List of bookings below
});
},
onPageChanged: (focusedDay) {
_focusedDay = focusedDay;
},
eventLoader: (day) {
// Remove the time information from the day parameter
DateTime dateOnly = DateTime(day.year, day.month, day.day);
return events[dateOnly] ?? [];
},
),
),
Expanded(
flex: 3,
child: ListView.builder(
itemCount: filteredBooking.length,
itemBuilder: (context, index) {
var backgroundcolor = Colors.grey[100];
final booking = filteredBooking[index];
if (booking.userEmail == 'milanlabus29@gmail.com') {
backgroundcolor =
const Color.fromARGB(255, 255, 167, 160);
}
return Padding(
padding: const EdgeInsets.all(8.0),
child: ListTile(
tileColor: backgroundcolor,
title: Text(booking.serviceTitle),
subtitle: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Email: ${booking.userEmail}'),
Text(
'Date: ${DateFormat('yyyy-MM-dd').format(booking.bookingDate)}'),
Text(
'StartTime: ${DateFormat('HH:mm').format(booking.startTime)}'),
Text(
'EndTime: ${DateFormat('HH:mm').format(booking.endTime)}')
],
),
trailing: OutlinedButton(
onPressed: () async {
bool confirmDelete =
await showDeleteConfirmationDialog(context);
if (confirmDelete) {
await dbhandler.deleteBooking(booking.bookingId);
setState(() {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Booking deleted'),
duration: Duration(seconds: 1),
),
);
});
}
},
child: Icon(Icons.delete_forever),
// Add more widgets to display other booking details
),
),
);
},
),
),
],
);
I tried changing the flex factor but it didn't work