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?
Here's how you do it: Step 1: Inside the showDatePicker function, add the builder paramter. Step 2: Inside the builder parameter, return the Theme widget. Step 3: Inside the Theme widget, add the data property and define the new theme by specifying the colorScheme for the date picker dialog.
You can customise the TimePicker widget by overriding the TimePickerThemeData . This can be done one of two ways: By providing a custom TimePickerThemeData to the showTimePicker method. By providing a custom Theme to the showTimePicker method.
just use format() method to get AM,PM what you required.
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,
),
),
),
);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With