Aplicacions amb Flutter, Dart i Flame

Expandir

Els elements d'expandir són uns ginys que forcen el seu descendent (només en poden tenir un) a que ocupi tot l'espai disponible. En el següent exemple els dos primers textos quedaran enganxats a l'esquerra i el tercer quedarà enganxat a la dreta, atès que es força el segon a que ocupi tot l'espai disponible.

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

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(top: 100),
      child: const Row(
        children: [
          Text("elem1"),
          Expanded(child: Text("elem2")),
          Text("elem3"),
        ],
      ),
    );
  }
}

Si volem posar un element dins d'un element d'expandir, hi ha una manera ràpida per fer-ho. En aquest cas, per posar el text dins de l'element d'expandir podríem marcar la paraula Text, picar a sobre amb el botói dret i triar Refactor.... Llavors triaríem Wrap with Widget... i ja ens ho posaria automàticament a dins, però caldrà canviar la paraula Widged per Expanded.

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

Si posem elements d'expandir als dos primers textos, aquests es repartiran l'espai disponible a parts iguals i, per tant, tindrem un element a l'esquerra, un al mig i un a la dreta.

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

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(top: 100),
      child: const Row(
        children: [
          Expanded(child: Text("elem1")),
          Expanded(child: Text("elem2")),
          Text("elem3"),
        ],
      ),
    );
  }
}

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