Introducción a la UI declarativa

Esta introducción describe la diferencia conceptual entre el estilo declarativo usado por Flutter y el estilo imperativo usado por muchos otros marcos de UI (User Interface).


¿Por qué una UI declarativa?

Los marcos de trabajo de Win32 a la web para Android e iOS suelen utilizar un estilo imperativo de la programación de la interfaz de usuario. Este puede ser el estilo con el que estés más familiarizado, donde creas una instancia de UI con todas las funciones, como una ImageView o equivalente, y luego la muta utilizando métodos y parámetros cuando cambia la UI.

Con el fin de aligerar la carga de los desarrolladores de tener que programar cómo hacer la transición entre varios estados de la interfaz de usuario, Flutter, por el contrario, le permite al desarrollador describir el estado actual de la interfaz de usuario y deja la transición al marco.

Esto, sin embargo, requiere un ligero cambio en el pensamiento de cómo manipular la UI.

Cómo cambiar la interfaz de usuario en un marco declarativo

Considere un ejemplo simplificado a continuación:

En el estilo imperativo, normalmente irá al propietario de ViewB y recuperará la instancia b utilizando los selectores o con findViewById o similar, e invocará las mutaciones en él (y la invalidará implícitamente). Por ejemplo:

// Imperative style
b.setColor(red)
b.clearChildren()
ViewC c3 = new ViewC(...)
b.add(c3)

Es posible que también deba replicar esta configuración en el constructor de ViewB, ya que la fuente de la verdad para la interfaz de usuario puede sobrevivir a la instancia b en sí.

En el estilo declarativo, las configuraciones de vista (como los Widgets de Flutter) son inmutables y solo son “planos” ligeros. Para cambiar la interfaz de usuario, un Widget desencadena una reconstrucción en sí mismo (más comúnmente al llamar a setState() en StatefulWidgets en Flutter) y construye un nuevo subárbol de Widget.

// Declarative style
return ViewB(
  color: red,
  child: ViewC(...),
)

Aquí, en lugar de mutar una instancia b antigua cuando cambia la interfaz de usuario, Flutter construye nuevas instancias de Widget. El
framework gestiona muchas de las responsabilidades de un objeto UI tradicional (como mantener el estado del diseño) detrás de escena con RenderObjects. Los RenderObjects persisten entre los marcos y los Widgets ligeros de Flutter le dicen al framework que mute los RenderObjects entre los estados. El
framework Flutter se encarga del resto.

Fuente: flutter.io

Sobre Gustavo Zimbrón 70 Artículos
Me apasiona la programación, los video juegos, viajar, la naturaleza, salir de party. Estoy inmerso en el mundo de la programación desde los 16 años, mas sin embargo, nunca se deja de aprender en este mundo. Trato de aprender algo nuevo cada día.

Sé el primero en comentar

Dejar una contestacion

Tu dirección de correo electrónico no será publicada.


*