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

我该如何实现？

Answer 1

您需要将小部件包装到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,
          ),
        ),
      ),
    );

Answer 2

要更改timePicker的实际主题，请将其添加到Theme()中的上述答案中：

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

Answer 3

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