A interacción co usuario é clave en calquera aplicación, e Flutter proporciona widgets potentes para recoller datos. Aquí veremos widgets para capturar datos do usuario, como campos de texto, caixas de verificación e formularios completos con validación.
✍️ TextField e TextEditingController #
O TextField é o widget básico para recoller entrada de texto dunha soa liña. Permítelle aos usuarios escribir texto, números, correos electrónicos, etc. Para xestionar o texto que se escribe e modificalo, usamos un TextEditingController.
🧪 Exemplo básico: #
class EntradaTexto extends StatefulWidget {
@override
State<EntradaTexto> createState() => _EntradaTextoState();
}
class _EntradaTextoState extends State<EntradaTexto> {
final controladorNome = TextEditingController();
@override
void dispose() {
controladorNome.dispose();
super.dispose();
}
@override
Widget build(BuildContext contexto) {
return Column(
children: [
TextField(
controller: controladorNome,
decoration: InputDecoration(
labelText: 'Escribe o teu nome',
border: OutlineInputBorder(),
),
),
ElevatedButton(
onPressed: () {
print('Nome introducido: ${controladorNome.text}');
},
child: Text('Gardar'),
),
],
);
}
}
🧪 Outro Exemplo: #
✅ Checkbox #
O widget Checkbox utilízase para activar ou desactivar unha opción (valor booleano). Os usuarios poden seleccionar varias caixas de verificación.
bool aceptado = false;
Checkbox(
value: aceptado,
onChanged: (novoValor) {
setState(() {
aceptado = novoValor!;
});
},
)
🧪 Exemplo: #
🔘 RadioListTile #
Permite escoller unha única opción entre varias. Ideal cando se precisa unha resposta única.
String? linguaxeEscollida = 'Dart';
RadioListTile<String>(
title: Text('Dart'),
value: 'Dart',
groupValue: linguaxeEscollida,
onChanged: (valor) {
setState(() {
linguaxeEscollida = valor;
});
},
),
RadioListTile<String>(
title: Text('Swift'),
value: 'Swift',
groupValue: linguaxeEscollida,
onChanged: (valor) {
setState(() {
linguaxeEscollida = valor;
});
},
),
🧪 Exemplo: #
🧪 Form e TextFormField con validación #
Para formularios máis complexos con múltiples campos e requisitos de validación, Flutter proporciona o widget Form. O Form actúa como un contedor para os seus campos de formulario, permitíndolle validar todos os campos á vez e gardar os seus valores.
Dentro dun Form, usaremos TextFormField en lugar de TextField. TextFormField é unha versión de TextField que se integra mellor co Form e permite a validación e xestión de estados de erro.
