Muestra un SnackBar

Parte de la sección Cómo hacerla interactiva del Journey de Flutter de Coddy. Lección 10 de 34.

Una SnackBar es un mensaje breve que aparece deslizándose desde la parte inferior de la pantalla y desaparece por sí solo después de unos cuatro segundos. Las aplicaciones la usan para indicar que una acción se realizó correctamente: Guardado, Enviado, Eliminado.

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(content: Text('Sent')),
);

Léelo desde dentro hacia fuera: SnackBar(...) es el mensaje, showSnackBar lo muestra en la pantalla y ScaffoldMessenger.of(context) busca la parte de la aplicación que muestra los mensajes.

context es el lugar del widget en el árbol, el que recibe build. .of(context) busca hacia arriba en el árbol desde allí. El mensajero proviene de MaterialApp, así que debe estar por encima de ti. HomePage está por debajo de MaterialApp, por lo que su contexto lo encuentra. El contexto de MyApp está por encima y, desde allí, una SnackBar falla con «No ScaffoldMessenger widget found». Esa es otra razón por la que la pantalla tiene su propia clase.

Desafío

Fácil

Cuando se presione Save, muestra una SnackBar que diga Note saved.

Pruébalo tú mismo

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Notes')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {},
          child: Text('Save'),
        ),
      ),
    );
  }
}