El universo Flutter se expande en Google I/O 2019

The Expansion of Flutter Google I/O 2019
Flutter, Google I/O

El universo Flutter se expande en Google I/O 2019

Resumen sobre las novedades de Flutter

El Google I/O 2019 ha traido muchas novedades en torno al universo Flutter. Hemos tenido hasta cinco charlas en torno a esta tecnología en las que hemos podido conocer el camino que se ha marcado Google para hacer crecer Flutter, hemos visto las características que nos traen las nuevas versiones tanto de Flutter como de Dart y hemos podido aprender cómo usarlas en nuestros desarrollos.

El mensaje más relevante fue lanzado muy pronto, durante la keynote del primer dia, incluso antes de que se iniciara la primera conferencia del equipo de Flutter. Adam Seligman, VP Developer Relations en Google, anunció desde el escenario principal: “People love Flutter… we’re really pleased to announce something new today and that is a technical preview of Flutter for the web” 👏👏👏


Flutter 1.5

Es el gran anuncio en esta Google I/O respecto a Flutter “Flutter: a Portable UI Framework for Mobile, Web, Embedded, and Desktop“. La última versión viene con la intención de convertir a Flutter en un framework para desarrollar aplicaciones móviles, web, escritorios y entornos embebidos.

En la parte móvil viene con un gran número de actualizaciones en los widgets de iOS y Material Design, en los plugins y en las herramientas de desarrollo. Pero la actualización más importante es la compatibilidad con In-App-Purchase, disponible en beta para Android e iOS.

Flutter web se ha lanzado en revisión técnica, por lo que por ahora solo podemos experimentar con ella para ir desgranando su potencial. Google no pretende con este paso que Flutter remplace las actuales tecnología para desarrollo web, si no ofrecer un complemento para desarrollar componentes altamente interactivos y gráficamente ricos. Podemos encontrar mas información en https://flutter.dev/web. Además podemos ver un ejemplo desarrollado con Flutter web para el New York Times aquí.

Flutter está impulsando la plataforma de pantalla inteligente de Google, incluido Google Home Hub, ofreciéndonos nuestros primeros pasos hacia el soporte de aplicaciones de escritorio con Chrome OS. Esta parte está todavía en proyecto experimental y durante los próximos meses google seguirá trabajando para ofrecernos más información de los resultados.

Kenken es un Puzzle para The New York Times. El mismo código corre sobre Android, iOS, Web, Mac y Chrome OS

Material Design y mas allá…

Material Theming es un gran aliado para Flutter, guiándonos en el uso de componentes para personalizar interfaces de usuario. Y nos trae novedades que dan soporte para redondear o cortar esquinas y Dark Themes para reducir la luminosidad de la interfaz.

Esta incorporación del modo Dark es muy interesante, no solo por este nuevo soporte para Flutter, ya que Material Design ha incorporado en su guía Dark theme con pautas detalladas para que tengas una visión avanzada de cómo afecta a la UI.

Mas allá de modas, estas interfaces con baja luminosidad pueden aportar mejoras interesantes en muchos casos y conlleva una nueva interpretación de las interfaces, sobre todo desde el comportamiento de color y contraste, pero también de la elevación…

¿Recuerdas la teoría sobre la elevación de las superficies en los principios de Material?

Este principio se ha tenido que revisar para entender el comportamiento de las sombras sobre negros y grises para que se pueda percibir la elevación de los componentes. Es muy recomendable que revises el estudio sobre Elevation en Material Design antes de trabajar con Dark Theme.

En Widgets también se han presentado varias mejoras:

  • Sliders: ahora es mucho más facil personalizarlos con Slider Theme.
  • Bottom Navigation Bars: ahora las etiquetas son opcionales en Bottom Nav Bars, una de las peticiones mas solicitadas por la comunidad.
  • Floating Action Button: se ha facilitado la posibilidad de realizar una transición mas suave entre pantallas cuando se despliega un FAB.

Y también se han introducido nuevos componentes para Widgets:

  • Reorderable List View: se podrá reordenar un listado arrastrando elementos del listado.
  • New Slider Range: ahora puedes usar dos ‘thumbs’ en Sliders con un rango de valores.
  • Expanding Search Bar: mientras estamos escribiendo en la Search Bar podremos mostrar un hístórico de búsquedas o sugerencias.
Slider con dos ‘thumbs’ en un mismo rango de valores
Accesibilidad

Semantics es la librería de Flutter que nos ayudará implementar notables mejoras en la accesibilidad de nuestras aplicaciones. Esto nos permitirá un etiquetado mas cercano al lenguaje natural para casos de uso como el de las personas con limitaciones visuales que usan screen readers para describir el contenido en pantalla.

También se incorporan mejoras en las recomendaciones para el uso del ratio de contrastes (relativo a luminosidad o brillo en un color) en radio buttons, checkboxes y switches.

Contrast Ratios, los checkboxes y radio buttons de la derecha son más fáciles de ver

