Eine SnackBar anzeigen

Teil des Abschnitts Apps interaktiv gestalten der Flutter-Journey von Coddy. Lektion 10 von 34.

Eine SnackBar ist eine kurze Nachricht, die vom unteren Bildschirmrand nach oben gleitet und nach etwa vier Sekunden von selbst verschwindet. Apps verwenden sie, um mitzuteilen, dass eine Aktion erfolgreich war: Gespeichert, Gesendet, Gelöscht.

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

Lies es von innen nach außen: SnackBar(...) ist die Nachricht, showSnackBar zeigt sie auf dem Bildschirm an, und ScaffoldMessenger.of(context) findet den Teil der App, der Nachrichten anzeigt.

context ist die Position des Widgets im Baum, die build erhält. .of(context) sucht von dort aus den Baum nach oben ab. Der Messenger stammt von MaterialApp und muss sich daher über dir befinden. HomePage befindet sich unter MaterialApp, daher findet sein Kontext den Messenger. Der Kontext von MyApp liegt darüber, und eine SnackBar von dort schlägt mit der Meldung „No ScaffoldMessenger widget found“ fehl. Das ist ein weiterer Grund dafür, dass der Bildschirm eine eigene Klasse hat.

Aufgabe

Einfach

Wenn Save gedrückt wird, zeige eine SnackBar mit dem Text Note saved an.

Probier es selbst

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