Flutter: How to change color of showTimePicker widget

Question

I would like to change the color of the showTimePicker. Here is my code

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

How can I achieve it?

Answer 1

You need to wrap your widget into a Theme and provide theme data as you want.

Example:

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