Como usar Snackbar em Flutter?!

#android #flutter #snackbar #mobile

Por que resolvi escrever este post

Eai galera DEV, tudo certo?

Vim aqui publicar mais um post pra poder estar contribuindo para nossa comunidade dev e adquirindo conhecimento.

Nessa semana eu tive que fazer um Snackbar para o meu app de TCC e eu não sabia como poderia ser feito. Na verdade eu não sabia nem o nome do widget, então eu fui pesquisando por “barrinha de alerta mobile” até que encontrei o nome que era utilizado. Depois disso eu fui até a documentação do framework e aprendi como ele funciona, também pesquisei no Design Material suas boas práticas de uso. Vale muito a pena dedicar seu tempo para ler, os links estão no final do post.

Não achei muita coisa em português e para mim não foi algo tão simples de utilizar, mas depois que eu percorri por vários posts, vídeos e documentação eu consegui entender. Então resolvi juntar tudo em um lugar o que eu aprendi.

Separei alguns pontos que considero mais fundamentais e importantes na hora de programar.

Entenda seu uso

O Snackbar é utilizado para informar ao usuário um processo que foi executado ou irá ser executado. Ele tem que aparecer temporariamente na parte inferior da tela para que não atrapalhe o uso do aplicativo.

Ele tem basicamente três princípios:

Informativo: Fornece atualização do processo
Temporário: Ele aparece temporariamente e desaparece por conta própria
Contextual: É colocado na área mais adequada da interface.

Anatomia

Etiqueta de texto
Recipiente
Ação (opcional)

Comportamento

O Snackbar aparece por tempo determinado e depois é fechado sozinho, mas cuidado ao realizar muitas chamadas. Ele tem que aparecer um de cada vez, não deixa fazer uma pilha de Snackbar.

Não altere o comportamento dos elementos da tela para mostrar seu Snackbar, isso pode ser uma péssima experiência para o usuário.

Colocação

O Snackbar deve ficar na na parte inferior da interface do aplicativo, mas tem que ter cuidado com o lugar. Ele não pode cobrir a barra de navegação.

Snackbar que abrange toda a largura eu diria que é o mais importante a ter cuidado para o uso, pois até mesmo na documentação do Flutter eles mostram a explicação do snackbar desta maneira.

Então isso quer dizer que não podemos usar esse modo que abrange toda a largura da interface?

Não!

Pode ser utilizado, mas temos que tomar muito cuidado ao utilizá-lo. Como o exemplo anterior é bem retratado, ele pode cobrir barra de navegação.

Uma boa prática de uso de um snackbar.

Mão na massa!

Para utilizar o snackbar é bem simples, basta chamar a função showSnackBar passando o snackbar por parâmetro.

Desta maneira:

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Code Sample for Scaffold.of.',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: MyScaffoldBody(),
        appBar: AppBar(title: Text('Scaffold.of Example')),
      ),
      color: Colors.white,
    );
  }
}

class MyScaffoldBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: RaisedButton(
        child: Text('SHOW A SNACKBAR'),
        onPressed: () {
          Scaffold.of(context).showSnackBar(
            SnackBar(
              content: Text('Have a snack!'),
            ),
          );
        },
      ),
    );
  }
}

Mas como na vida nem tudo são rosas, você tem que ficar ligado que o ShowSnackbar é filho do Scaffold. E se você não usar um BuildContext diferente do pai do Scaffold pode dar ruim.

Snackbar Global

A maneira anterior de chamar o snackbar é para uma tela atual somente, isso quer dizer que se você fizer uma mudança de página não irá aparece-lo. Mas tem uma maneira de deixar ele global.

Passo 1

Colocar um Scaffold dentro do builder do seu MaterialApp.

class MyApp extends StatelessWidget {
 // This widget is the root of your application.
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     title: 'Flutter Demo',
     theme: ThemeData(
       primarySwatch: Colors.blue,
       visualDensity: VisualDensity.adaptivePlatformDensity,
     ),
     builder: (context, child) {
       return Scaffold(
         key: GlobalScaffold.instance.scafoldKey,
         body: child,
       );
     },
     initialRoute: '/',
     routes: {
       '/': (_) => MyHomePage(title: 'Flutter Demo snackbar global'),
       '/second': (_) => SecondPage(title: 'Segunda página')
     },
   );
 }
}

Passo 2

Criar uma classe para fazer criar um Scaffold global.

class GlobalScaffold {
 static final GlobalScaffold instance = GlobalScaffold();

 final scafoldKey = GlobalKey<ScaffoldState>();

 void showSnackbar(SnackBar snackBar) {
   scafoldKey.currentState.showSnackBar(snackBar);
 }
}

Passo 3

Criar a função responsável para invocar o snackbar.

void onClickSnackbarGlobal() {
 final snackbar = SnackBar(
     behavior: SnackBarBehavior.floating,
     elevation: 150.0,
     content: Text("Eu sou um Snackbar Global!"));
 GlobalScaffold.instance.showSnackbar(snackbar);
}

Passa 4

Por último é somente chamar a função no seu widget

@override
Widget build(BuildContext context) {
 return Scaffold(
   appBar: AppBar(
     title: Text(widget.title),
   ),
   body: ListView(
     padding: EdgeInsets.all(20),
     children: [
       RaisedButton(
           child: Text('Ir para segunda página'),
           onPressed: () {
             Navigator.pushNamed(context, "/second");
           }),
       RaisedButton(
         child: Text('Mostrar Sanackbar Global'),
         onPressed: () => onClickSnackbarGlobal(),
       )
     ],
   ),
 );
}

Resultado: