Flutter: árbol de widgets y árbol de elementos

Como sabemos, la interfaz de usuario de una aplicación cuando se diseña en Flutter contiene un conjunto de widgets. Eso significa que toda la aplicación está configurada para estar hecha de widgets. Un widget describe cómo se vería la vista de la aplicación en el estado dado. 

Ahora, como la interfaz de usuario contiene varios widgets, esos varios widgets se combinan para formar un árbol de widgets. Ahora, para cada widget que crea el usuario, el marco de flutter crea un elemento simultáneamente, por lo que ahora estos elementos, cuando se combinen, se llamarán árbol de elementos. 

Eso significa que el árbol de widgets tiene toda la configuración de widgets y el árbol de elementos tiene todos los widgets representados en la pantalla. Hay un árbol más llamado árbol de renderizado, pero el usuario no tiene que interactuar con él. El árbol de renderizado es básicamente un diseño de bajo nivel, un sistema de pintura que hereda de los objetos de renderizado. No necesitarás heredar directamente al árbol de representación y estarás interactuando con los widgets.

Ahora el árbol de widgets también se puede dividir en 2 árboles pequeños según el widget que el usuario haya elegido para su código.

1. Árbol de widgets sin estado
2. Árbol de widgets con estado

WIDGET SIN ESTADO Y ÁRBOL DE ELEMENTOS:

El widget sin estado es el widget que utiliza el usuario para crear una aplicación no dinámica. Un widget sin estado está formado por una combinación de varios widgets pequeños. Cada widget que se cree aquí tendrá un elemento sin estado correspondiente. Por lo tanto, varios widgets combinados bajo widgets sin estado se denominarán árboles de widgets sin estado y los elementos correspondientes formarán un árbol de elementos. Flutter usa el método createElement para crear los elementos. Cada elemento creado tendrá una identificación única asignada por el back-end de flutter.

El siguiente es el código de muestra:

class TextList extends StatelessWidget {
  @override
  Widget build(BuildContext context){
    return Row(
      children: <Widget>[
        Icon(),
        Text(),
      ],
    );
  }
}

Aquí, en este código, hemos creado una clase simple llamada TextList que amplía el widget sin estado, que contiene varios otros widgets como fila, icono y texto. Para cada widget en este árbol de widgets, se crea un elemento sin estado y la combinación de estos elementos lo convierte en un árbol de elementos.

WIDGET CON ESTADO Y ÁRBOL DE ELEMENTOS:

Un widget con estado es un widget que utiliza el usuario para crear una aplicación dinámica. El widget con estado también funciona de manera similar al widget sin estado, pero aquí, cuando el marco llama al método createElement , se crea un objeto de estado. La razón detrás de la creación del objeto de estado es que, dado que tiene que ser una aplicación dinámica, los estados cambiarían sin dañar el estado anterior y mejorando el rendimiento.

Hacemos uso del método setState para establecer los nuevos valores de datos o para actualizar los objetos de estado.

setState ( ( ) {
   name = _newvalue;
});

El siguiente es el código de ejemplo: –

class _TextListState extend State<TextList> {
  String note = 'Trip A';
  void _onPressed() {
    setState( () {
      note = 'Trip B';
    });
  }
    
  @override
  Widget build (BuildContext xontext){
    return Column(
      children : <Widget> [
        Icon();
        Text('$note),
        FlatButton(
         onPressed : _onPressed,
        ),
      ],
    );
  }
}

Aquí en este código, hemos creado la clase _TextListState que extiende el estado TextList . Hemos usado el método setState porque tenemos que mantener el estado inicial en el árbol de elementos incluso después de cambiar el estado.