Time Field

const FTimeField(
  label: Text('Appointment Time'),
  description: Text('Select a time for your appointment.'),
);

const FTimeField(
  hour24: true,
  label: Text('Appointment Time'),
  description: Text('Select a time for your appointment.'),
);

const FTimeField.picker(
  label: Text('Appointment Time'),
  description: Text('Select a time for your appointment.'),
);

class ValidatorTimeFieldPage extends StatefulWidget {
  @override
  State<ValidatorTimeFieldPage> createState() => _ValidationTimeFieldPageState();
}
 
class _ValidationTimeFieldPageState extends State<ValidatorTimeFieldPage> with SingleTickerProviderStateMixin {
  late final FTimeFieldController _controller;
 
  @override
  void initState() {
    super.initState();
    _controller = FTimeFieldController(vsync: this, validator: _validate);
  }
 
  String? _validate(FTime? time) => time == FTime(12) ? 'Time cannot be noon.' : null;
 
  @override
  Widget build(BuildContext context) => FTimeField(
        controller: _controller,
        label: const Text('Appointment Time'),
      );
 
  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

class FormTimeFieldPage extends StatefulWidget {
  @override
  State<FormTimeFieldPage> createState() => _FormTimeFieldPageState();
}
 
class _FormTimeFieldPageState extends State<FormTimeFieldPage> with TickerProviderStateMixin {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  late final FTimeFieldController _startTimeController;
  late final FTimeFieldController _endTimeController;
 
  @override
  void initState() {
    super.initState();
    _startTimeController = FTimeFieldController(
      vsync: this,
      validator: _validateStartTime,
    );
    _endTimeController = FTimeFieldController(
      vsync: this,
      validator: _validateEndTime,
    );
  }
 
  String? _validateStartTime(FTime? time) {
    if (time != null && time < FTime.now()) {
      return 'Start time must be in the future.';
    }
    return null;
  }
 
  String? _validateEndTime(FTime? time) {
    if (_startTimeController.value != null && time < _startTimeController.value!) {
      return 'End time must be after start time.';
    }
    return null;
  }
 
  @override
  Widget build(BuildContext context) => Padding(
    padding: const EdgeInsets.all(30.0),
    child: Form(
      key: _formKey,
      child: Column(
        children: [
          FTimeField(
            controller: _startTimeController,
            label: const Text('Start Time'),
            description: const Text('Select a start time.'),
            autovalidateMode: AutovalidateMode.disabled,
          ),
          const SizedBox(height: 20),
          FTimeField(
            controller: _endTimeController,
            label: const Text('End Time'),
            description: const Text('Select an end time.'),
            autovalidateMode: AutovalidateMode.disabled,
          ),
          const SizedBox(height: 25),
          FButton(
            child: const Text('Submit'),
            onPress: () {
              if (_formKey.currentState!.validate()) {
                // Form is valid, process the dates
              }
            },
          ),
        ],
      ),
    ),
  );
 
  @override
  void dispose() {
    _startTimeController.dispose();
    _endTimeController.dispose();
    super.dispose();
  }
}