Bienvenido, soy Luis y hoy les traigo otro artículo.
Casi todas las cosas en Flutter son widgets. Los botones son widgets. Los textos son widgets. Incluso las animaciones son definidas por los widgets. Piensa en los widgets como bloques de Lego, la base de la cual se construyen todas las aplicaciones de Flutter.
La anatomía de un widget
En términos simples, los widgets son clases de Dart. Su trabajo es describir cómo Flutter debería pintar elementos en la pantalla. Por ejemplo, arriba hemos definido un BigButton, un widget sin estado, que pinta un botón elevado con texto.
Como se muestra en la línea 5, cada widget tiene un construir método. Esto toma un contexto como argumento y devuelve otro widget de su elección. Aquí, devolvemos un widget de ‘texto’ que muestra la frase ‘Haga clic en mí’.
Con estado vs Apátrida Widgets
En este punto, puede mirar la línea 3 y preguntarse qué queremos decir con StatelessWidget y por qué nuestro botón hereda de este widget. Hay dos tipos principales de widgets en Flutter: sin estado y con estado. Al igual que un componente de React, un widget con estado tiene un estado interno que se puede administrar.
En el ejemplo anterior, hemos creado un nuevo widget definiendo una nueva clase de Dart llamada ‘CounterWidget’ que se extiende desde ‘StatefulWidget’. Tenemos un código que incrementa un contador cuando hacemos clic en un botón. En la línea 15, establecemos el estado inicial del contador en 0 dentro del método ‘initState’.
El método initState () se llama cuando el widget monta el árbol. El método inicializa cualquier dato dentro del bloque antes de que Flutter intente pintar en la pantalla, como preparativos entre bastidores en un cine. En la línea 19, tenemos el método de construcción que toma el buildContext. BuildContext es responsable de rastrear dónde se encuentra un widget en el árbol de widgets. Por ejemplo, si llamaras Theme.of (buildContext) .primaryColour, primero encuentra lo que se encuentra en ese punto en el árbol de widgets. A continuación, toma el tema del widget y devuelve los datos guardados como primaryColour en la clase Theme.
La línea 29 es donde ocurre la magia. Para incrementar un contador, siempre debemos tener en cuenta el valor actual del contador antes de agregarle uno. El método setState () le dice a Flutter que ejecute todo el código en la devolución de llamada (en nuestro caso, línea 30), y entonces para volver a pintar los widgets que se basan en esta información (el widget de texto). Sin embargo, es importante tener en cuenta que el método setState no debe contener código asíncrono. Esto es para asegurarse de que los datos se resuelvan antes de que se vuelvan a pintar los widgets. Por lo tanto, el método initState () podría ser un mejor lugar para ejecutar esto o, en general, antes de establecer el estado.
¿Cómo se compara esto con un widget sin estado?
Por otro lado, un widget sin estado no tiene un estado interno: un widget ficticio con su propio conjunto de configuraciones. Sin embargo, utilizo la frase ficticia sin apretar. Un widget sin estado puede contener sus propios métodos y tener un conjunto de configuraciones que se le transmite desde su padre. La única diferencia es que un widget sin estado no puede cambiar sus propias configuraciones, no sin la ayuda de observables. Son inmutables.
Si intentáramos crear un contador con un widget sin estado, de la misma manera que un widget con estado, fallaría. En primer lugar, no hay un estado interno, por lo que el método setState no está disponible para nosotros, y el widget no se volvería a pintar para registrar cambios en un campo de instancia que debería ser final en una clase inmutable.
Gracias por leer este artículo.
Añadir comentario