修正 Flutter 的 showTimePicker 格式 (Flutter Web)

Question

我正在尝试在 Web 应用程序中使用 Flutter 的 showTimePicker，但是显示的小部件的格式很糟糕（见下文）。

数字不可见，所选数字上的时钟线和圆圈也不可见，甚至 ok/cancel 按钮也不可见。

（我的应用程序是 100% 网络，所以我还没有在智能手机上测试过）

我的实现代码很简单（我改编自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,
                  );
                },);
          },);
  }
}

我猜我的 theme 可能有问题，我创建的它或多或少是这样的：

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

请注意，我只更改了 ThemeData 中的几个值 - 在需要的地方-。

对可能发生的事情有什么想法吗？

谢谢

Answer 1

如我所料，解决方案是在主题设置上。我更改了以下两个重要项目：

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),
  );
  //...
)

其中，函数_myTimePickerTheme如下：

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

结果如下图所示：

注意：如果您不想更改整个应用的 TextButton 主题，您可以将 showTimePicker 的构建器的子项包装在一个Theme 小部件，如前所述 here。

修正 Flutter 的 showTimePicker 格式 (Flutter Web)

Correct Flutter's showTimePicker Format (Flutter Web)

dart

flutter

flutter-web