Flutter：如何更改showTimePicker小部件的颜色

Question

我想改变showTimePicker的颜色。这是我的代码：

                               GestureDetector(
                                  onTap: () {
                                    Future<TimeOfDay> selectedTime =
                                        showTimePicker(
                                      initialTime: TimeOfDay.now(),
                                      context: context,
                                      // ignore: missing_return
                                    ).then((value) {
                                      if (value != null) {
                                       // do something
                                  },
                                  child: Image.asset(
                                    pathToCollectionPhoto,
                                    fit: BoxFit.cover,
                                  ),
                                ),

我可以翻译。以下是您需要翻译的内容：

我怎么能实现它？

- M4trix Dev

Answer 1

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

- Mohamed Hana

Answer 2

要更改timePicker的实际主题，请将以下代码添加到上面的答案中的Theme()内：

timePickerTheme: TimePickerTheme.of(context).copyWith()

- RIX

Answer 3

你需要将你的小部件包装在Theme中，并根据你的需求提供主题数据。

示例：

Theme(
      data: Theme.of(context).copyWith(
        primaryColor: Colors.cyan, //color you want at header
        buttonTheme: ButtonTheme.of(context).copyWith(
          colorScheme: ColorScheme.light(
            secondary: Colors
                .cyan, // Color you want for action buttons (CANCEL and OK)
          ),
        ),
      ),
      child: Builder(
        builder: (context) => GestureDetector(
          onTap: () async {
            final selectedTime = await showTimePicker(
              context: context,
              initialTime: TimeOfDay.now(),
            );

            if (selectedTime != null) {
              // Do further task
            }
          },
          child: Image.asset(
            pathToCollectionPhoto,
            fit: BoxFit.cover,
          ),
        ),
      ),
    );

- Milind Mevada

---

如何调整手表指针的颜色？谢谢！ - Jonathan Rhein

Answer 4

我不知道这对你们中的一些人是否仍然有帮助。从我看到的例子中，我没有看到任何一种显示24小时的方式。试试这个，它可能会有所帮助，而且我觉得它很简单。

_selectTime(BuildContext context) async {
final TimeOfDay? picked = await showTimePicker(
  context: context,
  initialTime: TimeOfDay.now(),
  builder: (BuildContext context, Widget? child) {
    return Theme(
        data: Theme.of(context).copyWith(
            colorScheme: const ColorScheme.light(
              primary: Colors.green,
            )),
        child: MediaQuery(
          data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: true),
          child: child!,
        ));
  },
);
if (picked != null) {
  setState(() {
    print('=====$picked');
    _selectedTime = "${picked.hour}:${picked.minute}";;
  });
}

}

- Siewe Rostand