Material considera que el tamaño ideal para Touch Targets es de 48 x 48 pt, se han introducido test para evaluar la accesibilidad que podrás correr durante el test de tus widgets. Estos tests se encargarán de asegurarte si pasas estos controles de accesibilidad.

Adaptative UI

El equipo de Flutter ha introducido aquí un concepto de diseño muy interesante para adaptar la experiencia de uso a las diferentes plataformas a través de los Widgets.

Durante la presentación de ‘Beyond Mobile: Material Design, Adaptable UIs, and Flutter’ plantearon una teoría sobre la experiencia de interacción con diferentes pantallas según sean potencialmente pasivas o interactivas.

Pantallas como las de un tablet o un smartphone son mas interactivas, están en nuestras manos, pero otras cómo las de un tv o un smartwatch son menos interactivas… esto rompe el algoritmo adaptativo y requiere de otro tipo de procesos para adaptar la interacción a las diferentes pantallas.

Nuestra relación con las pantallas depende en mayor medida de la distancia de nuestros ojos al interactuar con las mismas, esto nos requiere no solo adaptaciones en textos también en el nivel de ‘pasividad’ de la navegación.

Por ejemplo, una app bar en el smartphone puede ser altamente interactiva mientras que en tv será altamente pasiva o un scroll vertical en smartphone puede tener mucho sentido mientras que en tv esto se rompe y pasaría a ser un scroll horizontal.

Para resolver este problema el equipo de Flutter demostró en vivo cómo se puede desplegar una misma app, con un mismo código base, en diferentes pantallas de un smartphone plegable, una tv y un smartwatch…

Pero lo realmente increible fue la demostración de lo que podrá ser una solución futura usando Firebase Machine Learning kit con Flutter, aún en fase experimental, donde la cámara de nuestro dispositivo detecta la cercanía que tenemos a la pantalla y adapta los componentes entendiendo que estás en una distancia más interactiva o pasiva. Wow! 🤯

Will Larche y Anthony Robledo mostrando el experimento Firebase ML Kit + Flutter

Dart 2.3

Con el anuncio de este lanzamiento, Dart se quiere convertir en el mejor lenguaje para desarrollo de UI de forma declarativa. La idea es que tengamos un control total sobre nuestra UI y que la implementación sea muy rápida, en parte, gracias al Hot Reloading. Además han rediseñado la página oficial https://dart.dev/.

De las características más interesantes que trae el la versión 2.3 de Dart son:

1. Spread operator (…)

Este operador nos permite incluir en un Widget de tipo listado como Row o Column diferentes listas de Widget sin tener que agruparlas en una sola. Mejor con un ejemplo:

List<Widget> fruits = [
Text("Plátano"),
Text("Manzana"),
Text("Naranja")
];

List<Widget> vegetables = [
Text("Tomate"),
Text("Zanahoria")
];

Tenemos dos listados de Widgets que queremos añadir a una columna. Anteriormente para añadirlo tendríamos que generar un solo listado y pasárselo a la propiedad children del widget Column. Pero con spread operator podemos hacer esto:

Column(
  children: [
    ...fruits,
    ...vegetables
  ],
),

2. Uso de if en colecciones

Podemos controlar qué se añade a un widget de tipo listado directamente en la definición de la colección

Column(
  children: [
    ...fruits,
    if(likeVegetables)
      ...vegetables
  ],
),

3. Uso de for en colecciones

De la misma forma que if podemos utilizar un for dentro de la colección para facilitar la implementación

List<String> names = ["Jose", "Salva"];

Column(
  children: [
    for(var name in names) Text("This member team is ${name}")
  ],
),

Además han añadido algunas mejoras en las herramientas de desarrollo como es la guía en el anidamiento de Widgets.


Bueno, como podéis ver la Google I/O ha venido cargada de noticias excitante para todo el equipo de Código Base y esperamos que este 2019 Flutter siga creciendo y madurando como el framework de referencia para el desarrollo de apps móviles desde una sola base de código.

Somos muchos los que hemos notado que Flutter ha estado presente en muchos momentos de este Google I/O y su equipo transmite en sus comunicaciones el entusiasmo de quienes quieren y saben que están construyendo algo ilusionante.

Kevin Moore es Product Manager para Flutter y Dart

¿Qué te ha parecido esta expansión de Flutter?

¿Qué te ha resultado más interesante?

Deja tu comentario y aprendamos juntos mas cosas de Flutter 😉

BONUS:

Hemos recogido todas las charlas sobre Flutter aquí: Qué se habló sobre Flutter en Google I/O 2019

El canal oficial en Youtube de Google Developers con todas las charlas por Topics.

Comentario (1)

  1. Carlos Macías
    05/07/2019 at 10:44

    Me ha parecido muy interesante todo, pero en especial me ha sorprendido la demo de adaptative UI con el smartphone plegable. Además, me parece muy buena iniciativa que ya estén dando las herramientas necesarias para poder hacer la app mucho más accesible con Semantics 🙂

    Este año Flutter va a dar mucho de que hablar!

Déjanos un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Suscríbete a nuestra Newsletter