Aplicacions amb Flutter, Dart i Flame

Text

El text és un component molt senzill que permet posar un text a la pantalla. El text pot venir d'una variable, pot ser un text entre cometes o una combinació si emprem la forma interpolada.

...
          Text("elem1"),
          Text($valor),
          Text("T = $valor K")
...

Podem indicar estils per al text. Per exemple:

...
          Text("Cursiva", style: TextStyle(fontStyle: FontStyle.italic)),
          Text("Gran i negreta", style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
          Text("Colors",style: TextStyle(
              color: Colors.yellow,
              backgroundColor: Colors.black,
            ),
          ),
          Text("Ratllat", style: TextStyle(decoration: TextDecoration.lineThrough)),
          Text("Espaiat", style: TextStyle(letterSpacing: 7)),
...

Els elements d'estil més habituals són:

Els valors possibles per a la negreta són:

Els valors possibles per a la decoració són:

A continuació tenim un exemple de combinació de decoracions:

...
          Text(
            "Decorat",
            style: TextStyle(
              decoration: TextDecoration.combine([
                TextDecoration.overline,
                TextDecoration.underline,
              ]),
              decorationColor: Colors.red,
            ),
          ),
...

Se li pot indicar una llargada màxima per al text. Així, si no hi cap, el tallarà.

...
          Text(
            "Aquest món és món de mones, qui l'entén, qui no l'entén; d'hores males i hores bones ne disfruten així, a estones quasibé tota la gent.",
            maxLines: 2,
            overflow: TextOverflow.ellipsis,
          ),
...

on el paràmetre overflow ens permet especificar com s'indicarà que no hi cabia tot. Les opcions són:

Definició d'estils de forma general

És habitual que en una aplicació es facin servir uns pocs estils de text, atès que els textos d'un mateix tipus solen tenir el mateix estil.

Una bona manera d'organitzar-ho és creant una classe amb tots els estils que farem servir a l'aplicació o, com a mínim, amb aquells que es fan servir en diversos llocs. Així podem canviar l'estil en un únic lloc i la modificació s'aplica immediatament a tota l'aplicació.

Per exemple, podríem crear un fitxer estils.dart dins de la carpeta core que situem a la carpeta lib.

estils.dart

import 'package:flutter/material.dart';
import 'package:primera_app/core/colors.dart';

class Estils {
  static const TextStyle estilTextPrincipal = TextStyle(
    color: ColorsApp.primari,
    fontSize: 14,
  );
  static const TextStyle estilTextSelectors = TextStyle(
    color: ColorsApp.text,
    fontSize: 20,
    fontWeight: FontWeight.bold,
  );
}

Cal definir-ho com a estatic, perquè s'hi pugui accedir des de qualsevol lloc, i com a constant, perquè no volem que es pugui modificar per error des d'un altre lloc de l'aplicació.

Després podem utilitzar aquests estils en qualsevol lloc de l'aplicació. Per exemple, podem posar aquest estil a un text.

...
    return Column(
      children: [Text("Canviar", style: Estils.estilTextPrincipal)],
    );
...

Aquesta obra d'Oriol Boix està llicenciada sota una llicència no importada Reconeixement-NoComercial-SenseObraDerivada 3.0.