Neste tutorial, apresentaremos a classe Flutter SnackBar, um dos muitos widgets que implementam Material Design no Flutter. Examinaremos alguns dos recursos mais importantes do widget, descreveremos etapas para personalizar e exibir um SnackBar em um aplicativo Flutter e examinaremos alguns exemplos do mundo real para mostrar como o SnackBar funciona na prática.
Para acompanhar, você deve ter um conhecimento básico de Desenvolvimento de aplicativo Flutter e alguma experiência com o uso do SDK para construir aplicativos de plataforma cruzada.
Sem mais delongas, vamos começar!
O que é a classe SnackBar?
SnackBar é um widget Flutter que permite exibir temporariamente um pop-mensagem em seu aplicativo. Geralmente aparece na parte inferior da tela do aplicativo.
Por exemplo, você pode usar o widget SnackBar para informar ao usuário quando um item selecionado foi adicionado ao carrinho ou excluído, ou para indicar que um formulário foi enviada ou uma imagem foi carregada com sucesso.
Considerações para implementar um SnackBar em um aplicativo Flutter
Ao implementar um SnackBar, você deve considerar os seguintes recursos e/ou funções:
Frequência
Isso envolve quanto tempo um SnackBar é exibido no aplicativo. Sempre tenha em mente que o SnackBar não deve distrair o usuário final do objetivo principal do aplicativo.
Este é um dos motivos pelos quais um SnackBar é normalmente colocado na parte inferior da tela do aplicativo. A duração recomendada para um SnackBar ser exibido em um aplicativo Flutter é de quatro a 10 segundos-não mais.
Ações
Embora, como mencionado anteriormente, um SnackBar possa desaparecer da tela do aplicativo após um determinado período sem a interação do usuário, é uma boa prática implementar algum tipo de elemento interativo para acompanhar sua mensagem.
Por exemplo, você pode criar um botão de ação com um rótulo como “Dispensar” ou “Tente novamente” e anexe-o ao widget SnackBar.
Informatividade
Um dos casos de uso mais comuns e cruciais para o widget SnackBar em um aplicativo Flutter é transmitir informações importantes sobre os processos do aplicativo. Para um exemplo simples, o SnackBar pode mostrar uma mensagem como “Bem-sucedido” quando o usuário clica em um botão para enviar um formulário, fazer upload de um arquivo, etc.
Construindo, exibindo e personalizando o SnackBar
Para começar a construir, exibir e estilizar sua SnackBar, primeiro conclua as seguintes etapas:
Inicie o Android Studio ou outro IDE de sua escolha Inicie um novo projeto Flutter Selecione Aplicativo Flutter e nomeie o projeto como “snackbardemo”
OBSERVAÇÃO: se você encontrar o erro “Recursos de segurança nulos” ao tentar compilar e executar o código, poderá corrigi-lo atualizando o Flutter para versão 2.12 ou superior .
Para atualizar para a versão mais recente do Flutter, clique no terminal no Android Studio e execute o seguinte comando:
flutter upgrade
Em seguida, limpe o código, exceto para void main ()=> runApp (MyApp ()) ;, que é o que o Flutter gera quando um novo projeto é criado. Estamos fazendo isso porque queremos construir do zero.
Agora você deve ter algo assim em seu editor:
import’package: flutter/material.dart’; void main ()=> runApp (MyApp ());
Agora, altere MyApp () para const SnackBarDisplay ():
void main ()=> runApp (SnackBarDisplay ());
void main () é o principal ponto de entrada para programas Dart. O Flutter usa a função ou método runApp () como o widget raiz do aplicativo.
Aqui, estamos criando um widget, que chamaremos de SnackBarDisplay. Esta será a raiz do nosso aplicativo.
Insira o código abaixo após void man (). O SnackBarDisplay estende o StatelessWidget, tornando SnackBarDisplay um widget.
a classe SnackBarDisplay estende StatelessWidget {const SnackBarDisplay ({Key? Key}): super (key: key); @override Widget build (BuildContext context) {return MaterialApp (title:’Exibindo um SnackBar’, home: Scaffold (backgroundColor: (Colors.grey), appBar: AppBar (title: const Text (‘Exibindo um SnackBar’), backgroundColor: Colors.black12,), body: const SnackBarPage (),),); }}
Estamos usando a biblioteca do Material Design para criar a estrutura do aplicativo. Material é um sistema de design de código aberto de propriedade do Google para personalizar aplicativos Android, Flutter, iOS e web. Conforme mencionado anteriormente, Flutter tem uma grande variedade de widgets de Material .
O widget Scaffold fornece a barra de aplicativos padrão, um título e uma propriedade body, que contém a árvore de widgets para nossa tela inicial, home: Scaffold (). O widget Scaffold é necessário para exibir uma SnackBar.
backgroudColor: (Colors.grey) é usado para alterar o plano de fundo padrão do aplicativo Flutter.
Em seguida, crie a seção SnackBar por usando o código abaixo. Aqui, quando o usuário clica no botão, o SnackBar é exibido:
class SnackBarPage extends StatelessWidget {const SnackBarPage ({Key? Key}): super (key: key); @override Widget build (BuildContext context) {return Center (child: ElevatedButton (onPressed: () {final snackBar=SnackBar (content: const Text (‘Olá, sou um SnackBar!’), backgroundColor: (Colors.black12), ação: SnackBarAction (label:’dispensar’, onPressed: () {},),); ScaffoldMessenger.of (context).showSnackBar (snackBar);}, child: const Text (‘Click to Display a SnackBar’,), ),); }}
No código acima, temos o widget de construção-construção de widget (contexto BuildContext)-e o que não vale nada aqui é o argumento BuildContext, que especifica onde o widget é construído.
Neste Por exemplo, estamos construindo um botão de widget personalizado, ElevatedButton, que ficará no centro da tela do aplicativo. O ElevatedButton é um widget filho colocado no centro de retorno.
Em seguida, usamos a classe ScaffoldMessenger para exibir o SnackBar.
Finalmente, execute o programa. Você deve ver algo assim:
Clicar no botão exibirá o SnackBar com a seguinte mensagem:“ Olá, sou um SnackBar! ”
Conclusão
Espero que você tenha achado este tutorial esclarecedor. O Flutter facilita a criação de aplicativos em plataformas móveis e na web. No centro do Flutter estão os widgets . O widget SnackBar facilita o compartilhamento de mensagens importantes e informativas com seus usuários para ajudá-los a aproveitar ao máximo seu aplicativo Flutter.
Você pode aprender mais sobre o Flutter navegando em nossa coleção de Artigos e tutoriais oscilantes .
Boa programação!
