I'm using the CupertinoDatePicker for setting a date in a form. To match our application design I need the picker to be in dark mode, so I adjusted the backgroundColor
. For the text in the picker to be white I wrapped the picker inside a Container
with a CupertinoTheme
to set the color. I did this based on this solution: How to change font size for CupertinoDatePicker in Flutter?. For some reason this breaks the widths of the columns in the CupertinoDatePicker, and I don't have a clue why that's happening. If I remove the CupertinoTheme
the columns are fine but the text is dark too, thus unreadable.
Code:
void showPlatformDatePicker() {
showCupertinoModalPopup(
context: context,
builder: (_) => Container(
color: Colors.black87,
height: 400,
child: Column(
children: [
Container(
color: Color.fromRGBO(18, 18, 18, 1),
alignment: Alignment.centerRight,
child: TextButton(
onPressed: () => Navigator.pop(context),
child: Text(
'Done',
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.normal,
color: Colors.white,
),
),
),
),
Container(
height: 350,
width: double.infinity,
child: CupertinoTheme(
data: CupertinoThemeData(
textTheme: CupertinoTextThemeData(
dateTimePickerTextStyle: TextStyle(
color: Colors.white,
),
),
),
child: CupertinoDatePicker(
backgroundColor: Colors.black87,
mode: CupertinoDatePickerMode.date,
maximumDate: DateTime.now().subtract(Duration(days: 365)),
initialDateTime:
DateTime.now().subtract(Duration(days: 365 * 18)),
onDateTimeChanged: (val) {
final date = val.toIso8601String();
context
.bloc<FormBloc>()
.add(DateChanged(date));
},
),
),
),
],
),
),
);
}
Strangely, adding a fontSize
to the CupertinoTextThemeData
fixes this issue:
Container(
height: 350,
width: double.infinity,
child: CupertinoTheme(
data: CupertinoThemeData(
textTheme: CupertinoTextThemeData(
dateTimePickerTextStyle: TextStyle(
color: Colors.white,
fontSize: 20.0,
),
),
),
child: CupertinoDatePicker(
backgroundColor: Colors.black87,
mode: CupertinoDatePickerMode.date,
maximumDate: DateTime.now().subtract(Duration(days: 365)),
initialDateTime:
DateTime.now().subtract(Duration(days: 365 * 18)),
onDateTimeChanged: (val) {
final date = val.toIso8601String();
context
.bloc<FormBloc>()
.add(DateChanged(date));
},
),
),