Els camps de text permeten que l'usuari introdueixi informació. Un camp de text bàsic quedaria així:
...
TextField(),
...
i probablement es veuria com a la imatge de l'esquerra. Se suposa que hem d'escriure sobre la línia que es mostra, però si fem servir el teclat de l'ordinador és probable que no funcioni. Per fer sortir el teclat a la pantalla, picarem sobre la icona de les tres ratlles i triarem Show on-screen keyboard.
En els camps de text tenim moltes opcions. Una de les més interessants és la possibilitat de posar-hi un text que indiqui què s'espera que escrigui l'usuari:
...
TextField(decoration: InputDecoration(hintText: "Escriu el teu nom")),
...
Els camps de text tenen moltíssimes opcions, aquí només comentarem les que són d'ús més habitual i les que farem servir als exemples. En aquest cas, a més del text indicatiu, s'ha requadrat el camp (amb les cantonades corbades) i s'hi ha posat una icona que representa què esperem que s'hi introdueixi. Ho hem posat dins d'un farciment per deixar un marge, així el requadre es veu millor.
...
Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
decoration: InputDecoration(
hintText: "Escriu l'adreça de correu",
prefixIcon: Icon(Icons.mail),
border: OutlineInputBorder(borderRadius: BorderRadius.circular(30),),
),
),
),
...
A la pàgina de Sneh Paghdal hi ha un recull força complet d'opcions. I al web de Flutter podem trobar una llarga llista d'icones disponibles.
Podem fer que el text introduït quedi ocult i també podem limitar el nombre de caràcters que es poden introduir. En limitar els caràcters, es mostrarà un comptador que informa l'usuari de quants en porta i quin és el màxim.
...
Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
obscureText: true,
maxLength: 8,
decoration: InputDecoration(
hintText: "Contrasenya",
prefixIcon: Icon(Icons.key),
border: OutlineInputBorder(),
),
),
),
...
Els camps de text poden admetre diverses línies i també podem posar la icona a l'altre costat. El valor que posem a maxLines limita el nombre de línies que es visualitzen però el contingut en pot tenir més (en quin cas, no es podran veure totes simultàniament.
...
Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
maxLines: 4,
decoration: InputDecoration(
suffixIcon: Icon(Icons.text_snippet_outlined),
hintText: "Detalls del cas",
border: OutlineInputBorder(),
),
),
),
...
Els camps de text tenen l'opció onChanged que guarda el text escrit en una variable i ens permet executar algunes instruccions cada cop que canvia el que hi ha al camp. Un exemple molt bàsic seria:
...
child: TextField(
decoration: InputDecoration(
hintText: "Escriu el que vols cercar",
prefixIcon: Icon(Icons.search),
border: OutlineInputBorder(),
),
onChanged: (txt){
print("Has escrit $txt");
},
),
...
En aquest apartat de l'exemple enviem text i localització a Telegram podem veure un exemple de com modificar el contingut d'un camp de text des del programa.
Aquesta obra d'Oriol Boix està llicenciada sota una llicència no importada Reconeixement-NoComercial-SenseObraDerivada 3.0.