Flutter – CuppertinoDatePicker theme overwrite breaks column width

Issue

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));
                },
              ),
            ),
          ),
        ],
      ),
    ),
  );
}

Screenshot:

Solution

Strangely, adding a fontSizeto 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));
                },
              ),
            ),

Answered By – Edblocker

Answer Checked By – Terry (FlutterFixes Volunteer)