diegoRodicio

View Categories

💬 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
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:

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 SnackBarPara que serve?
contentContido do aviso, normalmente un Text coa mensaxe.
durationDuración prevista do aviso, por exemplo, Duration(seconds: 4).
actionBotón opcional, definido cun SnackBarAction.
behaviorSnackBarBehavior.fixed intégrase na parte inferior; SnackBarBehavior.floating deixa marxe arredor do aviso.

🧪 Exemplo completo

🔗 DartPad:

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
Mostrar unha SnackBar ao premer Consultar titor

📚 Consulta:

📚 Consulta: