Aquesta obra d'Oriol Boix està llicenciada sota una llicència no importada Reconeixement-NoComercial-SenseObraDerivada 3.0.
Un botó permet la interacció de l'usuari amb l'aplicació. El botó pot fer quasi qualsevol cosa i pot contenir elements molt diversos.
Els botons poden ser de diversos tipus. Els ElevatedButton i els OutlinedButton són semblants però canvia la forma com es mostren; el primer sembla que estigui en relleu i, en canvi, el segon és pla amb una línia al seu voltant.
El botó següent conté text i no fa absolutament res.
...
Widget build(BuildContext context) {
return const Column(
children: [
SizedBox(height: 50),
ElevatedButton(onPressed: null, child: Text("Prem...")),
],
);
}
...
En el següent exemple fem que s'escrigui un text a la consola quan el botó es prem de forma normal i un text diferent quan es polsi durant una estona. Fixem-nos que hem hagut de treure la paraula const de la instrucció return, ja que si hi ha accions l'element deixa de ser constant.
...
Widget build(BuildContext context) {
return Column(
children: [
SizedBox(height: 50),
ElevatedButton(
onPressed: () {print("premut");},
onLongPress: () {print("premut continuat");},
child: Text("Prem..."),
),
],
);
}
...
Evidentment, aquest exemple no té utilitat pràctica; atès que en una aplicació real no es disposa de cap consola.
Per fer que un botó sigui sempre d'un color (que el color no depengui de l'estat) podem fer el que es mostra a continuació:
...
OutlinedButton(
onPressed: () {
print("premut");
},
style: ButtonStyle(
backgroundColor: WidgetStateProperty.all(Colors.lightGreenAccent),
),
child: Text("Prem..."),
),
...
Fixem-nos que en els botons és més complexa l'assignació de colors, atès que cada estat (no premut, premut, etc.) pot tenir un color diferent. En l'exemple anterior hem fet servir all perquè el color sigui el mateix en tots els casos.
També es pot canviar la forma d'un botó. En l'exemple següent s'ha definit que el boto sigui (per a tots els estats) un rectangle amb les vores arrodonides i amb un color de fons:
...
ElevatedButton(onPressed: () {},
style: ButtonStyle(
shape: WidgetStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(8))),
backgroundColor: WidgetStateProperty.all(Colors.deepOrangeAccent)
),
child: Text("Calcular", style: Estils.estilTextBotons,)
),
...
Els botons de tipus TextButton corresponen a un text sobre el qual es pot picar, però no és obligatori que el contingut sigui un text. Finalment, els IconButton mostren una icona que es pot picar; encara que no és obligatori que el contingut sigui un botó.
...
TextButton(
onPressed: () {
print("premut");
},
child: Text("Prem..."),
),
IconButton(onPressed: () {}, icon: Icon(Icons.attachment)),
...
Al web de Flutter podem trobar una llarga llista d'icones disponibles.
En aquest apartat de l'exemple enviem text i localització a Telegram podem veure un exemple de com posar dos botons en un IconButton i com modificar-ne el color segons l'estat d'una variable.
Els botons flotants (FloatingActionButton) són uns botons d'acció força amples, pensats per portar una icona a l'interior, encara que s'hi pot posar un text o altres coses. El normal és posar-los directament a l'esquelet, perquè així ja es mostren sobreposats a la part inferior dreta de la pantalla; encara que també els podem fer servir dins de qualsevol element d'empaquetament.
Observació: Si en una mateixa aplicació hi ha diversos botons flotants, pot sorgir un problema en cas de canviar de pantalla. Els botons flotants tenen un paràmetre anomenat heroTag que permet identificar-los de manera única. Si ens surt algun problema relacionat amb això i no hem de passar informació dels botons flotants d'una pantalla a una altra, ho podem resoldre posant l'etiqueta de cada un a nul:
...
floatingActionButton: FloatingActionButton(
heroTag: null,
onPressed: () {},
child: Icon(Icons.assignment_turned_in_outlined),
),
...
Aquesta obra d'Oriol Boix està llicenciada sota una llicència no importada Reconeixement-NoComercial-SenseObraDerivada 3.0.