Stateful Widget, el que cambia

| | ,

Un stateful widget es un objeto de Flutter que puede cambiar su apariencia una vez creado. Un ejemplo sería una casilla o checkbox que el usuario pueda marcar o desmarcar:

stateful-widget-flutter

Por tanto, un stateful widget es dinámico y necesita tener asociado un estado, que podrá variar en función de las acciones que lleve a cabo el usuario. Al igual que hicimos con los widgets sin estado (stateless widgets), vamos a ver más en profundidad en qué consisten los stateful widgets y cómo se utilizan dentro de una app de Flutter. ¡Ah! Y si no tienes del todo claras las diferencias entre los stateful y los stateless widgets, quizás te interese revisar este artículo que escribí hace unos días.

Componentes de la clase de un stateful widget

Un widget con estado es un objeto de la clase StatefulWidget de Flutter y, como toda clase, tiene constructores, propiedades y métodos.

Constructores

El constructor de esta clase es el siguiente:

StatefulWidget({Key key})

Initializes key for subclasses.

const

Un poco más abajo, en este mismo artículo, te enseño a crear un stateful widget en la práctica. Ya verás lo simple que es.

Propiedades

Un widget con estado solo puede tener tres propiedades, que son las siguientes:

  • hashCode, que se usa para definir la identidad del widget.
  • key, que controla de qué manera un widget reemplaza a otro widget, dentro del árbol de widgets.
  • runtimeType, que es una representación del tipo de tiempo de ejecución del widget.

No te preocupes si no entiendes al 100% estas propiedades, porque en la práctica no es necesario que las modifiques.

Métodos

La clase StatefulWidget tiene varios métodos pero, para no extendernos demasiado, aquí solo comentaremos los dos más importantes:

  • El método createElement() crea un StatefulElement para controlar la localización de este widget dentro del árbol de widgets.
  • El método createState() crea el estado modificable del widget en una localización concreta dentro del árbol.

El resto de métodos están enfocados, en su mayoría, en tareas relacionadas con la depuración del código (debugging).

Stateful widget, en la práctica

La clase StatefulWidget no representa a un objeto en sí mismo, como puede ser un icono (widget de tipo Icon) o un texto (widget Text), sino que se usa para indicar que otro widget será dinámico y tendrá asociado un estado, es decir, que podrá cambiar su apariencia durante la ejecución del programa. Para ello, tenemos que hacer que dicho widget herede de la clase StatefulWidget. Con un ejemplo siempre se entiende mejor:

import 'package:flutter/widgets.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Container(color: const Color.fromARGB(0xFF, 0x42, 0xA5, 0xF5));
  }
}

Este es el esqueleto básico de una subclase llamada MyApp que hereda de la clase StatefulWidget. Vamos a analizarlo por partes:

  • Fíjate primero en la línea 8 del código: esta es la manera de indicar que la subclase MyApp hereda de la clase StatefulWidget (o, dicho de otra forma, “extiende” la clase StatefulWidget), es decir, que tendrá las características de un StatefulWidget.
  • En la línea 13, estamos creando una subclase llamada _MyAppState que hereda de la clase State. Esta subclase es el objeto que representa el estado asociado al widget MyApp en cada momento. Supongo que te habrá llamado la atención el guión bajo que hay delante del nombre de la subclase _MyAppState: en Flutter, se usa para indicar que la implementación del objeto State es privada, es decir, que este objeto solo puede ser instanciado por su correspondiente StatefulWidget.
  • En la línea 10, estamos definiendo el método genérico createState(), que asocia el objeto _MyAppState al widget MyApp.

Partiendo de este esqueleto, podemos crear todo tipo de widgets con estado: botones que cambian de color cuando el usuario los presiona, formularios que pueden estar vacíos o rellenos, etc. Para que esta publicación no se alargue más de la cuenta, dejo pendiente escribir un artículo con un ejemplo mucho más amplio del uso de un StatefulWidget en una app de Flutter.

Keep learning!

Anterior

Stateless Widget, el estático

Cómo rellenar valores nulos con la media de cada columna

Siguiente

Deja un comentario