Simplificando o Feedback do Usuário com Snackbars no Flutter

As Snackbars são uma ferramenta poderosa no arsenal de um desenvolvedor Flutter para fornecer feedback rápido e discreto ao usuário. Elas são ideais para comunicar informações importantes ou notificar sobre a conclusão de uma ação.

Vou explicar cada parâmetro do construtor do SnackBar:

1. key: Uma chave única para identificar o widget. É útil quando você precisa interagir com o Snackbar programaticamente.
2. content: O conteúdo principal da Snackbar, geralmente um widget de texto, mas pode ser qualquer widget.
3. backgroundColor: A cor de fundo da Snackbar.
4. elevation: A elevação da Snackbar. Isso define a sombra da Snackbar em relação ao resto da tela.
5. margin: As margens ao redor da Snackbar, permitindo ajustar seu posicionamento na tela.
6. padding: O preenchimento interno da Snackbar.
7. width: A largura da Snackbar. Por padrão, ela se ajusta ao tamanho do conteúdo.
8. shape: A forma da Snackbar. Isso permite personalizar a aparência dos cantos da Snackbar.
9. behavior: O comportamento da Snackbar. Define como ela se comporta ao ser exibida na tela.
10. action: Um widget que representa a ação associada à Snackbar, geralmente um botão.
11. actionOverflowThreshold: O número máximo de ações que podem ser exibidas na Snackbar antes de serem recolhidas no menu de overflow.
12. showCloseIcon: Define se o ícone de fechar será exibido na Snackbar.
13. closeIconColor: A cor do ícone de fechar.
14. duration: A duração da Snackbar na tela antes de ser automaticamente fechada.
15. animation: A animação a ser usada ao exibir ou ocultar a Snackbar.
16. onVisible: Um callback que é chamado quando a Snackbar se torna visível na tela.
17. dismissDirection: A direção na qual a Snackbar pode ser descartada (por gestos de arrastar).
18. clipBehavior: O comportamento de recorte aplicado à Snackbar.

Esses parâmetros oferecem uma ampla gama de opções para personalizar o comportamento e a aparência da Snackbar de acordo com as necessidades do seu aplicativo.

Aqui está um exemplo simples de como criar e exibir uma Snackbar no Flutter:

Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            const snackBar = SnackBar(
              content: Text('Olá, este é um exemplo de Snackbar!'),
            );
            ScaffoldMessenger.of(context).showSnackBar(snackBar);
          },
          child: const Text('Show Toast'),
        ),
      ),
    )

Neste exemplo, ao pressionar o botão “Show Toast”, uma Snackbar simples é exibida na parte inferior da tela com a mensagem “Olá, este é um exemplo de Snackbar!”.

Alguns exemplos

BackgroundColor:

  const snackBar = SnackBar(
              backgroundColor: Colors.deepPurple,
              content: Text('Olá, este é um exemplo de Snackbar!'),
            );
ScaffoldMessenger.of(context).showSnackBar(snackBar);

Action:

 final snackBar = SnackBar(
                    content: const Text('Olá, este é um exemplo de Snackbar!'),
                    action: SnackBarAction(
                      label: 'Fechar',
                      onPressed: () {
                        // Alguma ação
                      },
                    ));
ScaffoldMessenger.of(context).showSnackBar(snackBar);

Behavior:

 const snackBar = SnackBar(
              behavior: SnackBarBehavior.floating,
              content: Text('Olá, este é um exemplo de Snackbar!'),
            );
 ScaffoldMessenger.of(context).showSnackBar(snackBar);

Elevation:

const snackBar = SnackBar(
              content: Text(
                'Olá, este é um exemplo de Snackbar!',
                style: TextStyle(color: Colors.black),
              ),
              elevation: 4,
              behavior: SnackBarBehavior.floating,
              backgroundColor: Colors.white,
            );
 ScaffoldMessenger.of(context).showSnackBar(snackBar);

Neste artigo, você terá uma visão de como personalizar e organizar melhor as Snackbars no Flutter.

Vamos começar colocando a mão na massa! Criaremos uma classe que encapsula um Snackbar personalizado, com quatro tipos de mensagens e durações predefinidas.

enum SnackbarTypes {
  success(color: Colors.green, icon: Icons.check_circle_outline_outlined),
  info(color: Colors.blue, icon: Icons.info_outline),
  warning(color: Colors.orange, icon: Icons.warning_outlined),
  error(color: Colors.red, icon: Icons.error);

  const SnackbarTypes({required this.color, required this.icon});
  final Color color;
  final IconData icon;
}

enum SnackbarDuration {
  short(duration: Duration(seconds: 4)),
  medium(duration: Duration(seconds: 8)),
  long(duration: Duration(seconds: 10));

  const SnackbarDuration({required this.duration});
  final Duration duration;
}

class ToastService {
  static void show(
    BuildContext context, {
    required String message,
    SnackbarTypes messageType = SnackbarTypes.error,
    SnackbarDuration duration = SnackbarDuration.short,
  }) {
    final size = MediaQuery.sizeOf(context);
    final snackBar = SnackBar(
      closeIconColor: Colors.white,
      showCloseIcon: true,
      dismissDirection: DismissDirection.horizontal,
      duration: duration.duration,
      behavior: SnackBarBehavior.floating,
      backgroundColor: messageType.color,
      content: Column(
        children: [
          Row(
            children: [
              Icon(
                messageType.icon,
                color: Colors.white,
              ),
              SizedBox(width: size.width * 0.02),
              Expanded(
                child: Text(
                  message,
                  style: const TextStyle(
                    color: Colors.white,
                    fontSize: 16,
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
    ScaffoldMessenger.of(context)
      ..hideCurrentSnackBar()
      ..showSnackBar(snackBar);
  }
}

Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                ToastService.show(
                  context,
                  message: 'Sucesso!',
                  messageType: SnackbarTypes.success,
                  duration: SnackbarDuration.long,
                );
              },
              child: const Text('Show Toast type sucesso'),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                ToastService.show(
                  context,
                  message: 'Informação!',
                  messageType: SnackbarTypes.info,
                  duration: SnackbarDuration.medium,
                );
              },
              child: const Text('Show Toast type info'),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                ToastService.show(
                  context,
                  message: 'Aviso!',
                  messageType: SnackbarTypes.warning,
                  duration: SnackbarDuration.short,
                );
              },
              child: const Text('Show Toast type warning'),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                ToastService.show(
                  context,
                  message: 'Erro!',
                  messageType: SnackbarTypes.error,
                  duration: SnackbarDuration.short,
                );
              },
              child: const Text('Show Toast type error'),
            ),
          ],
        ),
      ),
    );

Então, galera, nesse artigo a gente pegou aquele lance das Snackbars no Flutter e deu uma repaginada total! Primeiro, mostramos como criar uma Snackbar bem básica, daquelas simples de entender, sabe? Depois, partimos pro próximo nível e montamos uma classe irada chamada ToastService que cuida das Snackbars personalizadas. Com isso, agora você tá ligado pra caramba e pronto pra turbinar as Snackbars do seu app, deixando tudo mais organizado e estiloso! É só botar a mão na massa e se jogar nessa vibe no Flutter!

Link para a comunidade flutter do discord:

Participe da comunidade Flutter no Discord! Junte-se a nós em discussões e colaborações sobre Flutter. Clique aqui para acessar

Referência:

Display a snackbar