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!
Top comments (0)