Stateless Widget, el estático

| | ,

Un stateless widget de Flutter es un widget que, una vez creado, no cambiará. Un ejemplo podría ser un fragmento de texto informativo que muestres en tu app: dará igual que el usuario lo pulse o trate de interactuar con él, porque no se verá afectado. Por tanto, el estado de un stateless widget siempre será el mismo y no tendrá ningún objeto asociado de tipo State, al contrario que los stateful widgets. Si quieres profundizar en las diferencias entre stateless y stateful widgets, te recomiendo que le eches un vistazo a mi artículo Stateless vs Stateful.

Tras esta breve introducción, vamos a ver con más profundidad en qué consiste un stateless widget y cómo podemos utilizarlo dentro de una app de Flutter.

Componentes de la clase de un stateless widget

Lo primero que necesitas conocer es la clase que le corresponde a un widget sin estado en Flutter: la StatelessWidget. Esta será, por tanto, la clase que tendrás que utilizar si quieres crear un widget de este tipo dentro de tu app.

Como toda clase, tiene constructores, propiedades y métodos.

Constructores

Esta clase cuenta con el siguiente constructor:

StatelessWidget({Key key})

Initializes key for subclasses.

const

Crear un objeto de tipo stateless con este constructor es muy sencillo. Puedes ver un ejemplo práctico en el siguiente apartado de este mismo artículo.

Propiedades

Un widget sin 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.

Si te están sonando un poco a chino, no te preocupes, realmente en la práctica no te hará falta manipularlas.

Métodos

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

  • El método build(BuildContext context) describe la parte de la interfaz de usuario que está representada por este widget. Flutter llama a este método cuando el widget se inserta en el árbol de widgets dentro de un determinado contexto y cuando las dependencias del widget cambian.
  • El método createElement() crea un StatelessElement para controlar la localización de este widget 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).

Stateless widget, en la práctica

La clase StatelessWidget 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 no tendrá estado, es decir, que no cambiará durante la ejecución del programa. Para ello, tenemos que hacer que dicho widget herede de la clase StatelessWidget. Vamos a verlo con un ejemplo:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: Center(child: Text("Texto central")),
      )
    );
  }
}

Hemos creado una MaterialApp (una app que sigue los principios del Material Design) muy básica. Concretamente, fíjate en la línea 9 del código anterior:

class MyApp extends StatelessWidget

En ella, estamos indicando que la subclase MyApp (que, en este caso, es el widget que representa a nuestra app completa), heredará las características de la clase StatelessWidget. Por tanto, MyApp será de tipo StatelessWidget y no tendrá asociado ningún estado.

Para hacer que un widget sea de tipo stateless, basta con hacer que dicho widget herede de la clase StatelessWidget.

Por supuesto, dentro del widget principal de la app, aunque sea de tipo StatelessWidget, podríamos añadir otros widgets, tanto de ese mismo tipo como de tipo StatefulWidget. Al indicar que la app en sí misma no tendrá estado, no estamos diciendo que sus componentes internos no vayan a tenerlo. Por ejemplo, una app de tipo StatelessWidget puede contener botones interactivos que cambiarán de estado cuando el usuario los presione, y estos botones serán widgets de tipo StatefulWidget.

Anterior

Python: ventajas y desventajas

Stateful Widget, el que cambia

Siguiente

Deja un comentario