Introducción a la UI declarativa

Esta introducción describe la diferencia conceptual entre el estilo declarativo utilizado por Flutter y el estilo imperativo utilizado por muchos otros frameworks de UI.

Los frameworks desde Win32 hasta la web, pasando por Android e iOS, suelen utilizar un estilo imperativo de programación de UI. Este podría ser el estilo con el que estés más familiarizado: donde construyes manualmente una entidad de UI con todas sus funciones, como una UIView o equivalente, y luego la modificas utilizando métodos y setters cuando la UI cambia.

Para aliviar la carga de los desarrolladores de tener que programar cómo transicionar entre varios estados de la UI, Flutter, por el contrario, permite al desarrollador describir el estado actual de la UI y deja la transición en manos del framework.

Esto, sin embargo, requiere un ligero cambio de mentalidad sobre cómo manipular la UI.

Considera un ejemplo simplificado a continuación:

En el estilo imperativo, normalmente irías al propietario de ViewB y obtendrías la instancia b utilizando selectores o con findViewById o similar, e invocarías modificaciones en ella (e implícitamente la invalidarías). Por ejemplo:

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

También es posible que necesites replicar esta configuración en el constructor de ViewB, ya que la fuente de verdad de la UI podría sobrevivir a la propia instancia b.

En el estilo declarativo, las configuraciones de vista (como los Widgets de Flutter) son inmutables y son solo "planos" (blueprints) ligeros. Para cambiar la UI, un widget activa una reconstrucción de sí mismo (lo más común es llamando a setState en los StatefulWidgets en Flutter) y construye un nuevo subárbol de Widgets.

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

Aquí, en lugar de modificar una instancia antigua b cuando la UI cambia, Flutter construye nuevas instancias de Widget. El framework gestiona muchas de las responsabilidades de un objeto de UI tradicional (como mantener el estado del diseño) detrás de escena con RenderObjectsRenderObjectUn objeto persistente en el framework de Flutter responsable del diseño, renderizado y las pruebas de impacto. Saber más. Un RenderObject es un objeto persistente y mutable que maneja el trabajo pesado de diseño, renderizado y pruebas de impacto. Los RenderObjects persisten entre fotogramas y los Widgets ligeros e inmutables de Flutter sirven como planos que le indican al framework que modifique los RenderObjects entre estados. El framework de Flutter se encarga del resto.