Hoy nos complace anunciar que CodePen, el principal entorno de desarrollo social para millones de desarrolladores y diseñadores de primera línea, agregó compatibilidad con Flutter. Para los desarrolladores web, CodePen ha sido durante mucho tiempo un gran lugar para compartir exploraciones de diseño, nuevas técnicas e ideas. Ahora, gracias a la introducción de Flutter, CodePen permite que un nuevo público aprenda, comparta contenido y promueva su creatividad.
En palabras de Alex Vázquez, uno de los cofundadores de CodePen:
"CodePen ha sido un gran fanático de Flutter y del lenguaje de programación Dart desde hace años. Estamos muy entusiasmados con el hecho de que Flutter ahora sea compatible con dispositivos móviles y la Web. La comunidad de Flutter está creciendo rápidamente, por lo que estamos encantados de brindar compatibilidad con Flutter mediante su propio editor personalizado de CodePen! Flutter es oficialmente un miembro de primera clase de la comunidad de CodePen. Ya queremos ver lo que creas con Flutter en CodePen".
Desde que se concibió Flutter, lo hemos diseñado como un lienzo para la expresión creativa. Ha sido alentador ver el creciente reconocimiento de sus capacidades de diseño, desde las asociaciones que anunciamos con Adobe y SuperNova en nuestro evento Flutter Interact orientado al diseño, hasta el nombramiento de Flutter como una de las ideas de diseño más importantes de la década según Fast Company. Con la nueva adición de un entorno de Flutter basado en CodePen, los profesionales creativos ahora pueden aprovechar CodePen para descubrir inspiraciones artísticas de Flutter, crear impresionantes portafolios y mostrar sorprendentes ideas al mundo!
El editor de Flutter de CodePen está compilado sobre el mismo servicio de backend, dart-services, que actualmente alimenta a DartPad (el editor basado en la Web creado por los equipos de Flutter y Dart que se actualizó recientemente para admitir Flutter). Cuando compilamos DartPad, lo diseñamos como una herramienta educativa para ayudar a los desarrolladores a aprender a usar Flutter y Dart, y a compartir fragmentos de código entre ellos. Decidimos específicamente hacer público el código dart-services para que sitios como CodePen pudieran adaptarlo a nuevos escenarios y audiencias.
DartPad es una excelente herramienta para probar al instante una idea en código o compartir un fragmento con otros desarrolladores, y es útil para reproducir (e informar) errores. También puedes hacer esto en CodePen, pero CodePen tiene la ventaja de una comunidad de diseño activa en la que puedes compartir, comentar, promocionar, probar ideas de diseño y recibir aportes de otros diseñadores. El editor de Flutter de CodePen es más parecido al "lóbulo derecho" que se utiliza a fin de crear prototipos de ideas para la expresión creativa y la inspiración en el diseño, mientras que DartPad es más parecido al "lóbulo izquierdo", cuando se necesita probar rápidamente una idea o codificar un concepto técnico.

Animación de "efecto de luz" de Mariano Zorrilla

Editor de Flutter en CodePen

Veamos rápidamente el editor de Flutter en CodePen. Puedes crear un nuevo bolígrafo de Flutter (el término que se usa en CodePen para hacer referencia a "fragmento de código") desde cero o a partir de una plantilla existente. Agradecemos enormemente a los miembros de nuestra comunidad de Flutter (@aednlaxer, @ayushnishad, @diegoveloper, @divyanshub024, @egorbelibov, @gskinnerTeam, @mkiisoft, @orestesgaolin, @SlaxXxX y otros) por enviarnos algunas muestras interesantes para la lista de plantillas.
Empecemos por la plantilla "GooeyEdge". Como pueden ver, el código de Flutter está en el lado izquierdo, y el resultado de la Web de Flutter, en el derecho. Puedes jugar con este diseño interactivo arrastrando el borde del visual con el mouse.

Animación de "Gooey edge" de Grant Skinner

También puedes hacer cambios en el código de Flutter y ver que se apliquen correctamente. Por ejemplo, si cambiamos el color del indicador de control de página de "blanco" a "azul" (línea 326), verás que el color se actualiza en pocos segundos. CodePen recompila automáticamente tu código cada vez que haces un cambio. Solo actualiza una línea, espera unos segundos, y aparece el nuevo resultado.

El indicador de control de página cambió a azul

Ahora veamos qué ocurre si cometo un error de sintaxis. Supongamos que borro accidentalmente un punto y coma que se encuentra al final de la línea 1. Inmediatamente veré una barra roja que advertirá el error de sintaxis. Esto te permite detectar y corregir fácilmente los errores.

Mensaje de advertencia que se muestra al introducir un error de sintaxis

Funciones sociales

Lo que nos gusta particularmente de CodePen son las funciones sociales y comunitarias que ofrece. Una vez que crees un nuevo bolígrafo o descubras los de Flutter ya creados por la comunidad, podrás guardarlos, marcarlos como favoritos, agregarlos a una colección, compartirlos en redes sociales o incluso copiarlos para crear tu propia versión.


¡Pruébalo!

Esperamos que este nuevo entorno de Flutter en CodePen te permita crear y mostrar animaciones, ideas, viñetas y mucho más. Comparte tus diseños en Twitter usando #FlutterPen. ¡Ya queremos ver lo que creas! Si te perdiste el anuncio de la semana pasada sobre la capacitación gratuita, te recomendamos que la veas. Y no te pierdas nada, ya que muy pronto tendremos más noticias para compartir.