How to customize a TimePicker widget in Flutter

Question

How can you change the Purple selection color, Purple border color, time text color and Hour and Minute color from the input time picker widget, can't seem to find the properties in TimePickerThemeData

Answer 1

You are able to use states on your theme too! Controlling the styles when making some action (like selected or focused actions).

Here an example:

final theme = ThemeData.light().copyWith(
  timePickerTheme: TimePickerThemeData(
    backgroundColor: Colors.green.shade200,
    hourMinuteColor: MaterialStateColor.resolveWith((states) =>
        states.contains(MaterialState.selected)
            ? Colors.blue.withOpacity(0.2)
            : Colors.orange),
    hourMinuteTextColor: MaterialStateColor.resolveWith((states) =>
        states.contains(MaterialState.selected)
            ? Colors.pink
            : Colors.deepPurple),
    dialHandColor: Colors.pink.shade800,
    dialBackgroundColor: Colors.purple.withOpacity(0.5),
    dialTextColor: MaterialStateColor.resolveWith((states) =>
        states.contains(MaterialState.selected)
            ? Colors.green
            : Colors.black),
    entryModeIconColor: Colors.yellow
    ),
    textTheme: TextTheme(
      overline: TextStyle(
        color: Colors.red,
      ),
    ),
    textButtonTheme: TextButtonThemeData(
        style: ButtonStyle(
      backgroundColor: MaterialStateColor.resolveWith((states) => Colors.black),
      foregroundColor: MaterialStateColor.resolveWith((states) => Colors.green),
      overlayColor: MaterialStateColor.resolveWith((states) => Colors.pink),
    )));