---
title: 💬 Avisos con SnackBar
description: "## 💬 Mostrar unha mensaxe temporal Unha **`SnackBar`** é unha mensaxe breve que aparece na parte inferior da pantalla. Serve, por exemplo, para confirmar que gardamos uns datos ou informar de que unha acción non se puido completar. Non abre…"
url: "https://www.drodicio.com/docs/flutter/tema-4-scaffold/snackbar/"
updated: "2026-10-12"
category: Tema 4. Estrutura dunha pantalla. Scaffold
---

# 💬 Avisos con SnackBar

## 💬 Mostrar unha mensaxe temporal

Unha **`SnackBar`** é unha mensaxe breve que aparece na parte inferior da pantalla. Serve, por exemplo, para confirmar que gardamos uns datos ou informar de que unha acción non se puido completar. Non abre outra pantalla nin obriga ao usuario a interromper o que está facendo.

Tamén pode incluír un botón cunha acción, como **«Pechar»** ou **«Desfacer»**.

![Aviso temporal co nome do titor e a acción Pechar](https://www.drodicio.com/wp-content/uploads/2026/10/snackbar.png)
Aviso temporal co nome do titor e a acción Pechar

### 📍 O contexto nos exemplos

Como vimos no Tema 3.1, `context` permite acceder a información e funcionalidades proporcionadas polos widgets antecesores.

Neste tema usaremos `ScaffoldMessenger.of(context)` para mostrar avisos. Para iso, empregamos o contexto de `PantallaCentro`, situada dentro de `MaterialApp`.

### 📢 Como se mostra?

Para mostrar o aviso utilizamos dúas pezas:

- **`SnackBar`** define o contido e o aspecto da mensaxe.
- **`ScaffoldMessenger`** encárgase de mostrala no `Scaffold` da pantalla.

Non colocamos a `SnackBar` dentro de `body`. Pedimos que se mostre cando ocorre unha acción, por exemplo, ao premer un botón:

```dart
ElevatedButton(
  onPressed: () {
    // Buscamos o encargado de mostrar os avisos desta pantalla.
    final messenger = ScaffoldMessenger.of(context);

    // Pedímoslle que mostre a mensaxe.
    messenger.showSnackBar(
      const SnackBar(
        content: Text('Benvidos a 2º DAM'),
      ),
    );
  },
  child: const Text('Mostrar aviso'),
)
```

Neste fragmento:

1. `onPressed` executa a función cando prememos o botón.
2. `ScaffoldMessenger.of(context)` permite acceder ao `ScaffoldMessenger` encargado de mostrar os avisos.
3. `showSnackBar(...)` mostra a `SnackBar` que lle pasamos.
4. `content` indica o widget que aparecerá dentro do aviso, normalmente un `Text`.

> 💡 A chamada a `showSnackBar` vai dentro do callback do botón. Así, o aviso aparece ao premer, non mentres se está construíndo a interface en `build`.

### ⚙️ Propiedades habituais

| Propiedade de `SnackBar` | Para que serve? |
| --- | --- |
| `content` | Contido do aviso, normalmente un `Text` coa mensaxe. |
| `duration` | Duración prevista do aviso, por exemplo, `Duration(seconds: 4)`. |
| `action` | Botón opcional, definido cun `SnackBarAction`. |
| `behavior` | `SnackBarBehavior.fixed` intégrase na parte inferior; `SnackBarBehavior.floating` deixa marxe arredor do aviso. |

## 🧪 Exemplo completo

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

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

Unha acción chamada «Desfacer» debe restaurar realmente o cambio. Neste exemplo usamos «Pechar» porque só queremos retirar o aviso.

![Mostrar unha SnackBar ao premer Consultar titor](https://www.drodicio.com/wp-content/uploads/2026/10/snackbar_exemplo.png)
Mostrar unha SnackBar ao premer Consultar titor

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