Anunciando soporte de paquetes para DartPad

Hoy estamos emocionados de anunciar que el soporte de paquetes ya está disponible en DartPad! DartPad es el playground de código abierto basado en web que ejecuta apps de Dart y Flutter directamente en tu navegador. Te permite ejecutar rápidamente código Dart para probar una idea o programar un concepto técnico sin necesidad de instalar el SDK de Flutter o cualquier herramienta en tu sistema local.

Desde el lanzamiento de DartPad, una de las peticiones más populares ha sido añadir soporte para importar paquetes, como Google Fonts o Firebase Authentication, directamente en el editor de DartPad. En esta primera fase del lanzamiento, puedes importar desde un conjunto de paquetes populares.

Para ayudarte a comenzar, hemos creado varios ejemplos nuevos que puedes encontrar usando el menú de Samples de DartPad.

Comienza a usar un paquete añadiendo una declaración de import para él en la parte superior del editor de código. Por ejemplo, para usar el paquete de Google Fonts, añade esto:

import 'package:google_fonts/google_fonts.dart';

DartPad maneja los detalles del pubspec por ti, así que todo lo que necesitas es la declaración de import. Puedes usar las completaciones sugeridas para cambiar fuentes y luego volver a ejecutar la app, tal como lo harías en un IDE.

Aquí hay un resumen rápido de cómo funciona el soporte de paquetes en DartPad. El servidor de DartPad toma el conjunto de paquetes soportados y usa **flutter pub get** para obtener la última versión compatible de cada paquete. Luego el servidor usa estas versiones de paquetes durante el análisis y compilación de tu script de DartPad.

Este lanzamiento también soporta los paquetes más populares de Firebase, así que puedes acceder a un conjunto de servicios backend sin salir de DartPad. Todos los SDK de JavaScript de Firebase necesarios se cargan en el panel de salida antes de ejecutar la app compilada.

Aquí hay una app de chat sencilla que usa Firebase:

Esta app de chat multiusuario está implementada con solo código Dart del lado del cliente ejecutándose (y escrito) en el navegador, y usa la base de datos Firestore para compartir mensajes entre usuarios. Aunque puede parecer peligroso abrir tu base de datos directamente a los usuarios, en realidad está asegurada permitiendo solo mensajes de chat que usan un conjunto muy específico de palabras. Lee los comentarios en el código para saber más sobre cómo funciona.

Para expandir la app de chat, podrías implementar inicio de sesión para identificar quién dijo qué añadiendo Firebase Authentication. Planeamos añadir muchas más funciones de Firebase para expandir lo que puedes hacer con Firebase en DartPad.

Esta primera fase del lanzamiento soporta un conjunto definido de paquetes populares. Para ver qué paquetes están disponibles (y en qué versión), haz clic en el ícono de información en la esquina inferior derecha de la pantalla.

Prueba el soporte de paquetes de DartPad hoy en dartpad.dev, y comparte cualquier comentario con nuestro equipo. Continuaremos expandiendo la lista de paquetes soportados con el tiempo. Si tienes alguna preferencia sobre qué paquetes te gustaría ver añadidos, busca el issue que contiene el nombre del paquete deseado, y dale una reacción de 👍 "pulgar arriba". Si no hay un issue para el paquete que quieres, por favor crea un issue y pon el nombre del paquete en el título.

Esperamos que el soporte de paquetes en DartPad te empodere para construir y mostrar tus diseños, ideas, viñetas y más de Flutter. ¡Estamos ansiosos por ver qué construyes a continuación!