Показать SnackBar

Часть раздела Добавляем интерактивность путешествия по Flutter на Coddy. Урок 10 из 34.

SnackBar — это короткое сообщение, которое появляется снизу экрана и исчезает само примерно через четыре секунды. Приложения используют его, чтобы сообщить, что действие выполнено: сохранено, отправлено, удалено.

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

Читайте изнутри наружу: SnackBar(...) — это сообщение, showSnackBar отображает его на экране, а ScaffoldMessenger.of(context) находит часть приложения, которая показывает сообщения.

context — это положение виджета в дереве, которое получает build. .of(context) выполняет поиск вверх по дереву, начиная с этого места. Объект messenger берётся из MaterialApp, поэтому он должен находиться выше. HomePage находится ниже MaterialApp, поэтому его контекст находит его. Контекст MyApp расположен выше него, и вызов SnackBar оттуда завершится ошибкой «No ScaffoldMessenger widget found». Это ещё одна причина, по которой экран оформлен в виде отдельного класса.

Задание

Легко

При нажатии Save покажи SnackBar с текстом Note saved.

Попробуйте сами

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