En Flutter, os botóns son widgets que permiten a interacción co usuario. Pódense usar para lanzar accións, navegar, cambiar o estado da UI, etc.
⚙️ Propiedades comúns dos botóns #
| Propiedade | Descrición, posibles valores e exemplo |
|---|---|
onPressed | Función que se executa cando se preme o botón. • Se é null, o botón aparece desactivado.Exemplo: onPressed: () { print('Premido'); } |
child | O contido visual do botón. Normalmente é un Text, pero tamén pode ser un Row con Icon, ou calquera outro widget.Exemplo: child: Text('Aceptar')child: Row(children: [Icon(Icons.save), Text('Gardar')]) |
style | Permite personalizar o aspecto do botón usando ButtonStyle.Dentro pódense definir: • backgroundColor• foregroundColor• padding• shape• elevation, etc.Exemplo: style: ElevatedButton.styleFrom(backgroundColor: Colors.green) |
📝 Nota: Para aplicar estilos de forma máis avanzada, podes usar
style: ButtonStyle(...)conMaterialStateProperty.all()ou outras variantes, perostyleFrom(...)é máis doado para comezar.
🔘 ElevatedButton, TextButton, OutlinedButton #
Flutter ofrece tres botóns principais baseados no estilo de Material Design:
| Widget | Estilo |
|---|---|
ElevatedButton | Botón con relevo e fondo. Simula elevación, ideal para accións primarias ou destacadas. Cando se pulsa, a súa sombra increméntase |
TextButton | Botón plano sen fondo nen elevación. É axeitado para accións secundarias ou dentro de diálogos onde non se require moito énfase visual. |
OutlinedButton | Botón con borde pero sen fondo. É bo para accións importantes pero non primarias, ou cando se quere ofrecer unha alternativa visual menos intrusiva que un ElevatedButton. |
🧪 Exemplo: #
Column(
children: [
ElevatedButton(
onPressed: () {
print('Premeches o botón elevado!');
},
child: Text('Botón Elevado'),
),
TextButton(
onPressed: () {
print('Premeches o botón plano!');
},
child: Text('Botón Plano'),
),
OutlinedButton(
onPressed: () {
print('Premeches o botón con borde!');
},
child: Text('Botón Delimitado'),
),
],
)
📚 Fontes de información oficial: #
➕ IconButton #
IconButton permite crear botóns que amosan só unha icona, moi útiles para accións rápidas como engadir, eliminar, buscar…
📝 Nota: É amplamente utilizado en barras de aplicacións (AppBar) e listas para accións rápidas e visualmente compactas.
🧪 Exemplo: #
IconButton(
icon: Icon(Icons.add),
tooltip: 'Engadir elemento',
color: Colors.green,
iconSize: 32,
onPressed: () {
print('Premeches o botón con icona!');
},
)
👆 GestureDetector para xestos personalizados #
Mentres que os botóns predefinidos xestionan os eventos de pulsación, o GestureDetector permite detectar unha ampla variedade de xestos como toques, deslizamentos, presión longa, dobre toque, etc.
Pódese usar para engadir interacción a calquera widget (non só botóns).
🎯 Eventos dispoñibles en GestureDetector #
O GestureDetector permite detectar distintos xestos do usuario sobre un widget. A continuación recóllense os eventos máis usados, coa súa descrición e exemplos:
| Evento | Descrición, posibles valores e exemplo |
|---|---|
onTap | Detecta un toque simple. Exemplo: onTap: () { print('Tocaches!'); } |
onDoubleTap | Detecta un dobre toque rápido. Exemplo: onDoubleTap: () { print('Dobre toque!'); } |
onLongPress | Detecta cando o usuario mantén pulsado durante uns segundos. Exemplo: onLongPress: () { print('Long press!'); } |
onTapDown | Disparado xusto ao comezar o toque (antes de soltar). Proporciona detalles do toque (TapDownDetails).Exemplo: onTapDown: (detalles) { print('Inicio de toque'); } |
onTapUp | Disparado ao soltar o dedo tras un toque. Proporciona detalles (TapUpDetails).Exemplo: onTapUp: (d) { print('Soltaste o dedo'); } |
onTapCancel | Disparado se o toque foi interrompido (ex: por desprazamento ou cancelación do xesto). Exemplo: onTapCancel: () { print('Toque cancelado'); } |
onVerticalDragStart / onHorizontalDragStart | Detectan o inicio dun deslizamento vertical ou horizontal. Usado para xestos de arrastre. Exemplo: onVerticalDragStart: (d) { print('Comezo de arrastre'); } |
onPanUpdate | Detecta o movemento do dedo mentres se arrastra en calquera dirección. Exemplo: onPanUpdate: (d) { print('Desprazando: ${d.delta}'); } |
onScaleUpdate | Detecta xestos de pinza (zoom). Proporciona datos como escala, rotación e posición. Exemplo: onScaleUpdate: (d) { print('Escala: ${d.scale}'); } |
🧪 Nota: Podes combinar varios destes eventos nun mesmo
GestureDetector, pero algúns comoonTapeonDoubleTappoden interferir entre si. Se usas ambos, asegúrate de testear o comportamento.
🧪 Exemplo: #
GestureDetector(
onTap: () {
print('Tocaches o recadro!');
},
onDoubleTap: () {
print('Dobre toque detectado!');
},
onLongPress: () {
print('Premeches durante un tempo!');
},
child: Container(
width: 200,
height: 100,
color: Colors.blueAccent,
child: Center(
child: Text(
'Tócame',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
),
)
