Snackbars em Flutter

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 😅

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

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)),

• 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

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

• 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 } 
),

• 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 😊