Exemplo de Personalizar Flutter Snackbar

Publicado em por
Tempo de leitura: 5 minutes

Flutter snackbar é um widget de material em flutter. Snackbar in flutter é usado para notificar os usuários com uma mensagem curta. Podemos usar o flutter snackbar após uma ação específica, por exemplo: após excluir um arquivo ou quando não há conexão com a Internet disponível e o flutter snackbar é exibido na parte inferior da tela e exibe uma mensagem por um curto período de tempo e desaparece.

O Flutter fornece um widget chamado SnackBar que nos permite adicionar um snackbar ao nosso aplicativo. Portanto, este tutorial mostra como usar um widget de snackbar no flutter com exemplo e também personalizará seu estilo com diferentes propriedades.

Podemos criar snackbar flutter em nosso aplicativo chamando seu construtor e há apenas uma propriedade necessária para criar um snackbar que é content.

Normalmente, usaremos um widget de texto para conteúdo, pois precisamos mostrar alguma mensagem ao usuário.

Podemos usar outros widgets se quisermos.

Para mostrar uma mensagem no snackbar, podemos usar o widget de texto para conteúdo.

SnackBar({
 Key? key, 
 required Widget content, 
 Color? backgroundColor, 
 double? elevation, 
 EdgeInsetsGeometry? margin, 
 EdgeInsetsGeometry? padding, 
 double? width, 
 ShapeBorder? shape, 
 SnackBarBehavior? behavior, 
 SnackBarAction? action, 
 Duration duration, 
 Animation<double>? animation, 
 VoidCallback? onVisible
})

 

Mostrando Flutter Snackbar

Você não pode exibir um snackbar continuamente como outros widgets.

Podemos exibir o snackbar para alguma ação realizada no aplicativo, como arquivo excluído ou sem conexão com a internet, portanto, nesses casos, você pode exibir um snackbar para o usuário.

Abaixo está o código para exibir um snackbar em flutter

ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
            content: Text('Hi, Flutter developers'),
          )
      );

 

Flutter Snackbar exemplo de código completo

Vejamos um exemplo onde criamos um botão no flutter e ao clicar no botão mostraremos uma snackbar, também criaremos um método separado onde implementaremos nosso snackbar para abordagem de código limpo, então vamos verificar o código abaixo.

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
@override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Snackbar demo'),
        ),
        body: SnackBarPage(),
      ),
    );
  }
}
class SnackBarPage extends StatelessWidget {
  const SnackBarPage({Key? key}) : super(key: key);
void showSnackBar(BuildContext context) {
    final snackBar = SnackBar(
      content: Text('Olá, desenvolvedores do Flutter'),
    );
    ScaffoldMessenger.of(context).showSnackBar(snackBar);
  }
@override
  Widget build(BuildContext context) {
    return Center(
      child: MaterialButton(
        child: Text('Show Snackbar'),
        color: Colors.blue,
        textColor: Colors.white,
        onPressed: () {
          showSnackBar(context);
        },
      ),
    );
  }
}

 

Propriedades do Flutter Snackbar

As Propriedades de uma Snackbar são:

  • backgroundColor
  • padding
  • shape
  • behavior
  • width
  • margin
  • elevation
  • duration
  • action
  • onVisible

Agora vamos ver todas as propriedades do snackbar, uma por uma.

 

Flutter Snackbar BackgroundColor

Se você quiser alterar a cor de fundo do snackbar para usar a propriedade BackgroundColor, vejamos no código

void showSnackBar(BuildContext context) {
    final snackBar = SnackBar(
      content: Text('Hi, Flutter developers'),
      backgroundColor: Colors.teal,
    );
    ScaffoldMessenger.of(context).showSnackBar(snackBar);
  }

Saída:

 

Padding

Se você quiser alterar a cor de fundo do snackbar para usar a propriedade BackgroundColor, vejamos no código

void showSnackBar(BuildContext context) {
    final snackBar = SnackBar(
      content: Text('Hi, Flutter developers'),
      backgroundColor: Colors.teal,
      padding: EdgeInsets.all(20),
    );
    ScaffoldMessenger.of(context).showSnackBar(snackBar);
  }

Saída:

 

Shape

Para alterar a forma do snackbar, use a propriedade shape e estou apenas usando a forma da borda de stadioum no exemplo abaixo

void showSnackBar(BuildContext context) {
    final snackBar = SnackBar(
      content: Text('Hi, Flutter developers'),
      backgroundColor: Colors.teal,
        shape: StadiumBorder()
    );
    ScaffoldMessenger.of(context).showSnackBar(snackBar);
  }

Saída:

 

Behavior

