Correct Flutter's showTimePicker Format (Flutter Web)

Question

I am trying to use Flutter's showTimePicker in a Web app, but the format of the displayed widget is awful (see below).

The numbers are not visible, nor is the clock line and circle over the selected number, or even the ok/cancel buttons.

(My App is 100% web, so I haven't tested it on a smartphone)

The code of my implementation is quite simple (I adapted it from this post):

class myWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FlatButton(
          child: Icon(Icons.edit),
          onPressed: () async {
              TimeOfDay picked = await showTimePicker(
                context: context,
                initialTime: TimeOfDay.now(),
                builder: (BuildContext context, Widget child) {
                  return MediaQuery(
                  data: MediaQuery.of(context)
                  .copyWith(alwaysUse24HourFormat: false),
                  child: child,
                  );
                },);
          },);
  }
}

I am guessing there might be something wrong with my theme , which I created more or less like this:

MaterialApp(
  theme: ThemeData(
    errorColor: Colors.red, //Color
    // ...
  );
  //...
)

Note that I only changed a few values from ThemeData -where needed-.

Any ideas of what might be going on?

Thanks

Answer 1

As I suspected, the solution was on the Theme settings. I changed the following two important items:

MaterialApp(
  theme: ThemeData(
    //First change: Give a Color to the Ok/Cancel buttons' text.
    //(In this case, red)
    textButtonTheme: TextButtonThemeData(style: ButtonStyle(foregroundColor: MaterialStateColor.resolveWith((states) => Colors.red),)),
    //Second change:
    //Give colors to hour/minute inputs and dial hand:
    timePickerTheme: _myTimePickerTheme(ThemeData().timePickerTheme),
  );
  //...
)

Where, the function _myTimePickerTheme is as follows:

TimePickerThemeData _myTimePickerTheme (TimePickerThemeData base){
    
    Color myTimePickerMaterialStateColorFunc(Set<MaterialState> states, {bool withBackgroundColor = false}) {
    const Set<MaterialState> interactiveStates = <MaterialState>{
      MaterialState.pressed,
      MaterialState.hovered,
      MaterialState.focused,
      MaterialState.selected, //This is the one actually used
    };
    if (states.any(interactiveStates.contains)) {
      // the color to return when button is in pressed, hovered, focused, or selected state
      return Colors.red.withOpacity(0.12);
    }
    // the color to return when button is in it's normal/unfocused state 
    return withBackgroundColor ? Colors.grey[200] : Colors.transparent;
  }

    return base.copyWith(
      hourMinuteTextColor: Colors.red,
      hourMinuteColor: MaterialStateColor.resolveWith((Set<MaterialState> states) => myTimePickerMaterialStateColorFunc(states, withBackgroundColor: true)), //Background of Hours/Minute input
      dayPeriodTextColor: Colors.red,
      dayPeriodColor: MaterialStateColor.resolveWith(myTimePickerMaterialStateColorFunc), //Background of AM/PM.
      dialHandColor: Colors.red,
    );
  }

The result is displayed below:

Note: If you don't want to change the TextButton Theme of your entire app, you can wrap the child of showTimePicker 's builder, in a Theme widget, as mentioned here .