Search code examples
flutterdartflutter-cupertino

Flutter - CuppertinoDatePicker theme overwrite breaks column width


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: enter image description here


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