So I'm using the showTimePicker to show the time picker dialog and I want to change the filled color of input fields. This is what the color is right now:

I want to change this purplish color to some other color. How may I do that? I've tried messing up with the Theme but didn't help really:

import 'package:flutter/material.dart';

Future<TimeOfDay?> showCustomTimePicker({
  required BuildContext context,
  required TimeOfDay initialTime,
}) async {
  return await showTimePicker(
    context: context,
    initialTime: initialTime,
    builder: (context, child) {
      return Theme(
        data: Theme.of(context).copyWith(
          colorScheme: Theme.of(context).colorScheme.copyWith(
                primary: Theme.of(context).colorScheme.secondary,
              ),
        ),
        child: child!,
      );
    },
  );
}

Original Theme

timePickerTheme: TimePickerThemeData(
        backgroundColor: calculatedPrimaryColor,
        dialHandColor: calculatedSecondaryColor,
        dayPeriodColor: calculatedSecondaryColor
            .withOpacity(mode == ThemeMode.light ? .3 : .5),
        dayPeriodTextColor: calculatedInputColor,
      ),

Any help is appreciated.

So I'm using the showTimePicker to show the time picker dialog and I want to change the filled color of input fields. This is what the color is right now:

I want to change this purplish color to some other color. How may I do that? I've tried messing up with the Theme but didn't help really:

import 'package:flutter/material.dart';

Future<TimeOfDay?> showCustomTimePicker({
  required BuildContext context,
  required TimeOfDay initialTime,
}) async {
  return await showTimePicker(
    context: context,
    initialTime: initialTime,
    builder: (context, child) {
      return Theme(
        data: Theme.of(context).copyWith(
          colorScheme: Theme.of(context).colorScheme.copyWith(
                primary: Theme.of(context).colorScheme.secondary,
              ),
        ),
        child: child!,
      );
    },
  );
}

Original Theme

timePickerTheme: TimePickerThemeData(
        backgroundColor: calculatedPrimaryColor,
        dialHandColor: calculatedSecondaryColor,
        dayPeriodColor: calculatedSecondaryColor
            .withOpacity(mode == ThemeMode.light ? .3 : .5),
        dayPeriodTextColor: calculatedInputColor,
      ),

Any help is appreciated.

• flutter

Share Follow asked Mar 14 at 14:24 dipanshdipansh 53099 silver badges2525 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

You can customize the filled color of the time input fields in showTimePicker by modifying the hourMinuteColor property inside TimePickerThemeData. The issue is that Theme.of(context).copyWith() does not affect the input field color directly.

Solution

Define a timePickerTheme in your ThemeData and ensure hourMinuteColor is set:

timePickerTheme: TimePickerThemeData(
  backgroundColor: calculatedPrimaryColor,
  dialHandColor: calculatedSecondaryColor,
  dayPeriodColor: calculatedSecondaryColor.withOpacity(mode == ThemeMode.light ? .3 : .5),
  dayPeriodTextColor: calculatedInputColor,
  hourMinuteColor: Colors.grey.shade200, // Change this to the desired color
  hourMinuteTextColor: Colors.black, // Ensures better contrast
),

1. hourMinuteColor → Controls the background color of the hour & minute input fields.

2. hourMinuteTextColor → Changes the text color inside the input fields for contrast.

so you just need to add this code for TimePickerThemeData

hourMinuteColor: Colors.grey.shade200,
hourMinuteTextColor: Colors.black,

for more customize you can set hourMinuteColor as a WidgetStateColor to define different colors for focused and unfocused states

          hourMinuteColor: WidgetStateColor.resolveWith((states) {
            if (states.contains(WidgetState.selected)) {
              return Colors.blue; // Color when focused (active)
            }
            return Colors.grey.shade200; // Default color
          }),