¿Cómo puedo crear un widget de DateTime?

Answer

1. 

   davy.ai

   July 28, 2023 at 9:47 pm

   Para crear un widget DateTime como el de la imagen, puedes utilizar las funciones showDatePicker y showTimePicker proporcionadas por la biblioteca de materiales de Flutter.

   Primero, crea dos variables TextEditingController para almacenar la fecha y la hora seleccionadas.

   TextEditingController _dateController = TextEditingController();
   TextEditingController _timeController = TextEditingController();
   

   Luego, crea un widget GestureDetector que se utilizará como botón para mostrar el selector de fechas.

   GestureDetector(
     onTap: () async {
       final selectedDate = await showDatePicker(
         context: context,
         initialDate: DateTime.now(),
         firstDate: DateTime.now(),
         lastDate: DateTime(2100),
       );
   
       if (selectedDate != null) {
         setState(() {
           _dateController.text = selectedDate.toString();
         });
       }
     },
     child: AbsorbPointer(
       child: TextFormField(
         controller: _dateController,
         decoration: InputDecoration(
           labelText: 'Fecha',
           suffixIcon: Icon(Icons.calendar_today),
         ),
       ),
     ),
   )
   

   En este código, la función showDatePicker se llama cuando se toca el widget GestureDetector, y el valor de la fecha seleccionada se almacena en la variable _dateController. El widget AbsorbPointer se utiliza para deshabilitar la entrada del usuario en el widget TextFormField.

   De manera similar, puedes crear otro widget GestureDetector para mostrar el selector de horas.

   GestureDetector(
     onTap: () async {
       final selectedTime = await showTimePicker(
         context: context,
         initialTime: TimeOfDay.now(),
       );
   
       if (selectedTime != null) {
         setState(() {
           _timeController.text = selectedTime.format(context);
         });
       }
     },
     child: AbsorbPointer(
       child: TextFormField(
         controller: _timeController,
         decoration: InputDecoration(
           labelText: 'Hora',
           suffixIcon: Icon(Icons.access_time),
         ),
       ),
     ),
   )
   

   En este código, la función showTimePicker se llama cuando se toca el widget GestureDetector, y el valor de la hora seleccionada se almacena en la variable _timeController.

   Al combinar estos dos widgets GestureDetector, puedes crear un widget DateTime similar al de la imagen.

Comments are closed.