Aplicacions amb Flutter, Dart i Flame

Caixa a mida

Les caixes són uns ginys que permeten tancar altres elements d'agrupació i definir-los la mida. Cada caixa només pot tenir un element a dins. Per exemple, en aquest cas hi posem una columna i establim una amplada i una alçada per a la caixa.

class Columna extends StatelessWidget {
  const Columna({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 100,
      height: 400,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        mainAxisSize: MainAxisSize.max,
        children: [
          Text("Primera línia de text"),
          Text("Segona línia de text"),
          Text("Tercera línia de text"),
        ],
      ),
      
    );
  }
}

Si volem posar un element dins d'una caixa, hi ha una manera ràpida per fer-ho. En aquest cas, per posar la columna dins de la caixa podríem marcar la paraula Column, picar a sobre amb el botói dret i triar Refactor.... Per posar la columna dins una caixa triaríem Wrap with SizedBox i ja ens ho posaria automàticament a dins; només faltaria ajustar les propietats que necessitem.

Les caixes, com tots els ginys, poden ser sensibles a les accions de l'usuari si els tanquem dins d'un detector d'accions.

Si volem definir l'amplada o l'alçada de manera que ocupin tot l'espai disponible, hi posarem el valor double.infinity.

...
      width: double.infinity,
      height: double.infinity,
...

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