Table_Calendar in AlertDialog with Responsive Width and Height

[EXEIdeas]

I am trying to use Table_Calendar in an AlertDialog then got the below error. LayoutBuilder does not support returning intrinsic dimensions.

Here is my AlertDialog code.

return AlertDialog(
contentPadding: EdgeInsets.all(10.0),
backgroundColor: Colors.white,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
title: Container(
padding: const EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 10.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topRight: Radius.circular(10.0), topLeft: Radius.circular(10.0)),
color: CustomColor.primary,
),
child: const Text(
'Calender',
textAlign: TextAlign.center,
style: TextStyle(color: CustomColor.white),
)),
content: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Text(
"Select Your Date/s...",
textAlign: TextAlign.center,
style: TextStyle(color: Colors.black, fontSize: 14),
),
SizedBox(
height: 10,
),
TableCalendar(
firstDay: DateTime.now(),
lastDay: DateTime.utc(2030, 12, 31),
focusedDay: _selectedDay ?? DateTime.now(),
calendarFormat: _calendarFormat,
headerStyle: const HeaderStyle(
titleTextStyle: TextStyle(fontSize: 18.0),
decoration: BoxDecoration(
borderRadius:
BorderRadius.only(topLeft: Radius.circular(10), topRight: Radius.circular(10))),
leftChevronIcon: Icon(
Icons.chevron_left,
size: 28,
),
rightChevronIcon: Icon(
Icons.chevron_right,
size: 28,
),
),
onFormatChanged: (format) {
setState(() {
_calendarFormat = format;
});
},
selectedDayPredicate: (day) {
// On single date selection
// return isSameDay(day, _selectedDay);
// Use values from Set to mark multiple days as selected
return _selectedDays.contains(day);
},
onDaySelected: (selectedDay, focusedDay) {
setState(() {
// On Single Date Selection
_selectedDay = selectedDay;
_focusedDay = selectedDay;
// On Multiple Date Selection
if (_selectedDays.contains(selectedDay)) {
_selectedDays.remove(selectedDay);
} else {
_selectedDays.add(selectedDay);
}
});
},
onPageChanged: (d) {
// On Change Of Month From Header
},
),
],
),
),
actions: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: ElevatedButton(
child: const Text(
'Save',
style: TextStyle(color: CustomColor.white, fontSize: 16),
),
style: ButtonStyle(
minimumSize: MaterialStateProperty.all(Size(99999, 40)),
backgroundColor: MaterialStateProperty.all(CustomColor.secondary),
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)))),
onPressed: () async {
  
},
),
),
SizedBox(
width: 10,
),
Expanded(
child: ElevatedButton(
child: const Text(
'Cancel',
style: TextStyle(color: CustomColor.white, fontSize: 16),
),
style: ButtonStyle(
minimumSize: MaterialStateProperty.all(Size(99999, 40)),
backgroundColor: MaterialStateProperty.all(CustomColor.subBtn),
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)))),
onPressed: () async {
Navigator.of(TopVariables.appNavigationKey.currentContext!).pop();
},
),
)
],
),
],
),
],
);

Without table_calender widget, its working foine. Can anyone tell me how to show table_calender in AlertDialog?

[mkelleherUSSA]

Having same issue. @EXEIdeas Did you ever figure this out or have a work-around?

[mkelleherUSSA]

Having same issue. @EXEIdeas Did you ever figure this out or have a work-around?

I think I might have found a work-around by wrapping the TableCalendar in a Container widget with some semi-auto sizing:

return AlertDialog(
      title: Text('Dialog Title'),
      content: Builder(
        builder: (context) {
          return Container(
            height: MediaQuery.of(context).size.height - 100,
            width: MediaQuery.of(context).size.width - 100,
            child: Column(
              children: [
                TableCalendar(
                ...