Um estudo sobre o Flutter FutureBuilder

Esse artigo faz parte de uma série chamada "Widgets da Semana", para saber mais sobre essa ela leia nossa introdução.

FutureBuilder

O video do Widget da semana postado no dia 18 de setembro de 2018 fala sobre o FutureBuilder.

Quando falamos de arquitetura Web, requisições e etc é normal pensar em um cliente chamando um servidor. E nesse caminho mágico ocorrem uma série de coisas, mas o que importa para falarmos do FutureBuilder é: sua requisição leva tempo!
Ela pode levar de alguns milissegundos a vários segundos pra te retornar algo importante - e esse retorno ainda por cima pode ser um erro! :D

Pensando nisso, o FutureBuilder te permite lidar com esses percalços do mundo assíncrono e dizer qual Widget deve ser renderizado de acordo com cada situação durante uma requisição. :O

Assim, você pode fazer o seguinte fluxo:

• Flutter, faça uma requisição pra https://minha-poke-api.com
• Enquanto você espera, mostre pro usuário uma barra de loading
• Se der bom, mostre uma lista de pokemons
• Se der ruim, mostre um widget dizendo "não foi dessa vez, meu consagrado"

E pra isso acontecer, você só precisa usar o FutureBuilder! Ele recebe, adivinha? Um future e um builder.

FutureBuilder(
  future: http.get('https://minha-poke-api.com'),
  builder: (context, snapshot) {
    return ...
  }
)

O future recebe um processo assíncrono (não somente requisições)
e o builder recebe uma função que diz qual Widget deve ser construído.

Na função passada ao builder temos um:

• context que recebe um BuildContext (Que merece um artigo próprio e não precisaremos ver por hora).
• snapshot do tipo AsyncSnapshot (Esse sim nos ajuda e muito na hora de tratar essas requisições!!)

O AsyncSnapshot possui propriedades que nos ajudam - E MUITO - a entender o que está acontecendo durante a requisição e tratar isso, por exemplo:

• Saber se ocorreu algum erro (hasError) ou se o retorno contém dados de fato (hasData)
• Saber o estado atual do processo assíncrono, se ele foi concluído (done), se ainda estamos aguardando um retorno (waiting), se temos de fato um processo (active) ou não (none). E por aí vai.

Sendo assim, podemos usar o snapshot para tratar o fluxo que pretendemos fazer, por exemplo:

• Quando a requisição for concluída, verificar se ela teve algum erro

  if (snapshot.hasError) {
    // Deu ruim :/ - Podemos pegar o snapshot.error
  } else {
    // Deu bom! :D - Podemos pegar o snapshot.data
  }

• Acompanhar o fluxo completo da requisição!!

    switch (snapshot.connectionState) {
      case ConnectionState.none: 
        return Text('Aperte o botão para iniciar a requisição.');
      case ConnectionState.active: 
      case ConnectionState.waiting:
        return Text('Esperando requisição...');
      case ConnectionState.done:
        return Text('Uhul, acabou!');
    }

Agora sim, chega de enrolação! Prontos?

Mãos à obra

FutureBuilder à postos

FutureBuilder(
  future: ...,
  builder: (context, snapshot) {
    return ...
  }
)

Enquanto a requisição não for concluída, mostramos nossa barra de loading

FutureBuilder(
  future: http.get('https://minha-poke-api.com'),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.done) {
      return ...
    } else {
      return CircularProgressIndicator();
    }
  }
)

Assim que ela for concluída, vamos verificar se não ocorreu nenhum erro, claro!

FutureBuilder(
  future: http.get('https://minha-poke-api.com'),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.done) {
      if(snapshot.hasError) { 
        return OurErrorIndicator(snapshot.error);
      }     
      return ...
    } else {
      return CircularProgressIndicator();
    }
  }
)

E, finalmente: vamos montar nossos pokemons!

FutureBuilder(
  future: http.get('https://minha-poke-api.com'),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.done) {
      if(snapshot.hasError) { 
        return OurErrorIndicator(snapshot.error);
      }     
      return PokeListGenegator(snapshot.data);
    } else {
      return CircularProgressIndicator();
    }
  }
)

Simples, prático e rápido. Esse é o FutureBuilder!

Alguns projetos e palestras estão prestes a sair do forno e agora você já deu um passo pra acompanhar isso com muito mais facilidade!

Se interessou? Cola com a Flutter Nation:

Sobre Nós

Eu e o pessoal da Flutter Nation estamos em uma página e um grupo no Facebook.
Também estamos no Meetup e no GitHub!