[Proposal] Customize TimePickerDialog's button styles #94927
Description
Use case
I've recently tried to answer a question on stackoverflow. Basically the question was "How to set a different style to cancel and confirm buttons in a TimePickerDialog". And in fact while you can apply a common button style by changing the ThemeData you cannot have 2 different ButtonStyle like in this image:
Currently it seems that the only way of doing this design would be to re-implement entirely TimePickerDialog.
Proposal
Add properties ButtonStyle? cancelButtonStyle and ButtonStyle? confirmButtonStyle which would be applied separately to the buttons.
Implementation in TimePickerDialog
class TimePickerDialog extends StatefulWidget {
const TimePickerDialog({
// ...
this.cancelButtonStyle,
this.confirmButtonStyle,
}) : assert(initialTime != null),
super(key: key);
// ...
/// Optionnaly provide your own button style for the cancel button.
///
/// If null, the button uses [Theme.of(context).textButtonTheme].
final ButtonStyle? cancelButonStyle;
/// Optionally provide your own button style for the confirm button.
///
/// If null, the button uses [Theme.of(context).textButtonTheme].
final ButtonStyle? confirmButtonStyle;
// ...
}Implementation in _TimePickerDialogState
class _TimePickerDialogState extends State<TimePickerDialog> with RestorationMixin {
// ...
@override
Widget build(BuildContext context) {
// ...
final Widget actions = Row(
children: <Widget>[
const SizedBox(width: 10.0),
IconButton(
color: TimePickerTheme.of(context).entryModeIconColor ?? theme.colorScheme.onSurface.withOpacity(
theme.colorScheme.brightness == Brightness.dark ? 1.0 : 0.6,
),
onPressed: _handleEntryModeToggle,
icon: Icon(_entryMode.value == TimePickerEntryMode.dial ? Icons.keyboard : Icons.access_time),
tooltip: _entryMode.value == TimePickerEntryMode.dial
? MaterialLocalizations.of(context).inputTimeModeButtonLabel
: MaterialLocalizations.of(context).dialModeButtonLabel,
),
Expanded(
child: Container(
alignment: AlignmentDirectional.centerEnd,
constraints: const BoxConstraints(minHeight: 52.0),
padding: const EdgeInsets.symmetric(horizontal: 8),
child: OverflowBar(
spacing: 8,
overflowAlignment: OverflowBarAlignment.end,
children: <Widget>[
TextButton(
style: widget.cancelButtonStyle, // Add this line
onPressed: _handleCancel,
child: Text(widget.cancelText ?? localizations.cancelButtonLabel),
),
TextButton(
style: widget.confirmButtonStyle, // Add this line
onPressed: _handleOk,
child: Text(widget.confirmText ?? localizations.okButtonLabel),
),
],
),
),
),
],
);
// ...
}
// ...
}