如何在 Flutter 中自定义 TimePicker 小部件答案

【问题标题】：How to customize a TimePicker widget in Flutter如何在 Flutter 中自定义 TimePicker 小部件
【发布时间】：2020-12-07 03:13:21
【问题描述】：

如何从输入时间选择器小部件更改紫色选择颜色、紫色边框颜色、时间文本颜色和Hour 和Minute 颜色，似乎在TimePickerThemeData 中找不到属性

【问题讨论】：

如果我的回答对您原帖中指定的问题有帮助，请采纳。如果没有，请提供更多详细信息说明为什么没有。

标签： flutter material-design timepicker

【解决方案1】：

您也可以在主题上使用状态！在进行某些操作（如选定或聚焦的操作）时控制样式。

这里是一个例子：

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

【讨论】：

【解决方案2】：

showTimePicker(
                  context: context,
                  initialTime: TimeOfDay(hour: 10, minute: 47),
                  builder: (context, child) {
                    return Theme(
                      data: ThemeData.light().copyWith(
                        colorScheme: ColorScheme.light(
                          // change the border color
                          primary: Colors.red,
                          // change the text color
                          onSurface: Colors.purple,
                        ),
                        // button colors 
                        buttonTheme: ButtonThemeData(
                          colorScheme: ColorScheme.light(
                            primary: Colors.green,
                          ),
                        ),
                      ),
                      child: child,
                    );
                  },
                );

结果：

【讨论】：

谢谢！有没有办法直接更改Hour 和Minute 文本颜色和日期选择颜色？
其中一些Themes colors 协同工作，因此几乎不可能直接更改其中一个而不影响另一个。
你知道如何在不降级 Flutter 的情况下获取旧的 showTimePicker 小部件吗？
我认为如果没有降级选项，这将是不可能的，您能否发布您想要实现的颜色组合的屏幕截图？
没问题，只是好奇，你的回答就够了，再次感谢