---
title: 👆 Botóns e callbacks
description: "## 👆 Que sucede ao premer? `onPressed` recibe unha función sen parámetros que non devolve ningún valor: un callback `void Function()`. Flutter executaraa cando premamos o botón. Dentro da clase da pantalla podemos escribir un método: ```dart void saudar() {…"
url: "https://www.drodicio.com/docs/flutter/tema-2-os-fundamentos-de-flutter-widgets/botons/"
updated: "2026-10-12"
category: Tema 2. Os fundamentos de Flutter. Widgets.
---

# 👆 Botóns e callbacks

## 👆 Que sucede ao premer?

`onPressed` recibe unha función sen parámetros que non devolve ningún valor: un callback `void Function()`. Flutter executaraa cando premamos o botón.

Dentro da clase da pantalla podemos escribir un método:

```dart
void saudar() {
  debugPrint('Ola, Diego!'); // Mensaxe na consola de depuración.
}
```

Despois, dentro de `build`, podemos pasar o método polo nome ou escribir unha función anónima:

```dart
ElevatedButton(
  onPressed: saudar, // Pasamos a función; non escribimos saudar().
  child: const Text('Saudar'),
)
```

```dart
ElevatedButton(
  onPressed: () {
    debugPrint('Ola, Diego!'); // Executarase ao premer.
  },
  child: const Text('Saudar'),
)
```

`onPressed: null` desactiva o botón. `onPressed: () {}` deixa o botón activo, pero sen facer nada.

> 📌 `debugPrint` escribe na consola; non mostra texto na pantalla. No Tema 3.3 veremos como actualizar a interface ao premer un botón.

## 🔘 Escoller un botón

| Widget | Aspecto ou uso habitual |
| --- | --- |
| `FilledButton` | Fondo de cor para unha acción destacada. |
| `ElevatedButton` | Fondo e elevación. |
| `OutlinedButton` | Contorno visible. |
| `TextButton` | Texto, con menos énfase visual. |
| `IconButton` | Só unha icona; engade un `tooltip` que explique a acción. |

Nos botóns de texto, `child` contén o texto ou outro widget. En `IconButton`, usamos `icon`. Variantes como `ElevatedButton.icon` combinan unha icona e unha etiqueta.

## 🧪 Exemplo completo

Preme os botóns e observa a consola de DartPad ou a consola de depuración de VS Code.

> 🔗 DartPad:
>
>
>
> - [`https://dartpad.dev/?id=8426f965515363f6b8022b413064b3f0`](https://dartpad.dev/?id=8426f965515363f6b8022b413064b3f0).

[https://dartpad.dev/embed-inline.html?id=8426f965515363f6b8022b413064b3f0](https://dartpad.dev/embed-inline.html?id=8426f965515363f6b8022b413064b3f0)

![Tipos de botóns e exemplo dun botón desactivado](https://www.drodicio.com/wp-content/uploads/2026/10/botons-scaled.png)
Tipos de botóns e exemplo dun botón desactivado

## 🎨 Cambiar o estilo

Dentro do botón, `styleFrom` permite configurar cores, espazos ou bordos sen construír un estilo máis complexo:

```dart
ElevatedButton(
  onPressed: () => debugPrint('Saúdo de Diego'),
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.blue,
    foregroundColor: Colors.white, // Cor do texto e das iconas.
  ),
  child: const Text('Saudar'),
)
```

## ➕ Botón flotante

`FloatingActionButton` destaca unha acción principal e colócase en `floatingActionButton` do `Scaffold`. Veremos as súas variantes, posicións e un exemplo completo no **Tema 3.4**.

![Localización do botón de acción flotante](https://www.drodicio.com/wp-content/uploads/2026/10/fab.png)
Localización do botón de acción flotante

> 📚 Consulta:
>
>
>
> - [FloatingActionButton → `https://api.flutter.dev/flutter/material/FloatingActionButton-class.html`](https://api.flutter.dev/flutter/material/FloatingActionButton-class.html).