Aquesta obra d'Oriol Boix està llicenciada sota una llicència no importada Reconeixement-NoComercial-SenseObraDerivada 3.0.
Els contenidors són uns ginys que permeten tancar altres elements d'agrupació i definir-los algunes propietats. Cada contenidor només pot tenir un element a dins. Per exemple, en aquest cas hi posem una columna i establim una amplada, una alçada i un color de fons per al contenidor. Els contenidors també poden tenir una decoració del tipus BoxDecoration.
class Columna extends StatelessWidget {
const Columna({super.key});
@override
Widget build(BuildContext context) {
return Container(
width: 100,
height: 400,
color: Colors.lightBlue,
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"),
],
),
);
}
}
També li podem posar alguna decoració, afegir-li marges i fer que el contingut estigui centrat:
class Columna extends StatelessWidget {
const Columna({super.key});
@override
Widget build(BuildContext context) {
return Container(
width: 100,
height: 400,
alignment: Alignment.center,
padding: const EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: Colors.lightBlue,
borderRadius: BorderRadius.circular(12),
),
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"),
],
),
);
}
}
El contenidor també és útil quan volem que una funció de tipus giny no retorni res, podem fer que retorni un contenidor buit.
...
FutureBuilder(future: _rebut, builder: (context, snapshot){
...
return Container();
...
Els contenidors, com tots els ginys, poden ser sensibles a les accions de l'usuari si els tanquem dins d'un detector d'accions.
Si volem posar un element dins d'un contenidor, hi ha una manera ràpida per fer-ho. En aquest cas, per posar la columna dins del contenidor podríem marcar la paraula Column, picar a sobre amb el botói dret i triar Refactor.... Per posar la columna dins un contenidor triaríem Wrap with Container i ja ens ho posaria automàticament a dins; només faltaria ajustar les propietats que necessitem.
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.