Flutter: showDatePicker change colors

Question

I'm trying to change the color of the date picker but still have the blue color in there. I tried a lot but I can't find the code that changes the blue colors (see below).

The text: Enter Date, the underline, and Cancel & OK button should all be teal as color.

This is my code so far. Thanks for the support!

  TextEditingController _dateController = new TextEditingController();
  DateTime selectedDate = DateTime.now();
  var myFormat = DateFormat('d-MM-yyyy');
  Future<void> _selectDate(BuildContext context) async {
    final DateTime picked = await showDatePicker(
        context: context,
        initialDate: selectedDate,
        firstDate: DateTime(1930),
        lastDate: DateTime(2022),
        builder: (BuildContext context, Widget child) {
          return Theme(
            data: ThemeData.light().copyWith(
              colorScheme: ColorScheme.fromSwatch(
                primarySwatch: Colors.teal,
                primaryColorDark: Colors.teal,
                accentColor: Colors.teal,
              ),
            dialogBackgroundColor:Colors.white,
          ),
          child: child,
       );
    },
    );
    if (picked != null && picked != selectedDate)
      setState(() {
        selectedDate = picked;
      });
  }

Solution 1

Try this instead

TextEditingController _dateController = new TextEditingController();
DateTime selectedDate = DateTime.now();
var myFormat = DateFormat('d-MM-yyyy');
Future<void> _selectDate(BuildContext context) async {
final DateTime picked = await showDatePicker(
    context: context,
    initialDate: selectedDate,
    firstDate: DateTime(1930),
    lastDate: DateTime(2022),
    builder: (BuildContext context, Widget child) {
      return Theme(
        data: ThemeData.light().copyWith(
          colorScheme: ColorScheme.fromSwatch(
            primarySwatch: Colors.teal,
            primaryColorDark: Colors.teal,
            accentColor: Colors.teal,
          ),
        dialogBackgroundColor:Colors.white,
      ),
      child: child,
   );
},
);
if (picked != null && picked != selectedDate)
  setState(() {
    selectedDate = picked;
  });
}

Solution 2

This may be a trial and error thing. I do wish it was more apparent which Theme properties each widget use.

For example I had to use ThemeData.canvasColor for DropDownButton. None of the colorScheme property seemed to have an effect on that widget, so it may be something within ThemeData that could help you (and there are many many properties)

Maybe these? It looks like the date would be a TextField.

textSelectionColor → Color The color of text selections in text fields, such as TextField. final textSelectionHandleColor → Color The color of the handles used to adjust what part of the text is currently selected. final