Flutter - Exibindo SnackBars


Hoje veremos como exibir SnackBars no Flutter.

O Flutter é um SDK de aplicativo móvel do Google que ajuda a criar aplicativos móveis modernos para iOS e Android usando uma única (quase) base de código.

Se você não conhece o Flutter veja o meu artigo :  Flutter - Primeiros contatos e impressões

Assista também às aulas:

Exibindo SnackBars

O que é um Snackbar ?

Se você consultar um dicionário de inglês vai encontrar a seguinte tradução para o termo: lanchonete, área de lanches, barra (cereal), etc.

Mas, na verdade, o termo Snackbar, no contexto do Flutter, é oriundo do Material Design e significa o seguinte:

"Snackbars fornecem breves mensagens sobre processos de aplicativos na parte inferior da tela"

Assim, Snackbars informam os usuários sobre um processo que um aplicativo executou ou executará. Eles aparecem temporariamente, na parte inferior da tela e não devem interromper a experiência do usuário e não exigem que a a intervenção do usuário para que a mensagem desapareça.

Somente um SnackBar pode se exibido por vez e ele pode conter uma única ação, devendo desaparecer automatícamente.

SnackBars atuam conforme os seguintes princípios:

Informativo - Fornece atualizações nos processos de uma aplicação
Temporário - Aparecem temporariamente e desaparecem por conta própria, sem exigir que o usuário atue.
Contextual - São colocados na área mais adequada da interface do usuário.

Dessa forma, em alguns cenários, pode ser útil informar brevemente os usuários quando certas ações ocorrem. Por exemplo, quando um usuário remove uma mensagem em uma lista, podemos informar que a mensagem foi excluída.

No Material Design, este é o trabalho de um SnackBar.

Para criar um SnackBar bem simples temos que :

  1. Criar um Scaffold
  2. Exibir um SnackBar
  3. Fornecer uma Ação adicional

1 - Criar um Scaffold

Ao criar aplicativos que seguem as diretrizes do Material Design, queremos dar aos nossos aplicativos uma estrutura visual consistente. Nesse caso, precisaremos exibir o SnackBar na parte inferior da tela, sem sobrepor outros Widgets importantes, como o FloatingActionButton!
   
O widget Scaffold da biblioteca Material cria essa estrutura visual para nós e garante que Widgets importantes não se sobreponham.

Abaixo um trecho de código padrão para criar um Scaffold e definir uma função no body para criar um SnackBar:

Scaffold(
  appBar: AppBar(
    title: Text('SnackBar Demo'),
  ),
  body: SnackBarPage(), // código para criar o snackbar
);

2- Exibir um SnackBar

Agora que definimos o Scaffold precisamos definir o código que vai criar o Snackbar.

final snackBar = SnackBar(content: Text('Voilá! Um SnackBar!'));
// Encontra o Scaffold na árvore de Widgets e o usa para exibir o SnackBar
Scaffold.of(context).showSnackBar(snackBar);

Definimos o construtor da classe SnackBar() definindo a mensagem a ser exibida.

Usamos o método Scaffold.of que procura o estado da instância mais próxima dessa classe que inclui o contexto fornecido.

Definimos o método showSnackbar() que vai exibir um SnackBar na parte inferior do Scaffold.

3- Fornecer uma ação adicional

Em alguns casos, você pode querer fornecer uma ação adicional ao usuário quando a SnackBar for exibida. Por exemplo, se uma mensagem for acidentalmente excluída, poderemos fornecer uma ação para desfazer essa alteração.

final snackBar = SnackBar(
  content: Text('Voilá! Um SnackBar!'),
  action: SnackBarAction(
    label: 'Desfazer',
    onPressed: () {
      // Código para desfazer a ação!
    },
  ),
);

A classe SnackBarAction fornece um botão para um SnackBar, conhecido como "Action".

As ações de um Snackbar estão sempre ativadas. Se você quiser desabilitar uma ação basta não incluir a ação no SnackBar. Essas acções só podem ser acionadas uma vez, pressões subseqüentes são ignoradas.

Criando o projeto para exibir o Snackbar

Neste projeto vamos definir um botão no centro da tela que ao ser clicado exibe o snackbar.

No Visual Studio Code tecle CTRL+ SHIFT+P para abrir a paleta de comandos e a seguir selecione a opção : Fluter:New Project



A seguir informe o nome do projeto : flutter_snackbar e tecle ENTER

Na janela de diálogo a seguir selecione a pasta onde o projeto vai ser salvo e clique em :
Select a folder to create the project in

O Flutter vai criar um projeto padrão onde todo o código da aplicação vai estar no arquivo main.dart dentro da pasta lib do projeto.

Abra o arquivo main.dart e inclua o código abaixo :

import 'package:flutter/material.dart';
void main() => runApp(SnackBarDemo());
class SnackBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SnackBar Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('SnackBar Demo'),
        ),
        body: SnackBarPage(),
      ),
    );
  }
}
class SnackBarPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: RaisedButton(
        onPressed: () {
          final snackBar = SnackBar(
            content: Text('Voilá! Um SnackBar!'),
            action: SnackBarAction(
              label: 'Desfazer',
              onPressed: () {
                // código para desfazer a ação!
              },
            ),
          );
          // Encontra o Scaffold na árvore de widgets
          // e o usa para exibir o SnackBar!
          Scaffold.of(context).showSnackBar(snackBar);
        },
        child: Text('Exibir SnackBar'),
      ),
    );
  }
}

Executando o projeto teremos o seguinte resultado:

Aguarde mais artigos sobre o Flutter.

Pegue o código do arquivo main.dart aqui : main_snackbar.zip

"Palavra fiel é esta: que, se morrermos com ele, também com ele viveremos;
Se sofrermos, também com ele reinaremos; se o negarmos, também ele nos negará;
Se formos infiéis, ele permanece fiel; não pode negar-se a si mesmo."
2 Timóteo 2:11-13

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

Referências:


José Carlos Macoratti