Flutter para la Web

Hola a todos, les traigo un pequeño artículo sobre cómo crear nuestra primera aplicación web con Flutter.

Como vimos en los eventos pasados, el Flutter Live (04 de diciembre del 2018) que anunciaron el HummingBird y el Google I/O 2019 (07 de mayo del 2019) que finalmente se anuncio Flutter para la Web.

Nota: el IDE con el que trabajo es el IntelliJ IDEA y doy por un hecho de que ya lo tienes instalado y configurado para trabajar con Flutter.

Limitaciones

Tenemos la intención de admitir completamente toda la funcionalidad y la API de Flutter en los navegadores modernos. Sin embargo, durante esta vista previa, hay una serie de excepciones:

• flutter_web aún no tiene un sistema de complementos. Temporalmente, brindamos acceso a dart: html, dart: js, dart: svg, dart: indexed_db y otras bibliotecas web que le brindan acceso a la gran mayoría de las API del navegador. Sin embargo, se espera que estas bibliotecas sean reemplazadas por una API de complemento diferente.
• No todas las API de Flutter están implementadas en Flutter para web aún.
• El trabajo de rendimiento apenas está comenzando. El código generado por Flutter para web puede ejecutarse lentamente o mostrar un “jank” significativo en la interfaz de usuario.
• En este momento, las interacciones de la interfaz de usuario de escritorio no están completamente completas, por lo que una interfaz de usuario creada con flutter_web puede parecer una aplicación móvil, incluso cuando se ejecuta en un navegador de escritorio.
• El flujo de trabajo de desarrollo solo está diseñado para funcionar con Chrome en este momento.

Soporte del navegador

Flutter para web proporciona:

• un compilador de producción de JavaScript que genera código optimizado y minimizado para la implementación
• un compilador de JavaScript de desarrollo, que ofrece compilación incremental y hot restart
  
  Cuando se construyó con el compilador de producción, Flutter admite navegadores basados en Chromium y Safari, tanto en computadoras de escritorio como móviles. También pretendemos ser totalmente compatibles con Firefox y Edge como plataformas específicas, pero nuestra propia cobertura de prueba aún es baja en estos navegadores. Nuestra intención es apoyar la versión actual y las dos últimas publicaciones principales. Se agradece la retroalimentación sobre problemas de rendimiento y rendimiento en todos estos navegadores.

El soporte de Internet Explorer no está planeado.

El compilador de desarrollo actualmente solo admite Chrome.

Muestras

Echa un vistazo a flutter.github.io/samples.

Algunos requisitos antes de empezar

• Debes tener instalados los plugins de Flutter y Dart actualizados (en mi caso para este momento tengo la versión 35.3.3 para Flutter y la versión 191.7141.49 para Dart).
• Debes tener instalados los SDK’s de Flutter(versión 1.5) y Dart(versión 2.3).
• Además, asegúrese de agregar las rutas de los SDK’s de Flutter y Dart en el PATH.

Iniciemos

Primero que nada hay que agregar una ruta más al PATH, en este caso sería $HOME/flutter/.pub-cache/bin en el archivo .bashrc.

Primer proyecto web

En la ventana inicial de IntelliJ debes dar click en la opción “Crear nuevo proyecto”.

Se abrirá la ventana de Nuevo proyecto, en la que seleccionarás las opciones Dart en el panel izquierdo y luego la opción Flutter Web App. Preciona el botón siguiente.

Aparecerá otra ventana en la que indicarás el nombre del proyecto y la ruta del directorio en donde se va a crear el nuevo proyecto y por último presiona el botón de finalizar.

Listo!! ahora se creará el nuevo proyecto.

Ahora que ya se ha creado el proyecto, debes abrir la terminal del IDE y digitar el siguiente comando para activar el paquete webdev:

$ flutter packages pub global activate webdev

Debes esperar unos segundos a que el comando resuelva algunas dependencias y active el webdev.

Ahora que webdev se encuentra activado, puedes escribir en la terminal del IDE el siguiente comando:

$ webdev serve

Cuando ejecutas el comando, se mostraran varias líneas en la terminal, una de ellas dice Serving web on http://localhost:8080 y darás click sobre el enlace del localhost:8080 para mostrar la vista en el navegador.

También puedes presionar el botón Ejecutar en la barra de herramientas de IntelliJ y utilizará la herramienta de línea de comandos webdev para construir y ejecutar su aplicación; debería abrirse una nueva ventana de Chrome que muestra tu aplicación en ejecución.

Genial!! Está en la web. Mira esto:

Por último, si utilizas el comando webdev serve y haces cambios en el código, debes actualizar (tecla F5) la vista en el navegador para ver los cambios.

Para usar webdev con hot-reload , ejecuta el siguiente comando en la terminal de tu IDE:

$ webdev serve --auto restart

Bueno, esto sería todo por el momento y espero que este artículo te ayude a crear tus propios proyectos web en Flutter.

Les comparto el enlace del repositorio de códigos para Flutter para web.

Leer algunas de mis traducciones recientes de artículos sobre Flutter.

Google Maps en Flutter

Llaves! ¿Para que son buenas?

Cero a Uno con Flutter

Flutter: Push, Pop, Push

Si este artículo te ayudo en algo incluso en una o dos cosas, aplauda tantas veces como pueda para mostrar su apoyo. 👏

Soy Eduardo Coto. Técnico de computadoras y desarrollador de aplicaciones Flutter.
Puedes encontrarme en GitHub
Sígueme en Twitter.

Comunidad Flutter