Un nuevo DartPad.dev con soporte para Flutter

Hoy anunciamos una actualización importante de DartPad.dev con un nuevo diseño y soporte para el popular toolkit de UI Flutter.

Hoy anunciamos una actualización importante de DartPad.dev con un nuevo diseño y soporte para el popular toolkit de UI Flutter. DartPad es nuestro editor en línea que ejecuta programas de Dart directamente en tu navegador, y ahora también ejecuta aplicaciones de Flutter.

La interfaz de DartPad ejecutando una aplicación de Flutter.

Crea algo hoy

#

Para crear un nuevo proyecto de Flutter, haz clic en el botón New Pad y elige Flutter.

Una animación que muestra cómo crear un nuevo proyecto de Flutter en DartPad.

Esto agrega algo de código inicial al editor y lo ejecuta. Siempre que DartPad detecta que estás usando package:flutter, aparece un panel para mostrar la UI. O usa el menú Samples para encontrar un ejemplo de Flutter.

El menú de ejemplos de DartPad mostrando varios ejemplos de Dart y Flutter.

Características

#

Todas las librerías principales de Flutter, como cupertino y material, están disponibles para usar, y DartPad puede mostrar su documentación. Selecciona un símbolo para ver la documentación en el panel inferior.

Una animación que muestra la documentación del widget AppBar en el panel inferior de DartPad.

DartPad formatea código usando el formateador de Dart (dartfmt), ofrece asistencias, proporciona correcciones, sugiere auto-completados, y muestra errores y advertencias.

Una animación del soporte de autocompletado y asistencia de código de DartPad.

Cuando estés listo para compartir tu fragmento, puedes crear un GitHub gist y poner el ID del gist en una URL como esta: https://dartpad.dev/<GistID>. Puedes compartir este enlace en un reporte de bug, en una pregunta de StackOverflow, o en tu plataforma social preferida. Revisa la guía de compartir para más detalles.

También puedes embeber DartPad en una página, como en este codelab. Los DartPads embebidos son especialmente buenos para artículos, codelabs y tutoriales. (Revisa esta guía si te interesa usar DartPad en codelabs y tutoriales.) Para aprender más sobre cómo agregar DartPad a una página, revisa la guía de embebido.

¡Gracias!

#

DartPad es parte del proyecto de código abierto de Dart. Si has reportado issues o enviado cambios a DartPad, gracias por hacerlo mejor. Si te gustaría contribuir, empieza en github.com/dart-lang/dart-pad. Para aprender más sobre cómo ejecutar Flutter en la web, visita flutter.dev/web.

¡No podemos esperar a ver qué construyes!

Más de Dart