Soporte web para Flutter

Flutter ofrece las mismas experiencias en la web que en dispositivos móviles.

Basándote en la portabilidad de Dart, el poder de la plataforma web, la flexibilidad del framework de Flutter y el rendimiento de WebAssembly, puedes construir aplicaciones para iOS, Android y el navegador desde la misma base de código. La web es solo otro objetivo de dispositivo para tu aplicación.

Para empezar, visita Construir una aplicación web con Flutter.

Dart y Flutter pueden compilarse a WebAssembly, un formato de instrucciones binarias que permite aplicaciones rápidas en todos los navegadores principales.

Para echar un vistazo a los beneficios de usar WebAssembly, echa un vistazo al siguiente video.

Ver en YouTube en una pestaña nueva: "Novedades de Flutter - WebAssembly"

Agregar soporte web a Flutter implicó implementar la capa de dibujo principal de Flutter sobre las APIs estándar del navegador, además de compilar Dart a JavaScript, en lugar del código de máquina ARM que se utiliza para las aplicaciones móviles. Usando una combinación de DOM, Canvas y WebAssembly, Flutter puede proporcionar una experiencia de usuario portátil, de alta calidad y de alto rendimiento en los navegadores modernos. Implementamos la capa de dibujo principal completamente en Dart y utilizamos el compilador optimizado de JavaScript de Dart para compilar el núcleo y el framework de Flutter junto con tu aplicación en un solo archivo de código fuente minimizado que se puede desplegar en cualquier servidor web.

Aunque puedes hacer mucho en la web, el soporte web de Flutter es más valioso en los siguientes escenarios:

Aplicación de una sola página

El soporte web de Flutter permite que aplicaciones web independientes y complejas, ricas en gráficos y contenido interactivo, lleguen a los usuarios finales en una amplia variedad de dispositivos.

Aplicaciones móviles existentes

El soporte web para Flutter proporciona un modelo de entrega basado en el navegador para las aplicaciones móviles de Flutter existentes.

No todos los escenarios HTML son ideales para Flutter en este momento. Por ejemplo, el contenido estático, rico en texto y basado en flujo, como los artículos de blog, se beneficia del modelo centrado en documentos sobre el cual se construye la web, en lugar de los servicios centrados en aplicaciones que puede ofrecer un framework de UI como Flutter. Sin embargo, puedes usar Flutter para integrar experiencias interactivas en estos sitios web.

Sin embargo, si quieres usar Dart y deseas implementar un sitio web tradicional basado en DOM, a community-released Dart package, Jaspr, soporta sitios web estáticos; de hecho, los sitios web de la documentación de Dart y la documentación de Flutter y de marketing se migraron para usar el paquete Jaspr. Ten en cuenta que Jaspr utiliza Dart (pero no Flutter), y hace que el SEO funcione de la misma manera que lo haría en un sitio web tradicional.

Los siguientes recursos pueden ayudarte a empezar:

• Para agregar soporte web a una aplicación existente, o para crear una nueva aplicación que incluya soporte web, visita Construir una aplicación web con Flutter.
• Para configurar los ajustes del servidor de desarrollo web en un archivo centralizado, echa un vistazo a Configurar un archivo de configuración de desarrollo web.
• Para obtener información sobre los diferentes renderizadores web de Flutter (CanvasKit y Skwasm), consulta Renderizadores web.
• Para aprender a crear una aplicación de Flutter adaptable, consulta Crear aplicaciones adaptables.
• Para ver las preguntas y respuestas más frecuentes, visita las preguntas frecuentes sobre la web.
• Para ver ejemplos de código, consulta los ejemplos web para Flutter.
• Para ver una demostración de una aplicación web de Flutter, echa un vistazo a la aplicación Wonderous.
• Para aprender sobre cómo desplegar una aplicación web, visita Preparar una aplicación para el lanzamiento web.
• Reporta un problema en el repositorio principal de Flutter.
• Puedes chatear y hacer preguntas relacionadas con la web en el canal #help en Discord.