Closed mbfakourii closed 3 years ago
The dialog uses the default MaterialLocalizations with cancelButtonLabel and okButtonLabel. There is no easy way to change these.
You could build your own dialog however and use the TimeRangePicker() widget as a normal widget within it. Something like this:
ElevatedButton(
onPressed: () async {
TimeRange? result = await showDialog(
context: context,
builder: (BuildContext context) {
TimeOfDay _startTime = TimeOfDay.now();
TimeOfDay _endTime = TimeOfDay.now();
return AlertDialog(
contentPadding: EdgeInsets.zero,
title: Text("Choose a nice timeframe"),
content: Container(
width: MediaQuery.of(context).size.width,
height: 450,
child: TimeRangePicker(
hideButtons: true,
onStartChange: (start) {
setState(() {
_startTime = start;
});
},
onEndChange: (end) {
setState(() {
_endTime = end;
});
},
),
),
actions: <Widget>[
TextButton(
child: Text('My custom cancel'),
onPressed: () {
Navigator.of(context).pop();
}),
TextButton(
child: Text('My custom ok'),
onPressed: () {
Navigator.of(context).pop(TimeRange(
startTime: _startTime, endTime: _endTime));
},
),
],
);
},
);
print(result.toString());
},
child: Text("Custom Dialog"),
)
(you'll have to fiddle around with paddings, dimensions, orientation etc. yourself then, but you get the idea)
hi how cheng ok and cancel text ?