loading...

Snackbars em Flutter

lukesilva_dev profile image 🐙 Lukão 🐙 ・2 min read

Decidi voltar a escrever após um looooongo hiato devido ao cansaço da pandemia. É bastante provável que eu tenha me esquecido de regras gramaticais, ortografia etc, então esse texto sera bem curto 😅

Exemplo de snackbar

Por que usar uma snackbar ?

Conforme a definição dada no site do Material Design, "Snackbars informam aos usuários que sobre um processo que a aplicação realizou ou realizará. Elas aparecem temporariamente na parte inferior da tela. Não interrompem a UX e não requerem interações para desaparecerem".
É possível encontrá-las em diversos contextos onde a pessoa usuária apaga um item e uma snackbar mostra a opção de desfazer a ação.

Implementando uma snackbar

Sem mais delongas, vamos para a parte de código. Implementar este widget pode ser tão simples quanto

Scaffold.of(context).showSnackBar(
  SnackBar(
    content: Text("Oi ! Sou uma snackbar")
   )
);

ponto de atenção: o contexto passado deve ser filho de um widget Scaffold
Snackbar criada pelo código acima

Customizando o widget

  • content: o conteúdo primário da snackbar. Recebe um widget como parâmetro
content: Text("Oi! Não deixe de curtir esta postagem!"),
  • backgroundColor: a cor de fundo do widget. Caso não seja especificada, utilizará a cor de ThemeData.snackBarTheme.backgroundColor. ou um tom escuro.
backgroundColor: Colors.blue,
  • elevation: define a elevação do widget. Basicamente, quanto maior o valor, maior a sombra na parte inferior da barra.
elevation: 100.0,
  • shape: define a forma da snackbar. É possível torná-la arredondada utilizando RoundedRectangleBorder:
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(100)),

Borda arredondada

  • behavior: define como a snackbar deve aparecer, principalmente quando há FloatingActionButton ou BottomNavigationBar. O código abaixo faz com que o widget levante FloatingActionButtons e apareça acima da BottomNavigationBar
behavior: SnackBarBehavior.fixed

SnackBarBehavior.fixed

Já o outro comportamento faz com que a snackbar apareça acima desses widgets e não preencha toda a tela na horizontal:

behavior: SnackBarBehavior.floating

SnackBarBehavior.floating

  • action: uma ação que o usuário pode realizar interagindo com a snackbar. Geralmente utilizada com "Desfazer" ou algo do tipo.
action: SnackBarAction(
  textColor: Colors.white,
  label: "Desfazer",
  onPressed: () { // insira uma função aqui } 
),

SnackBarAction

  • duration: o tempo no qual a snackbar aparecerá na tela. O padrão é 4s. Para mudar:
duration: Duration(seconds: 2),
  • onVisible: chama uma função assim que o widget aparece na tela:
onVisible: () {// insira uma função aqui }

Por fim, há também a propriedade "animation", a qual merece um artigo exclusivo! Caso tenha interesse, me avise ali no Twitter que eu escrevo um artigo sobre o assunto!

Valeu por ter lido até aqui ! Até a próxima postagem 😊

Discussion

pic
Editor guide