Wyświetl SnackBar

Część sekcji Dodajemy interaktywność ścieżki Flutter w Coddy. Lekcja 10 z 34.

SnackBar to krótki komunikat, który wysuwa się z dołu ekranu i znika samoczynnie po około czterech sekundach. Aplikacje używają go, aby poinformować, że dana czynność się powiodła: zapisano, wysłano, usunięto.

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

Przeczytaj ten zapis od środka: SnackBar(...) to komunikat, showSnackBar wyświetla go na ekranie, a ScaffoldMessenger.of(context) znajduje część aplikacji, która wyświetla komunikaty.

context to miejsce widżetu w drzewie — to, które otrzymuje build. .of(context) przeszukuje drzewo w górę, zaczynając od tego miejsca. Komunikator pochodzi z MaterialApp, więc musi znajdować się wyżej od Ciebie. HomePage znajduje się poniżej MaterialApp, więc jego kontekst go odnajduje. Kontekst MyApp znajduje się wyżej, a wywołanie z niego SnackBar kończy się błędem „No ScaffoldMessenger widget found”. To kolejny powód, dla którego ekran ma własną klasę.

Wyzwanie

Łatwy

Po naciśnięciu Save wyświetl SnackBar z tekstem Note saved.

Spróbuj swoich sił

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