Um estudo sobre o Flutter FutureBuilder

WellsSA — Fri, 13 Dec 2019 16:03:04 +0000

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!

Forem: WellsSA

Um estudo sobre o Flutter FutureBuilder

FutureBuilder

Mãos à obra

Sobre Nós