#flutter #material-design #timepicker
#flutter #материал-дизайн #timepicker
Вопрос:
Как вы можете изменить фиолетовый цвет выделения, фиолетовый цвет границы, цвет текста времени и Hour и Minute цвет виджета выбора времени ввода, похоже, не удается найти свойства в TimePickerThemeData
Комментарии:
1. Если мой ответ помог вам решить проблему, указанную в вашем исходном сообщении, пожалуйста, примите его. Если нет, предоставьте более подробную информацию о том, почему это не так.
Ответ №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,
);
},
);
Результат:
Комментарии:
1. Спасибо! Есть ли способ также напрямую изменить
HourиMinuteцвет текста и цвет выбора дневного периода?2. Некоторые из них
Themes colorsработают параллельно, поэтому практически невозможно напрямую изменить одно, не затронув другое.3. Вы случайно не знаете, как получить старый
showTimePickerвиджет без понижения рейтинга Flutter?4. Я не думаю, что это было бы возможно без опции понижения рейтинга, можете ли вы опубликовать скриншот того, какой цветовой комбинации вы пытаетесь добиться?
5. Нет проблем, просто любопытно, вашего ответа было достаточно, еще раз спасибо
Ответ №2:
Вы также можете использовать состояния в своей теме! Управление стилями при выполнении некоторых действий (например, выбранных или сфокусированных действий).
Вот пример:
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),
)));
