Compilar y lanzar una aplicación web

Durante un ciclo de desarrollo típico, pruebas una aplicación usando flutter run -d chrome (por ejemplo) en la línea de comandos. Esto compila una versión debug de tu aplicación.

Esta página te ayuda a preparar una versión release de tu aplicación y cubre los siguientes temas:

• Compilar la aplicación para release
• Desplegar en la web
• Desplegar en Firebase Hosting
• Manejar imágenes en la web
• Elegir un modo de compilación y un renderizador
• Minificación

Compila la app para el despliegue utilizando el comando flutter build web.

flutter build web

Esto genera la app, incluyendo los assets, y coloca los archivos en el directorio /build/web del proyecto.

Para validar la compilación de lanzamiento (release build) de tu app, inicia un servidor web (por ejemplo, python -m http.server 8000, o utilizando el paquete dhttpd), y abre el directorio /build/web. Navega a localhost:8000 en tu navegador (dado el ejemplo del SimpleHTTPServer de python) para ver la versión de lanzamiento de tu app.

Es posible que necesites desplegar una compilación de perfilado (profile) o depuración (debug) para realizar pruebas. Para hacer esto, pasa la bandera --profile o --debug al comando flutter build web. Las compilaciones de profile están especializadas para el perfilado de rendimiento utilizando Chrome DevTools, y las compilaciones de debug se pueden usar para configurar dart2js para que respete las aserciones y cambie el nivel de optimización (usando la bandera -O).

Flutter web proporciona dos modos de compilación (por defecto y WebAssembly) y dos renderizadores (canvaskit y skwasm).

Para más información, consulta Renderizadores web.

Cuando estés listo para desplegar tu aplicación, sube el bundle de release a Firebase, la nube o un servicio similar. Aquí tienes algunas posibilidades, pero hay muchas otras:

• Firebase Hosting
• GitHub Pages
• Google Cloud Hosting

Puedes usar la Firebase CLI para compilar y lanzar tu aplicación Flutter con Firebase Hosting.

Para comenzar, instala o actualiza la Firebase CLI:

npm install -g firebase-tools

1. Habilita la vista previa de frameworks web en la CLI de Firebase orientada a frameworks:

   firebase experiments:enable webframeworks
   

   content_copy

2. En un directorio vacío o en un proyecto Flutter existente, ejecuta el comando de inicialización:

   firebase init hosting
   

   content_copy

3. Responde yes cuando se te pregunte si deseas usar un framework web.

4. Si estás en un directorio vacío, se te pedirá que elijas tu framework web. Elige Flutter Web.

5. Elige tu directorio de origen de hosting; esto podría ser una aplicación Flutter existente.

6. Selecciona una región para alojar tus archivos.

7. Elige si deseas configurar compilaciones y despliegues automáticos con GitHub.

8. Desplegar la aplicación en Firebase Hosting:

   firebase deploy
   

   content_copy

   Ejecutar este comando ejecuta automáticamente flutter build web --release, por lo que no tienes que compilar tu aplicación en un paso separado.

Para saber más, visita la documentación oficial de Firebase Hosting para Flutter en la web.

La web admite el Widget Image estándar para mostrar imágenes. Por diseño, los navegadores web ejecutan código no confiable sin dañar la computadora host. Esto limita lo que puedes hacer con las imágenes en comparación con las plataformas móviles y de escritorio.

Para más información, consulta Mostrar imágenes en la web.

Para mejorar el inicio de la aplicación, el compilador reduce el tamaño del código compilado eliminando el código no utilizado (conocido como tree shaking) y renombrando los símbolos de código a cadenas más cortas (por ejemplo, renombrando AlignmentGeometryTween a algo como ab). Cuál de estas dos optimizaciones se aplica depende del modo de compilación:

Consulta Embeber Flutter web.