DartPad

DartPad es una herramienta de código abierto que te permite jugar con el lenguaje Dart en cualquier navegador moderno. Muchas páginas de este sitio tienen DartPads incrustados. Para abrir DartPad como una página web independiente, visita el sitio de DartPad (dartpad.dev).

Así es como se ve DartPad cuando está configurado para ejecutar Dart:

DartPad soporta las librerías core dart:* marcadas como multiplataforma. Al escribir aplicaciones Flutter, DartPad también soporta las librerías package:flutter y dart:ui.

DartPad no admite la carga diferida ni el uso de paquetes del repositorio de paquetes pub.dev a excepción de los paquetes soportados actualmente.

Para familiarizarte con DartPad, prueba a ejecutar algunos ejemplos y crear una aplicación sencilla de línea de comandos.

1. Ve a DartPad.

   El código Dart aparece a la izquierda, y un espacio para la salida aparece a la derecha.

2. Elige un ejemplo de Flutter como Sunflower, usando el botón Samples en el menú superior.

   El resultado renderizado aparece a la derecha.

Para crear una aplicación de línea de comandos sencilla, comienza creando un fragmento nuevo:

1. Haz clic en el botón New, y confirma que quieres descartar los cambios del pad actual.

2. Haz clic en la entrada con el logo de Dart.

3. Cambia el código. Por ejemplo, cambia la función main() para que contenga este código:

   dart

   for (final char in 'hello'.split('')) {
     print(char);
   }
   

   content_copy

   A medida que escribes, DartPad muestra consejos, documentación y sugerencias de autocompletado.

4. Haz clic en el botón Format.

   DartPad utiliza el formateador de Dart para asegurar que tu código tenga la indentación, los espacios en blanco y el ajuste de línea adecuados.

5. Ejecuta tu aplicación.

6. Si no tuviste ningún error mientras introducías el código, prueba a introducir un error.

   Por ejemplo, si cambias split por spit, obtendrás advertencias en la parte inferior derecha de la ventana. Si ejecutas la aplicación, aparecerá un error de compilación en la consola.

Las características del lenguaje y las APIs que soporta DartPad dependen de la versión del Dart SDK que DartPad esté utilizando actualmente. Puedes encontrar esta versión del SDK en la parte inferior derecha de DartPad.

Puedes incrustar DartPad dentro de páginas web, personalizándolo para adaptarlo a tu caso de uso. Por ejemplo, el tutorial de futures contiene varios DartPads incrustados etiquetados como ejemplos y ejercicios.

Para detalles técnicos sobre cómo incrustar DartPads, consulta la guía de incrustación de DartPad.