Flutter para desarrollo web

Publicado el 5 abril, 2024 por Caronte Studio.  / Sin comentarios

Desarrollar aplicaciones multiplataforma es algo tedioso, ya que para cada plataforma tenemos que desarrollar un código prácticamente desde 0. Un código para aplicaciones Android, otro código para iOS, otro para una aplicación web… El trabajo para crear una sola aplicación se multiplica. Esto ha sido así hasta la llegada de Flutter en el 2017. En este artículo veremos qué es Flutter y cómo usarlo para desarrollo Web. 

¿Qué es Flutter?

Flutter es un framework de código abierto de Google. Cuenta con su propio lenguaje de programación “Dart”. Dart es un lenguaje compilado orientado a objetos. Está diseñado para ser fácil de aprender y usar.

 El objetivo de Flutter es agilizar y facilitar el desarrollo de aplicaciones en multiplataforma, ya que con un solo código base es capaz de crear aplicaciones nativas para cada una de las plataformas, desde Android o iOS, hasta aplicaciones Web o de escritorio. Actualmente, es compatible con iOS, Android, web, Windows, MacOS y Linux.

El componente básico de Flutter es el widget, que a su vez puede estar formado por otros widgets. Este describe su lógica, diseño y comportamiento. Pueden seguir tanto el diseño de Google o el de Cupertino de Apple. De esta manera, la aplicación pasa a tener un diseño unificado sea cual sea su sistema operativo. También cuenta con paquetes para cambiar el estilo del widget según el sistema, no olvides mirar la lista completa de widgets. 

Flutter para desarrollo web

Flutter inicialmente era solo para aplicaciones móviles, pero desde 2021 cuenta con compatibilidad para web: Flutter Web. Usa la misma tecnología que Flutter base, incluido su lenguaje de programación Dart.

Puedes usarlo para construir SPA (Single-Page Application) con los Flutter HTML widgets. También para construir PWA (Progressive Web Applications) para combinar las tecnologías web con las de aplicaciones móviles.

Pero, ¿por qué usarlo para web? ¿Qué ventajas ofrece? Este framework optimiza automáticamente el código para mayor velocidad y mejor uso de memoria. Además, incluye diversas funcionalidades para mejorar la seguridad y proteger los datos del usuario de ataques maliciosos. La ventaja más significativa es el código único. Al tener un solo código para la web y las aplicaciones, el mantenimiento es mucho más sencillo, ya que solo hay que mantener un código. El desarrollo también es significativamente más rápido, ahorrando el tener que escribir un código por cada plataforma.

Componentes y estilos

Como se ha mencionado previamente, funciona por componentes, y estos componentes tienen su estilo, comportamiento y lógica. Definiremos nuestros elementos de la web como widgets, por ejemplo un campo de texto será un Text. A este Text podemos aplicarle el estilo directamente, cambiarle el color, la fuente, alinearlo…

HTML y CSS:

<div class="caja-texto">  Lorem ipsum</div>
.caja-texto {    background-color: red;    width: 320px;    height: 240px;    font: 900 24px Roboto;    text-align: center;}

Flutter Dart:

final container = Container(  width: 320,  height: 240,  color: Colors.red,  child: const Text(    'Lorem ipsum',    style: TextStyle(      fontFamily: Roboto,      fontSize: 24,      fontWeight: FontWeight.bold,    ),        textAlign: TextAlign.center,   ),);

Los widgets de Flutter nos aportan diversas ventajas. Por ejemplo, tenemos el widget Center, que nos centra el elemento vertical y horizontalmente. Para centrar un elemento, basta con envolverlo en el componente y este se encargará de centrarlo.

HTML y CSS:

<div class="caja-centrar">  Lorem ipsum</div>
.caja-centrar{    display: flex;    align-items: center;    justify-content: center;}

Flutter Dart:

final container = Container(  child: Center(    child: Text(      'Lorem ipsum',      style: bold24Roboto,    ),  ),);

Bases de datos 

Es de Google, por lo que tiene conexión con Firebase, pero esto no implica que no puedas conectarte a otras. Es más, puedes conectarte fácilmente con cualquier base de datos, SQL y NoSQL mediante plug-ins.

Código nativo

Una vez tenemos el código terminado y lo hemos probado en el navegador, podemos convertir el código a nativo. Esto es muy fácil, ya que con un simple comando tendremos nuestro código.

flutter build web --release

Con este simple comando, Flutter genera una carpeta build/web donde pondrá todo el código nativo para web.

Ejemplos

Calcut es una web donde los estudiantes pueden llevar un registro y cálculo de sus créditos universitarios. Está construida completamente con este SDK.

Reflectly es un diario con inteligencia artificial que analiza patrones de emociones y comportamiento. La web que vemos está construida con Flutter.

Flutter Gallery es una biblioteca de ejemplos, snippets y aplicaciones de Flutter. El código de esta web es abierto, lo que puede ser interesante para nuevos programadores de este kit de desarrollo. 

Conclusión

Flutter lleva poco tiempo entre nosotros, pero avanza a pasos agigantados y está cada vez más presente en el mercado. Aunque en un principio estuviese enfocado para aplicaciones móviles, se están llevando a cabo muchos avances en el sector web y evoluciona muy rápido. Por todo esto, conviene tenerlo presente y estar atentos a este poderoso framework.