The latest articles on DEV Community by Óscar Martin 💙 (@oscar__martin). https://dev.to/oscar__martin https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F349983%2F0a3da659-1f04-4050-a435-2f3619a4efe4.jpg https://dev.to/oscar__martin en Óscar Martin 💙 Sat, 25 Apr 2020 19:12:23 +0000 https://dev.to/oscar__martin/datepicker-para-formularios-en-flutter-3g9f https://dev.to/oscar__martin/datepicker-para-formularios-en-flutter-3g9f <p>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.<br> Vamos a ver lo simple que es hacer esto en Flutter para un caso muy concreto cuyo resultado es el siguiente.</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--z3rg-AZ3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/39r6xmb546hu56dyayxg.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--z3rg-AZ3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/39r6xmb546hu56dyayxg.png" alt="Alt Text"></a></p> Picker habilitado <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--jtwI9OUP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/xfxyt1dht9grv8scy3j0.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--jtwI9OUP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/xfxyt1dht9grv8scy3j0.png" alt="Alt Text"></a></p> Picker deshabilitado <p>Para ello necesitaremos solo 3 sencillos pasos.</p> <h2> Construir Picker habilitado </h2> <p>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.<br> </p> <div class="ltag_gist-liquid-tag"> </div> <h2> Construir Picker deshabilitado </h2> <p>Aquí yo utilizo un TextField que tenga estilo disabled.<br> </p> <div class="ltag_gist-liquid-tag"> </div> <h2> Evento para seleccionar la fecha </h2> <p>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.</p> <div class="ltag_gist-liquid-tag"> </div> <p>Como veis es muy sencillo hacer componentes que aún no están incluidos en Flutter sin la necesidad de instalar ninguna dependencia.</p> <p>Espero que os sirva y para cualquier duda podéis escribirme en mi <a href="https://twitter.com/oscar__martin">Twitter</a>.</p> flutter widget datepicker