You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
HMG_Patient_App_New/lib/widgets/time_picker_widget.dart

349 lines
12 KiB
Dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:hmg_patient_app_new/core/app_assets.dart';
import 'package:hmg_patient_app_new/core/app_export.dart';
import 'package:hmg_patient_app_new/core/utils/utils.dart';
import 'package:hmg_patient_app_new/extensions/string_extensions.dart';
import 'package:hmg_patient_app_new/theme/colors.dart';
import 'package:hmg_patient_app_new/widgets/buttons/custom_button.dart';
/// A reusable time picker widget that can be used anywhere in the app
/// Shows a bottom sheet with iOS-style time picker
class TimePickerWidget {
/// Shows a time picker bottom sheet
///
/// [context] - BuildContext for showing the bottom sheet
/// [initialTime] - Initial time to display (defaults to current time)
/// [use24HourFormat] - Whether to use 24-hour format (defaults to false)
/// [onTimeSelected] - Callback when time is selected
///
/// Returns the selected TimeOfDay or null if cancelled
static Future<TimeOfDay?> show(
BuildContext context, {
TimeOfDay? initialTime,
bool use24HourFormat = false,
bool displaySelectedTime = false,
Function(TimeOfDay)? onTimeSelected,
}) async {
final selectedTime = initialTime ?? TimeOfDay.now();
final result = await showModalBottomSheet<TimeOfDay>(
context: context,
backgroundColor: Colors.transparent,
isScrollControlled: true,
builder: (BuildContext context) {
return _TimePickerBottomSheet(
initialTime: selectedTime,
use24HourFormat: use24HourFormat,
displaySelectedTime: displaySelectedTime,
onTimeChanged: (time) {
// Time is being changed in real-time
},
);
},
);
if (result != null && onTimeSelected != null) {
onTimeSelected(result);
}
return result;
}
/// Formats TimeOfDay to string (HH:mm format)
static String formatTime(TimeOfDay time, {bool use24HourFormat = false}) {
if (use24HourFormat) {
return '${time.hour.toString().padLeft(2, '0')}:${time.minute.toString().padLeft(2, '0')}';
} else {
final hour = time.hourOfPeriod == 0 ? 12 : time.hourOfPeriod;
final period = time.period == DayPeriod.am ? 'AM' : 'PM';
return '${hour.toString().padLeft(2, '0')}:${time.minute.toString().padLeft(2, '0')} $period';
}
}
/// Parses time string to TimeOfDay
static TimeOfDay? parseTime(String timeString) {
try {
final parts = timeString.split(':');
if (parts.length == 2) {
final hour = int.parse(parts[0]);
final minute = int.parse(parts[1].split(' ')[0]);
return TimeOfDay(hour: hour, minute: minute);
}
} catch (e) {
return null;
}
return null;
}
}
class _TimePickerBottomSheet extends StatefulWidget {
final TimeOfDay initialTime;
final bool use24HourFormat;
final bool displaySelectedTime;
final Function(TimeOfDay) onTimeChanged;
const _TimePickerBottomSheet({
required this.initialTime,
required this.use24HourFormat,
required this.displaySelectedTime,
required this.onTimeChanged,
});
@override
State<_TimePickerBottomSheet> createState() => _TimePickerBottomSheetState();
}
class _TimePickerBottomSheetState extends State<_TimePickerBottomSheet> {
late int selectedHour;
late int selectedMinute;
late DayPeriod selectedPeriod;
@override
void initState() {
super.initState();
selectedHour = widget.use24HourFormat ? widget.initialTime.hour : widget.initialTime.hourOfPeriod;
if (selectedHour == 0 && !widget.use24HourFormat) selectedHour = 12;
selectedMinute = widget.initialTime.minute;
selectedPeriod = widget.initialTime.period;
}
TimeOfDay _getCurrentTime() {
if (widget.use24HourFormat) {
return TimeOfDay(hour: selectedHour, minute: selectedMinute);
} else {
int hour = selectedHour;
if (selectedPeriod == DayPeriod.pm && hour != 12) {
hour += 12;
} else if (selectedPeriod == DayPeriod.am && hour == 12) {
hour = 0;
}
return TimeOfDay(hour: hour, minute: selectedMinute);
}
}
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
color: AppColors.whiteColor,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.r),
topRight: Radius.circular(20.r),
),
),
child: SafeArea(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
// Header
Container(
padding: EdgeInsets.symmetric(horizontal: 20.w, vertical: 16.h),
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: AppColors.dividerColor,
width: 1,
),
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
"Select Time".needTranslation.toText18(
weight: FontWeight.w600,
color: AppColors.textColor,
),
GestureDetector(
onTap: () => Navigator.pop(context),
child: Utils.buildSvgWithAssets(
icon: AppAssets.cancel,
width: 24.h,
height: 24.h,
iconColor: AppColors.textColor,
),
),
],
),
),
// Time Picker
SizedBox(
height: 250.h,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// Hour Picker
Expanded(
child: CupertinoPicker(
scrollController: FixedExtentScrollController(
initialItem: widget.use24HourFormat ? selectedHour : (selectedHour - 1),
),
itemExtent: 50.h,
onSelectedItemChanged: (index) {
setState(() {
if (widget.use24HourFormat) {
selectedHour = index;
} else {
selectedHour = index + 1;
}
widget.onTimeChanged(_getCurrentTime());
});
},
children: List.generate(
widget.use24HourFormat ? 24 : 12,
(index) {
final hour = widget.use24HourFormat ? index : index + 1;
return Center(
child: Text(
hour.toString().padLeft(2, '0'),
style: TextStyle(
fontSize: 24.f,
fontWeight: FontWeight.w500,
color: AppColors.textColor,
),
),
);
},
),
),
),
// Separator
Text(
':',
style: TextStyle(
fontSize: 24.f,
fontWeight: FontWeight.w500,
color: AppColors.textColor,
),
),
// Minute Picker
Expanded(
child: CupertinoPicker(
scrollController: FixedExtentScrollController(
initialItem: selectedMinute,
),
itemExtent: 50.h,
onSelectedItemChanged: (index) {
setState(() {
selectedMinute = index;
widget.onTimeChanged(_getCurrentTime());
});
},
children: List.generate(
60,
(index) => Center(
child: Text(
index.toString().padLeft(2, '0'),
style: TextStyle(
fontSize: 24.f,
fontWeight: FontWeight.w500,
color: AppColors.textColor,
),
),
),
),
),
),
// AM/PM Picker (only for 12-hour format)
if (!widget.use24HourFormat)
Expanded(
child: CupertinoPicker(
scrollController: FixedExtentScrollController(
initialItem: selectedPeriod == DayPeriod.am ? 0 : 1,
),
itemExtent: 50.h,
onSelectedItemChanged: (index) {
setState(() {
selectedPeriod = index == 0 ? DayPeriod.am : DayPeriod.pm;
widget.onTimeChanged(_getCurrentTime());
});
},
children: [
Center(
child: Text(
'AM',
style: TextStyle(
fontSize: 24.f,
fontWeight: FontWeight.w500,
color: AppColors.textColor,
),
),
),
Center(
child: Text(
'PM',
style: TextStyle(
fontSize: 24.f,
fontWeight: FontWeight.w500,
color: AppColors.textColor,
),
),
),
],
),
),
],
),
),
if (widget.displaySelectedTime)
// Current Time Display
Container(
margin: EdgeInsets.symmetric(horizontal: 20.w, vertical: 16.h),
padding: EdgeInsets.symmetric(vertical: 12.h),
decoration: BoxDecoration(
color: AppColors.lightGrayBGColor,
borderRadius: BorderRadius.circular(12.r),
),
child: Center(
child: TimePickerWidget.formatTime(
_getCurrentTime(),
use24HourFormat: widget.use24HourFormat,
).toText20(
weight: FontWeight.w600,
color: AppColors.textColor,
),
),
),
// Action Buttons
Padding(
padding: EdgeInsets.symmetric(horizontal: 20.w, vertical: 16.h),
child: Row(
children: [
Expanded(
child: CustomButton(
height: 56.h,
text: "Cancel".needTranslation,
onPressed: () => Navigator.pop(context),
textColor: AppColors.textColor,
backgroundColor: AppColors.greyColor,
borderColor: AppColors.greyColor,
),
),
SizedBox(width: 12.w),
Expanded(
child: CustomButton(
height: 56.h,
text: "Confirm".needTranslation,
onPressed: () {
Navigator.pop(context, _getCurrentTime());
},
textColor: AppColors.whiteColor,
backgroundColor: AppColors.primaryRedColor,
),
),
],
),
),
],
),
),
);
}
}