Por padrão, o comportamento do snackbar é fixo. Se quisermos alterá-lo, temos que usar a propriedade de comportamento onde fornecemos a constante SnackBarBehavior como valor. O SnackBarBehavior tem duas constantes fixas e flutuantes e se houver um widget BottomNavigationBar presente, o snackbar será exibido acima da navegação inferior se o comportamento for fixo.

void showSnackBar(BuildContext context) {
    final snackBar = SnackBar(
      content: Text('Hi, Flutter developers'),
      backgroundColor: Colors.teal,
      behavior: SnackBarBehavior.floating,
    );
    ScaffoldMessenger.of(context).showSnackBar(snackBar);
  }

Saída:

 

Width

Podemos definir ou alterar a largura do snackbar usando a propriedade width.

NOTA: Podemos usar as propriedades de largura, margem e elevação de snackbar somente quando o comportamento é definido como flutuante. Lembre-se também de que temos que usar largura ou margem, mas não ambas para uma snackbar. Fazer isso gerará um erro.

void showSnackBar(BuildContext context) {
    final snackBar = SnackBar(
      content: Text('Hi, Flutter developers'),
      backgroundColor: Colors.teal,
      behavior: SnackBarBehavior.floating,
      width: 200,
    );
    ScaffoldMessenger.of(context).showSnackBar(snackBar);
  }

Saída:

 

Margin

Para definir a margem como snackbar, podemos usar a propriedade margin. A margem nada mais é do que a quantidade de espaço que queremos ao redor da snackbar.

void showSnackBar(BuildContext context) {
    final snackBar = SnackBar(
      content: Text('Hi, Flutter developers'),
      backgroundColor: Colors.teal,
      behavior: SnackBarBehavior.floating,
      margin: EdgeInsets.all(50),
    );
    ScaffoldMessenger.of(context).showSnackBar(snackBar);
  }

 

Saída:

 

Elevation

Podemos alterar a elevação do snackbar usando a propriedade de elevação.

void showSnackBar(BuildContext context) {
    final snackBar = SnackBar(
      content: Text('Hi, Flutter developers'),
      backgroundColor: Colors.teal,
      behavior: SnackBarBehavior.floating,
      margin: EdgeInsets.all(50),
      elevation: 30,
    );
    ScaffoldMessenger.of(context).showSnackBar(snackBar);
  }

Saída:

 

Duration

Se você quiser alterar a duração de exibição do snackbar, poderá usar a propriedade Duration e fornecer a duração em microssegundos, milissegundos ou minutos.

void showSnackBar(BuildContext context) {
    final snackBar = SnackBar(
      content: Text('Hi, Flutter developers'),
      backgroundColor: Colors.teal,
      behavior: SnackBarBehavior.floating,
      duration: Duration(milliseconds: 10000),
    );
    ScaffoldMessenger.of(context).showSnackBar(snackBar);
  }

Action

Você pode adicionar um botão de ação ao seu snackbar e para isso você precisa usar a propriedade Action do snackbar.

O valor para action é SnackBarAction() e tem quatro propriedades principais.

  • label : O nome que queremos exibir para o botão de ação.
  • textColor : Para adicionar cor ao texto do actionButton.
  • disabledTextColor : A cor do texto a ser exibido quando o botão de ação é desabilitado.
  • onPressed : Uma função de retorno de chamada para executar qualquer ação quando clicamos no botão de ação.
void showSnackBar(BuildContext context) {
    final snackBar = SnackBar(
      content: Text('Hi, Flutter developers'),
      backgroundColor: Colors.teal,
      behavior: SnackBarBehavior.floating,
      action: SnackBarAction(
        label: 'Dismiss',
        disabledTextColor: Colors.white,
        textColor: Colors.yellow,
        onPressed: () {
          //Do whatever you want
        },
      ),
    );
    ScaffoldMessenger.of(context).showSnackBar(snackBar);
  }

Saída:

 

Flutter Snackbar onVisible

Se quisermos executar uma ação quando o snackbar for exibido, podemos fazê-lo dentro da função callback onVisible().

  final snackBar = SnackBar(
    content: Text('Hi, Flutter developers'),
    backgroundColor: Colors.teal,
    behavior: SnackBarBehavior.floating,
    action: SnackBarAction(
      label: 'Dismiss',
      disabledTextColor: Colors.white,
      textColor: Colors.yellow,
      onPressed: () {
        //Do whatever you want
      },
    ),
    onVisible: (){
        //your code goes here
    },
  );
  ScaffoldMessenger.of(context).showSnackBar(snackBar);
}

 

Então, pessoal, esse é o fim deste tutorial, espero que você entenda como usar o snackbar no flutter e também como personalizá-lo.

Se você tiver alguma dúvida, pode me perguntar na seção de comentários abaixo.

Codificação feliz!

 
Twittar
Compartilhar
Compartilhar
0 Compart.