Ir al contenido

Guía de Flutter para novatos - Miguel Páramos

FAQ sobre Flutter pal que no tiene ni idea de Flutter | 2º DAM · PMDM

Rendimiento inicial al compilar en Flutter Web (Chrome) vs. el flujo de desarrollo diario

Al compilar por primera vez una aplicación de Flutter en Google Chrome, es muy habitual percibir una demora notable y preguntarse si el desarrollo diario tendrá esa misma lentitud. Conviene tener claro que este tiempo prolongado solo ocurre durante el primer arranque y no representa el flujo de trabajo cotidiano.

¿Por qué tarda tanto la primera vez que lanzas la app?

Sección titulada «¿Por qué tarda tanto la primera vez que lanzas la app?»
  1. Compilación inicial completa: Flutter tiene que compilar absolutamente todo el código de tu aplicación y todo el framework de Flutter a JavaScript / WebAssembly (CanvasKit o Skwasm), además de empaquetar el motor gráfico.
  2. Descarga y configuración del SDK Web: La primera vez que compilas para la web, Flutter descarga y almacena en caché librerías internas nativas del compilador web de Dart.
  3. Arranque del servidor de desarrollo: Levanta un servidor web local y vincula las herramientas de depuración con Google Chrome.

¿Cómo es el flujo de trabajo a partir de ahora? (Extremadamente rápido)

Sección titulada «¿Cómo es el flujo de trabajo a partir de ahora? (Extremadamente rápido)»

A partir de este momento ya no tienes que esperar cada vez que modifiques tu código, gracias a dos funciones fundamentales:

  • No pares la app: Cuando hagas un cambio en el código (por ejemplo, cambiar un texto o un color en lib/main.dart), no detengas el programa ni vuelvas a pulsar F5. Mantén Chrome abierto y la app corriendo en segundo plano.
  • Hot Reload (Recarga en caliente): Guarda el archivo con Ctrl + S (o pulsa la tecla r en la terminal). El cambio se refleja en Chrome en menos de 1 segundo (0.2s - 0.5s) sin perder el estado de la pantalla ni reiniciar la app.
  • Hot Restart (Reinicio rápido): Si cambias la estructura de un constructor, el método main() o el estado inicial, pulsa el botón de reiniciar (la flecha circular verde en la barra superior de VS Code) o la tecla R mayúscula en la terminal. Reinicia la app en 1 o 2 segundos.

Solo volverá a tardar si cierras completamente la sesión de depuración (el botón cuadrado rojo ⏹) y la vuelves a lanzar desde cero con F5.