Exiba uma SnackBar

Parte da seção Tornando o app interativo do Journey de Flutter da Coddy. Lição 10 de 34.

Uma SnackBar é uma mensagem curta que desliza para cima a partir da parte inferior da tela e desaparece sozinha após cerca de quatro segundos. Os aplicativos a usam para informar que uma ação foi concluída: salvo, enviado, excluído.

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

Leia de dentro para fora: SnackBar(...) é a mensagem, showSnackBar a exibe na tela, e ScaffoldMessenger.of(context) encontra a parte do aplicativo que exibe mensagens.

context é a posição do widget na árvore, aquela que build recebe. .of(context) pesquisa a árvore para cima a partir dali. O messenger vem de MaterialApp, então ele precisa estar acima de você. HomePage está abaixo de MaterialApp, então o contexto dela o encontra. O contexto de MyApp está acima dele, e uma SnackBar exibida a partir dali falha com "No ScaffoldMessenger widget found". Esse é outro motivo para a tela ter sua própria classe.

Desafio

Fácil

Quando Save for pressionado, exiba uma SnackBar que diga Note saved.

Experimente você mesmo

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