---
title: ➕ Botón de acción flotante
description: "## ➕ Destacar unha acción `FloatingActionButton` adoita reservarse para a acción principal da pantalla: crear, engadir ou iniciar unha tarefa. A súa forma depende do tema; non sempre é circular. ![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…"
url: "https://www.drodicio.com/docs/flutter/tema-4-scaffold/boton-flotante/"
updated: "2026-10-12"
category: Tema 4. Estrutura dunha pantalla. Scaffold
---

# ➕ Botón de acción flotante

## ➕ Destacar unha acción

`FloatingActionButton` adoita reservarse para a acción principal da pantalla: crear, engadir ou iniciar unha tarefa. A súa forma depende do tema; non sempre é circular.

![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

Colócase en `floatingActionButton` do `Scaffold`.

| Propiedade | Para que serve? |
| --- | --- |
| `onPressed` | Callback que se executa ao premer. |
| `child` | Contido, normalmente unha icona. |
| `tooltip` | Texto que explica a acción. |
| `backgroundColor` / `foregroundColor` | Cores do fondo e do contido. |

## 📍 Escoller a posición

O parámetro `floatingActionButtonLocation` pertence a `Scaffold`, non ao botón.

| Valor | Posición |
| --- | --- |
| `FloatingActionButtonLocation.endFloat` | Ao final, normalmente abaixo á dereita. |
| `FloatingActionButtonLocation.centerFloat` | Centrado na parte inferior. |
| `FloatingActionButtonLocation.startFloat` | Ao inicio, normalmente abaixo á esquerda. |

As variantes `centerDocked` e `endDocked` poden integrarse cunha `BottomAppBar`; quedan como ampliación.

## 🧪 Exemplo completo

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

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

![Consultar o titor desde un botón flotante](https://www.drodicio.com/wp-content/uploads/2026/10/fab_exemplo-scaled.png)
Consultar o titor desde un botón flotante

## 🏷️ Botón con etiqueta

Para mostrar tamén un texto, substitúe o botón anterior por:

```dart
FloatingActionButton.extended(
  onPressed: () => debugPrint('Titor: Diego Rodicio'),
  icon: const Icon(Icons.info),
  label: const Text('Consultar titor'), // Explica a acción sen depender da icona.
)
```

![Botón flotante con icona e etiqueta Consultar titor](https://www.drodicio.com/wp-content/uploads/2026/10/fab_exemplo2-scaled.png)
Botón flotante con icona e etiqueta Consultar titor

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