Probando FlutterWeb en windows primera parte

Flutter para web es una implementación de Flutter compatible con código que se procesa utilizando tecnologías web basadas en estándares: HTML, CSS y JavaScript. Con Flutter para web, puede compilar el código existente de Flutter escrito en Dart en una experiencia de cliente que se puede incrustar en el navegador e implementar en cualquier servidor web.

Puede utilizar todas las funciones de Flutter, y no necesita un complemento de navegador.

Flutter para web está disponible actualmente como una vista previa técnica.

Echa un vistazo al repositorio para obtener instrucciones sobre cómo empezar.

Agregar soporte web implica implementar la capa de dibujo principal de Flutter sobre las API de navegador estándar. Al usar una combinación de DOM, Canvas y CSS, podemos ofrecer una experiencia de usuario portátil, de alta calidad y con un rendimiento excelente en los navegadores modernos. Implementamos esta capa de dibujo principal completamente en Dart y utilizamos el compilador de JavaScript optimizado de Dart para compilar el núcleo y el marco de Flutter junto con su aplicación en un único archivo fuente minificado que se puede implementar en cualquier servidor web.

En esta primera etapa de desarrollo, prevemos que Flutter para la web sea valioso en muchos escenarios. Por ejemplo:

• Una aplicación web progresiva conectada construida con Flutter. El soporte web para Flutter permite que las aplicaciones basadas en dispositivos móviles se empaquen como un PWA para llegar a una variedad más amplia de dispositivos, o para proporcionar una experiencia web complementaria a una aplicación existente.
• Contenido interactivo incrustado. Flutter proporciona un entorno potente para crear componentes ricos centrados en datos que se pueden alojar fácilmente dentro de una página web existente. Ya sea para visualización de datos, una herramienta en línea como un configurador de automóviles o un gráfico integrado, Flutter puede proporcionar un enfoque de desarrollo productivo para contenido web incorporado.
• Incrustar contenido dinámico en una aplicación móvil de Flutter. Una forma establecida de proporcionar actualizaciones de contenido dinámico dentro de una aplicación móvil existente es el uso de un control de vista web, que puede cargar y mostrar información de forma dinámica. El soporte que Flutter ofrece ahora para un entorno unificado para contenido web y móvil le permite desplegar contenido en línea o incrustado en una aplicación sin tener que volver a escribir.

Como habras podido notar en esta primera parte comparto exactamente la información proporcionada en la pagina oficial de flutter

Flutter for web

Ahora a traves de 2 proyectos simples podre mostrarte como funciona flutter para web.

Lo primero que quisiera mostrar es que flutter funciona totalmente response tanto cuando depurar con vista de dispositivo móvil como web

En este proyecto lo que realizaremos sera una pagina como esta.

Una nota importante es que debes de tener en cuenta que las funcionalidades no son para nada de modo productivo, y solo estamos en un modo de prueba que estará constantemente evolucionando.

Lo primero es que te vayas al sitio del repositorio https://github.com/flutter/flutter_web

y de este sigas los pasos para ocupar Flutter web

Flutter 1.5 y superior permiten el soporte para apuntar a la web con Flutter, incluida la compilación de Dart a JavaScript. Para utilizar el SDK de Flutter con la flutter_webvista previa, asegúrese de haber actualizado Flutter al menos v1.5.4ejecutando flutter upgradedesde su máquina. Si está desarrollando activamente Flutter para web, puede preferir estar ejecutando desde uno de los canales inestables. Nuestra wiki describe los canales de Flutter y cómo seleccionar el adecuado para sus necesidades.

Ejecuta los comandos respectivos desde tu terminal bash o cmd de windows en modo administrador

Fijate que cumplas los requisitos

Instalar las herramientas de construcción flutter_web

Para instalar el webdevpaquete , que proporciona las herramientas de compilación para Flutter para web, ejecute lo siguiente:

$ flutter pub global activate webdev

Este es un punto importante antes de realizar el comando anterior debes ir a visual studio code y crear un nuevo proyecto web y desde la terminal en la raiz de este proyecto ejecutar el comando (por lo menos en windows así me pudo funcionar).

Si por alguna razón no te aparece esta opción debes ejecutar flutter doctor desde tu terminal y revisar que tengas las versiones anteriormente mencionadas

Al crear el proyecto le pondremos un nombre en este caso flutterportafolio (recuerda ocupar minúsculas) (podría ser el que ustedes quisieran).

Selecciona una carpeta para tu proyecto

Luego de lo anterior debiera crearte el directorio completo de la aplicación flutter, tal como se visualiza a continuación

Ahora en la terminal ejecuta el comando $ flutter packages upgrade , con esto verificaremos que tengamos las últimas versiones.

En mi caso tengo la primera

Una vez realizado esto ejecuta el comando siguiente, que es quien se encarga de compilar y ejecutar nuestra app en el navegador

webdev serve

En mi caso como estoy en windows no funciono el comando y aun estoy buscando la explicación (si alguien sabe la respuesta lo puede comentar)

Para solucionar lo anterior y leyendo la documentación reemplace el comando por la alternativa directa.

$ flutter pub global run webdev serve

Puedes presionar ctrl + click sobre link o abrir directamente en chrome (Recuerda por el momento solo funciona en Chrome)

Ahora en tu navegador debieras ver lo siguiente

Ahora el ejemplo lo dejare para un segundo post para que veamos que podemos realizar en la web.

Donate to devjaime