I used the following code to create a time picker, which I have integrated into my flutter settings screens. When I run the web app on my mac in Chrome in debug mode, I can use the trackpad to scroll through the times and pick a time. When I run the app in release mode (flutter build web) in Firefox on my raspberry pi with touch screen, the time picker does not respond to touches and I cannot select a time. Thanks so much for your help.
class _DatePickerItem extends StatefulWidget {
_DatePickerItem(this.uacTime, this.subtitle, this.context) {
}
@override
Widget build(BuildContext context) {
return DecoratedBox(
decoration: const BoxDecoration(
border: Border(
top: BorderSide(
color: CupertinoColors.inactiveGray,
width: 0.0,
),
bottom: BorderSide(
color: CupertinoColors.inactiveGray,
width: 0.0,
),
),
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(uacTime!.subject ?? ""),
CupertinoButton(
onPressed: () {
_showTimePicker(uacTime!, context);
},
// In this example, the date value is formatted manually. You can use intl package
// to format the value based on user's locale settings.
child: Text(
//alarm.time.toString(),
uacTime!.time.toString(),
style: const TextStyle(
fontSize: 22.0,
),
),
),
],
),
),
);
}
// This shows a CupertinoModalPopup with a reasonable fixed height which hosts CupertinoDatePicker.
void _showTimePicker(UACTime uacTime, BuildContext context) {
showCupertinoModalPopup(
context: context,
builder: (BuildContext context) => Container(
height: 216,
padding: const EdgeInsets.only(top: 6.0),
// The Bottom margin is provided to align the popup above the system navigation bar.
margin: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom,
),
// Provide a background color for the popup.
color: CupertinoColors.systemBackground.resolveFrom(context),
// Use a SafeArea widget to avoid system overlaps.
child: SafeArea(
top: false,
child: CupertinoDatePicker(
initialDateTime:
DateTime.now().applyTimeOfDayHMS(uacTime.time),
mode: CupertinoDatePickerMode.time,
use24hFormat:
Settings.getValue('24-hour-time', false),
// This is called when the user changes the date.
onDateTimeChanged: (DateTime newDateTime) {
setState(() {
uacTime.time =
TimeOfDayHMS.fromDateTime(newDateTime);
});
}),
),
));
}
}
I used the following code to create a time picker, which I have integrated into my flutter settings screens. When I run the web app on my mac in Chrome in debug mode, I can use the trackpad to scroll through the times and pick a time. When I run the app in release mode (flutter build web) in Firefox on my raspberry pi with touch screen, the time picker does not respond to touches and I cannot select a time. Thanks so much for your help.
class _DatePickerItem extends StatefulWidget { _DatePickerItem(this.uacTime, this.subtitle, this.context) { }
UACTime? uacTime = null; String subtitle = ""; BuildContext context;
@override _DatePickerItemState createState() => new _DatePickerItemState(uacTime, subtitle, context); }
class _DatePickerItemState extends State<_DatePickerItem> {
_DatePickerItemState(this.uacTime, this.subtitle, this.context); UACTime? uacTime = null; String subtitle = ""; BuildContext context;
@override Widget build(BuildContext context) { return DecoratedBox( decoration: const BoxDecoration( border: Border( top: BorderSide( color: CupertinoColors.inactiveGray, width: 0.0, ), bottom: BorderSide( color: CupertinoColors.inactiveGray, width: 0.0, ), ), ), child: Padding( padding: const EdgeInsets.symmetric(horizontal: 16.0), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children:[
Text(uacTime!.subject ?? ""),
CupertinoButton(
onPressed: () {
_showTimePicker(uacTime!, context);
},
// In this example, the date value is formatted manually. You can use intl package
// to format the value based on user's locale settings.
child: Text(
//alarm.time.toString(),
uacTime!.time.toString(),
style: const TextStyle(
fontSize: 22.0,
),
),
),
],
),
),
);
}
// This shows a CupertinoModalPopup with a reasonable fixed height which hosts CupertinoDatePicker. void _showTimePicker(UACTime uacTime, BuildContext context) { showCupertinoModalPopup(
context: context,
builder: (BuildContext context) => Container(
height: 216,
padding: const EdgeInsets.only(top: 6.0),
// The Bottom margin is provided to align the popup above the system navigation bar.
margin: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom,
),
// Provide a background color for the popup.
color: CupertinoColors.systemBackground.resolveFrom(context),
// Use a SafeArea widget to avoid system overlaps.
child: SafeArea(
top: false,
child: CupertinoDatePicker(
initialDateTime:
DateTime.now().applyTimeOfDayHMS(uacTime.time),
mode: CupertinoDatePickerMode.time,
use24hFormat:
Settings.getValue('24-hour-time', false),
// This is called when the user changes the date.
onDateTimeChanged: (DateTime newDateTime) {
setState(() {
uacTime.time =
TimeOfDayHMS.fromDateTime(newDateTime);
});
}),
),
));
}
}