Crea tu primer sitio WEB con Flutter

Esta nueva tecnología desarrollada por Google es una de las que más me ha gustado, por su robustez y también por su flexibilidad a la hora de diseñar las interfaces. El código cuando se sabe repartir resulta bastante claro. Algo más que me parece interesante, es el hecho de que podemos programar aplicaciones móviles para Android y para iOS, también para hacer páginas web. Esto es lo que veremos hoy.

Para empezar debo aclarar que esta función de Flutter Web es experimental, así que está en fase beta, sin embargo es funcional. Para conocer más al respecto podemos consultar la documentación oficial de Flutter. Por el momento está en inglés, es por eso que hago este tutorial, para que también puedas hacerlo en español.

Requisitos previos de instalación

Antes que nada, debemos instalar Flutter (como debes haber imaginado desde el principio), aquí les dejo un link para que puedas hacerlo sin problemas en caso de no tenerlo instalado ya. Instalando Flutter. Una vez lo tengamos instalado vamos a lo siguiente, a configurar nuestro soporte para web. Ah, también necesitan tener Chrome, ya que para el desarrollo se vuelve necesario.

Empezamos a configurar

En nuestra consola vamos a ejecutar los siguientes comandos:

flutter channel beta
flutter upgrade
flutter config --enable-web

Con esto lo que estamos haciendo es habilitando la funcionalidad web de Flutter y actualizando a la versión más actualizada de Flutter. (para que actualice correctamente el origin point debe apuntar a «https://github.com/flutter/flutter.git » así que si falla en ese punto debes ajecutar el siguiente comando para configuar el origin point:

$ cd <inside local copy of the flutter/flutter repo>
$ git remote get-url origin https://github.com/flutter/flutter.git

Cuando los comandos sean ejecutados correctamente debes reiniciar tu IDE de programación o tu editor de texto. Además cuando ejecutemos el comando «flutter devices» podemos ver nuestro Chrome en la lista, si lo ves, entonces todo va muy bien. Podemos seguir los siguientes pasos.

Creando el proyecto

Ahora que todo está configurado vamos a comenzar a crear nuestra primer página web con Flutter. Para ello hacemos una carpeta donde vamos a crear nuestro proyecto, luego, desde la consola nos ubicamos en esa carpeta y ejecutamos el siguiente comando:

flutter create myapp

Con este comando vamos a crear nuestro proyecto, se va a crear la plantilla por defecto de Flutter. Al igual que en todos los Frameworks de programación modernos. En el caso de Flutter es un simple contador de pulsaciones que contiene un botón flotante y en el centro el número de pulsaciones, es un clásico.

Una vez creado el proyecto, navegamos a la carpeta con un «cd myapp» y estando en la carpeta del proyecto, ejecutamos el siguiente comando para ejecutarla y que corra en el navegador web, en este caso, Chrome.

flutter run -d chrome

Va a descargar los archivos necesarios para agregar el SDK Flutter Web, esto lleva poco tiempo, digamos que es solo un proceso, también se ejecuta una única vez. La próxima vez que corramos el proyecto no será necesario esta descarga.

Después de eso Flutter creará un servidor web en la dirección «http://localhost:50175/#/» y podrás ver tu aplicación corriendo en el navegador. Si has trabajado con Angular o con un servidor Wamp de PHP nos va a parecer muy familiar.

Para terminar la aplicación solo nos ubicamos en la consola y presionamos la tecla «q». La ventana del navegador se cerrará y el servidor se detendrá. Funciona básicamente como un emulador de dispositivo móvil, podremos volver a levantar el servidor cuando queramos. Cuando programaremos lo hacemos en Dart, como lo hacemos normalmente.

Crear la aplicación para producción

Una vez que tengamos lista nuestra aplicación hecha en Flutter, necesitamos crear el bundle nativo para la web, ya saben, con archivos HTML, CSS y Javascript. Funciona prácticamente igual que lo hace Angular (interesante el hecho que ambos están hechos por Google). Así que para crear el bundle ejecutable usamos el comando:

flutter build web

Esto nos generará los archivos necesario que subiremos a nuestro servidor web. Ya saben, el archivo index es el primero que se ejecutará y debe quedar en la carpeta public_html. Bueno, este ya es otro tema.

Espero que les haya servido este artículo. Parece que Google le está apuntando a ser el principal proveedor de software de programación. Si lees el artículo sobre Flutter: Ventajas de aprender esta tecnología conocerás los planes que tiene Google para los próximos años.

Un abrazo y hasta la próxima.