Mostra una SnackBar

Fa parte della sezione Rendere l’app interattiva del percorso Flutter di Coddy. Lezione 10 di 34.

Una SnackBar è un breve messaggio che scorre verso l’alto dal fondo dello schermo e scompare da solo dopo circa quattro secondi. Le app la usano per comunicare che un’azione è riuscita: salvato, inviato, eliminato.

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

Leggi dall’interno verso l’esterno: SnackBar(...) è il messaggio, showSnackBar lo mostra sullo schermo e ScaffoldMessenger.of(context) trova la parte dell’app che mostra i messaggi.

context è la posizione del widget nell’albero, quella che build riceve. .of(context) cerca da lì risalendo l’albero. Il messenger proviene da MaterialApp, quindi deve trovarsi sopra di te. HomePage si trova sotto MaterialApp, quindi il suo context lo trova. Il context di MyApp si trova sopra, e da lì una SnackBar non funziona e genera "No ScaffoldMessenger widget found". Questo è un altro motivo per cui la schermata ha una classe propria.

Sfida

Facile

Quando si preme Save, mostra uno SnackBar con il messaggio Note saved.

Provalo tu

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'),
        ),
      ),
    );
  }
}