Anatomía de un widget de Flutter

| |

Ya habrás oído esta frase: “en una app de Flutter, todo es un widget”. Y, en efecto, así es. Desde una fila o una columna, hasta la propia app. Pero, ¿qué entendemos realmente por widgets en Flutter?

Los widgets son componentes que se van combinando entre sí para construir interfaces de usuario de cualquier complejidad.

Básicamente, un widget es una clase de Dart. Por tanto, como toda clase, tiene asociados unos constructores, unos métodos y una serie de propiedades o atributos. Vamos a analizar, por ejemplo, un widget de tipo Text:

La utilidad de un widget de este tipo consiste en mostrar una cadena de texto con un estilo que podemos personalizar por completo. Como puedes ver en la imagen anterior, cuenta con dos posibles constructores.

Por un lado, el constructor Text() simplemente crea un widget de tipo Text. Esta es su sintaxis:

Text(String data, 
     {Key key, 
      TextStyle style, 
      StrutStyle strutStyle, 
      TextAlign textAlign, 
      TextDirection textDirection, 
      Locale locale, 
      bool softWrap, 
      TextOverflow overflow, 
      double textScaleFactor, 
      int maxLines, 
      String semanticsLabel, 
      TextWidthBasis textWidthBasis, 
      TextHeightBehavior textHeightBehavior})   

Basándonos en la sintaxis anterior, podríamos crear un widget de tipo Text de una forma tan sencilla como la siguiente:

Text(
  'Este es un widget básico de tipo Text',
  textAlign: TextAlign.center,
  style: TextStyle(fontWeight: FontWeight.bold),
)

Para construirlo, hemos utilizado el constructor Text(), incluyendo:

  • La propiedad data en formato String, es decir, la propiedad data viene dada por la frase ‘Este es un widget básico de tipo Text’. Nuestro widget, por tanto, mostrará esta frase por pantalla.
  • Las propiedades textAlign y style, que le hemos pasado al constructor en formato map (es decir, tipo diccionario). A su vez, la propiedad textAlign es una clase de tipo TextAlign (ojo, el nombre de la propiedad empieza por minúscula y el de la clase, por mayúscula) y la propiedad style es una clase de tipo TextStyle.

Fíjate en cómo algunas propiedades vienen dadas, a su vez, por otros widgets que también tienen sus propios atributos.

Aunque ya has visto que el constructor Text() es muy fácil de utilizar y cuenta con muchísimas opciones de personalización, también es posible crear un widget de tipo Text con el constructor Text.rich(), al que, en lugar de pasarle la propiedad data en formato String, hay que pasarle un textSpan de la clase InlineSpan. Puedes ver su sintaxis completa a continuación:

Text.rich(InlineSpan textSpan, 
          {Key key, 
           TextStyle style, 
           StrutStyle strutStyle, 
           TextAlign textAlign, 
           TextDirection textDirection, 
           Locale locale, 
           bool softWrap, 
           TextOverflow overflow, 
           double textScaleFactor, 
           int maxLines, 
           String semanticsLabel, 
           TextWidthBasis textWidthBasis, 
           TextHeightBehavior textHeightBehavior})

A excepción de la primera, todas las propiedades que incluye el constructor Text.rich() son idénticas a las del constructor Text(). Igual que hicimos antes, veamos ahora un ejemplo de uso con este nuevo constructor:

const Text.rich(
  TextSpan(
    text: 'Hello', // default text style
    children: <TextSpan>[
      TextSpan(text: ' beautiful ', style: TextStyle(fontStyle: FontStyle.italic)),
      TextSpan(text: 'world', style: TextStyle(fontWeight: FontWeight.bold)),
    ],
  ),
)

El resultado del código anterior es un texto como este:

Hello beautiful world.

Fíjate en que la palabra “Hello” tiene un estilo de texto por defecto, mientras que “beautiful” y “world” sí que tienen asignado un estilo concreto personalizado: letra cursiva y letra negrita, respectivamente. Para poder asociar distintos estilos a distintas palabras o fragmentos de texto, los separamos en diferentes TextSpan (que es una subclase de InlineSpan específica para texto).

¡Ojo a esto! Ahora ya sabemos que es perfectamente posible utilizar un widget de tipo Text e ir formateando el texto y dándole estilos tal y como como hemos visto. Sin embargo, existe otro widget parecido pero que permite controlar de forma mucho más precisa el formato y el estilo del texto: el widget RichText.

Un widget de tipo Text está pensando para mostrar texto con estilo uniforme, mientras que el RichText es un widget preparado para un control más preciso de la representación del texto.

Por tanto, a estas alturas ya sabemos qué es exactamente un widget (una clase de Dart), de qué está compuesto (constructores, propiedades y métodos) y que, además, en Flutter suele haber varias alternativas para lograr un mismo objetivo (objetivo que puede ser tanto visual, como funcional).

Apps basadas en Material Design

Siguiente

Deja un comentario