DatePicker para formularios en Flutter

oscar__martin

Óscar Martin 💙

Posted on April 25, 2020

DatePicker para formularios en Flutter

Sin duda una de las sorpresas que tuve el otro día fue encontrarme que no hay un componente en Flutter para mostrar una fecha y ser integrado en un formulario.
Vamos a ver lo simple que es hacer esto en Flutter para un caso muy concreto cuyo resultado es el siguiente.

Alt Text

Picker habilitado

Alt Text

Picker deshabilitado

Para ello necesitaremos solo 3 sencillos pasos.

Construir Picker habilitado

Tendremos una Row con el Texto a mostrar, y el icono que muestre que se pueda hacer click sobre ella. Además lo metemos dentro de un InputDecorator y un InkWell para que tenga aspecto de TextFormField.

Construir Picker deshabilitado

Aquí yo utilizo un TextField que tenga estilo disabled.

Evento para seleccionar la fecha

Nuestro _getDatePickerEnabled al hacer onTap llama a _selectDate que simplemente hará uso de la función que viene en Material showDatePicker que muestra un Dialog con un calendario.

Como veis es muy sencillo hacer componentes que aún no están incluidos en Flutter sin la necesidad de instalar ninguna dependencia.

Espero que os sirva y para cualquier duda podéis escribirme en mi Twitter.

💖 💪 🙅 🚩
oscar__martin
Óscar Martin 💙

Posted on April 25, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related