TimePicker

 

¿Qué es un TimePicker en Flutter?

Un TimePicker en Flutter es un widget que permite a los usuarios seleccionar una hora específica. Es similar a un reloj analógico o digital que se despliega en pantalla para que el usuario pueda ajustar las horas y minutos. Se utiliza comúnmente en aplicaciones donde es necesario que el usuario especifique un momento puntual, como en aplicaciones de alarma, calendarios o para programar eventos.

¿Cómo se usa un TimePicker?

Flutter no tiene un widget TimePicker como tal, pero proporciona la función showTimePicker para mostrar un diálogo con un selector de hora. Esta función devuelve un Future que se resuelve con la hora seleccionada por el usuario o null si el usuario cancela la operación.

Ejemplo básico:

Dart

import 'package:flutter/material.dart';

class MyTimePickerExample extends StatefulWidget {
  @override
  _MyTimePickerExampleState createState() => _MyTimePickerExampleState();
}

class _MyTimePickerExampleState extends State<MyTimePickerExample> {
  TimeOfDay? selectedTime = TimeOfDay.now();

  Future<void> _selectTime(BuildContext context) async {
    final TimeOfDay? picked = await showTimePicker(   
      context: context,
      initialTime: selectedTime ?? TimeOfDay.now(),
    );
    if (picked != null && picked != selectedTime)    {
      setState(() {
        selectedTime = picked;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:    Text('TimePicker Example'),
      ),
      body: Center(
        child: Text(selectedTime == null ? 'Select time' : selectedTime.toString()),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => _selectTime(context),
        child: Icon(Icons.access_time),
      ),
    );
  }
}

Explicación del código:

• showTimePicker: Muestra un diálogo con el selector de horas.
• initialTime: La hora que se mostrará seleccionada por defecto.
• setState: Actualiza la interfaz de usuario para mostrar la hora seleccionada.

Personalización del TimePicker

La función showTimePicker ofrece varias opciones para personalizar el aspecto y comportamiento del selector de horas, como:

• context: El contexto en el que se muestra el diálogo.
• initialTime: La hora inicial seleccionada.
• helpText: Un texto de ayuda que se muestra en el diálogo.
• cancelText: El texto del botón para cancelar la selección.
• confirmText: El texto del botón para confirmar la selección.

Integración con otros widgets

El TimePicker se suele integrar con otros widgets como TextField para mostrar la hora seleccionada al usuario. Puedes utilizar un TextEditingController para sincronizar el valor del TextField con la hora seleccionada.

Consideraciones adicionales:

• Formato de hora: Puedes formatear la hora seleccionada de acuerdo a tus necesidades utilizando bibliotecas como intl.
• Formato de 12 o 24 horas: Puedes configurar el formato de hora utilizando las propiedades hourLabel y minuteLabel.
• Hora y fecha: Si necesitas seleccionar tanto la hora como la fecha, puedes combinar showTimePicker con showDatePicker.

En resumen, el TimePicker es una herramienta esencial para cualquier aplicación que requiera que el usuario especifique una hora. Es fácil de usar y altamente personalizable.