O <a href="https://flutter.dev/">Flutter</a> é um framework de desenvolvimento híbrido para mobile, tanto Android quanto IOS, que trabalha em cima de widgets. Toda <a href="https://dtidigital.com.br/blog/multiplataforma-vs-nativo-qual-utilizar-em-aplicativos/">aplicação mobile</a> precisa de uma maneira para lidar com chamadas assíncronas e para compartilhar estado entre as telas do aplicativo. E com o Flutter não é diferente, porém ele têm algumas funcionalidades, muito interessantes, para te auxiliar com isso: futures e providers.



Pensando em ajudar você a entender melhor como essas funcionalidades funcionam, escrevi um breve tutorial mostrando como implementá-las. Vamos lá?



<h2>Futures – a maneira como o flutter lida com funções assíncronas</h2>
Imagine que você é um garçom e a cozinha te avisa que um prato foi liberado. Logo, você irá demorar alguns segundos para buscar o prato e realizar a entrega para o cliente que fez esse pedido. Vamos chamar esta ação de buscarPratoNaCozinha. Veja como isso ficaria no formato de um future: 



<pre>class Prato {
 String nome;
 int preco;

 Prato(int preco, String nome){
 this.nome = nome;
 this.preco = preco;
 }
}

Future &lt;Prato&gt; buscarPratoNaCozinha(){
 var prato = Future&lt;Prato&gt;.delayed(
 Duration(seconds: 4),
 () =&gt; new Prato(40, "Tropeiro completo"),
 );

 return prato;
}
</pre>



<h2>Mas, e ai? Bom, com um future, você consegue renderizar a tela com um FUTURE BUILDER.</h2>
Vem que eu te explico como funciona: o Flutter possui essa funcionalidade chamada future builder. Com ela, você altera a tela para o seu usuário, baseado no estado atual da sua requisição assíncrona. Para simplificar, vamos considerar que nossa requisição possui apenas três estados: 



<ol class="wp-block-list">
<li>default:<s>,</s> ela ainda não está completa, ou seja, não houve nenhum retorno;</li>
<li>hasData:<s>,</s> que foi um sucesso e sua função assíncrona já retornou o valor;</li>
<li>hasError:<s>,</s> ocorreu um erro na sua função assíncrona. </li>
</ol>



No caso da nossa chamada buscarPratoNaCozinha(), temos que: 



<ol class="wp-block-list">
<li>default: o garçom ainda não retornou com o prato para a mesa do cliente;</li>
<li>hasData: já nos retornou um prato;</li>
<li>hasError: o garçom deixou o prato cair no caminho para a mesa. </li>
</ol>



Veja como ficaria o código e o resultado: 



<pre> FutureBuilder&lt;Prato&gt;(
 future: _future,
 builder: (BuildContext context, AsyncSnapshot&lt;Prato&gt; snapshot){
 if (snapshot.hasData){
 Prato prato = snapshot.data;
 //Widget para o prato.
 } else if (snapshot.hasError){
 //Widget do erro, caso ele aconteça.
 } else{
 //Widget para exibir o progresso.
 }
 }
)

</pre>



<div class="wp-block-image">
<figure class="aligncenter size-large is-resized"><img fetchpriority="high" decoding="async" class="alignnone wp-image-7556" src="https://dtidigital.com.br/wp-content/uploads/2020/03/foto-2-1-1024x786.png" alt="framework de desenvolvimento mobile" width="701" height="538" srcset="https://www.cms.dtidigital.com.br/wp-content/uploads/2020/03/foto-2-1-1024x786.png 1024w, https://www.cms.dtidigital.com.br/wp-content/uploads/2020/03/foto-2-1-300x230.png 300w, https://www.cms.dtidigital.com.br/wp-content/uploads/2020/03/foto-2-1-768x590.png 768w, https://www.cms.dtidigital.com.br/wp-content/uploads/2020/03/foto-2-1.png 1407w" sizes="(max-width: 701px) 100vw, 701px" /></figure>
</div>



Note que um Future Builder recebe um future (a chamada assíncrona que ele irá realizar) e um builder (que ele irá renderizar na tela dependendo do estado da chamada). Toda vez que o estado muda, o Flutter chama o método builder  novamente e identifica qual componente ele tem que renderizar, através das condições que colocamos dentro do builder. 



<h2>Providers – como controlar o estado global da sua aplicação</h2>
Agora imagine que a cozinha desse restaurante é dividida em algumas partes, e que cada parte tem uma televisão onde eles veem quais são os pedidos. Por exemplo, uma parte da cozinha cuida do preparo das verduras, e outra cuida do preparo da carne. Como avisar para todos que um novo pedido chegou? 



Existem abordagens diferentes, as mais comuns são: redux, BLoC e provider. Nesse tópico iremos implementar um provider, que foi a abordagem utilizada no nosso projeto em Flutter. Veja como ficou o código para o nosso primeiro provider: 



<pre>class Pedidos with ChangeNotifier {
 final List&lt;Prato&gt; _pedidosPendentes = [];

 UnmodifiableListView&lt;Prato&gt; get pedidos =&gt; UnmodifiableListView(_pedidosPendentes);

 void realizarPedido(Prato prato) {
 _pedidosPendentes.add(prato);

 notifyListeners();
 }
}
</pre>



Nele, temos uma lista privada de pratos, _pedidosPendentes, que será exibida para todas as partes da nossa cozinha, e dois métodos: realizarPedido, que adiciona um prato a nossa lista, e pedidos, que retorna uma instância imutável da lista _pedidosPendentes. 



Agora, para continuar o fluxo de um provider, precisamos inserir um pedido, por meio do método realizarPedido, veja como fica: 



<pre> void _inserirNovoPrato(BuildContext context, Prato prato){
 Provider.of&lt;PedidosModel&gt;)(context, listen: false).realizarPedido(prato);
}

Widget _blocoPrato(BuildContext context, Prato prato){
 BorderSide borda = BorderSide(width: 2.0, color: Colors.black);

 return InkWell(
 child: Padding(
 padding: EdgeInsets.only(top: 16),
 child: Container(
 padding: EdgeInsets.all(24),
 decoration: BoxDecoration(
 borderRadius: BorderRadius.circular(8),
 border: Border(
 top: borda,
 left: borda,
 right: borda,
 bottom: borda,
 ),
 color: Colors.white),
 child: Center(child: Text('${prato.nome}')),

 ),
 ),
 onTap: () =&gt; {_inserirNovoPrato(context, prato)},
 );
}

</pre>



<div class="wp-block-image">
<figure class="aligncenter size-large is-resized"><img decoding="async" class="alignnone wp-image-7560" src="https://dtidigital.com.br/wp-content/uploads/2020/03/foto-3-1024x786.png" alt="flutter" width="847" height="650" srcset="https://www.cms.dtidigital.com.br/wp-content/uploads/2020/03/foto-3-1024x786.png 1024w, https://www.cms.dtidigital.com.br/wp-content/uploads/2020/03/foto-3-300x230.png 300w, https://www.cms.dtidigital.com.br/wp-content/uploads/2020/03/foto-3-768x590.png 768w, https://www.cms.dtidigital.com.br/wp-content/uploads/2020/03/foto-3.png 1407w" sizes="(max-width: 847px) 100vw, 847px" /></figure>
</div>



Na parte destacada do código, temos um bloco para representar cada prato que pode ser preparado pela cozinha. Ao clicar no bloco, o método _realizarPedido é chamado, e nele temos o código para chamar o método do nosso provider: 



<pre>Provider.of&lt;PedidosModel&gt;(context, listen:false).realizarPedido(prato);
</pre>



Agora é quando a mágica acontece! Quando o realizarPedido do nosso provider é chamado, ele insere um registro na nossa lista _pedidosPendentes, e chama a função notifyListeners(). Ela vai avisar para todos aqueles que estão escutando o nosso provider que um novo pedido chegou, ou que a nossa lista mudou. Mas, como fazer para escutar as mudanças do nosso provider? É só criar um consumer!  Um consumer é apenas um listener para o nosso provider. Portanto, quando você cria um, você especifica a qual provider ele escutará, e depois implementa o método builder, que será renderizado na tela. Dentro do builder, você consegue acessar todos os métodos e atributos públicos do provider, inclusive o nosso método pedidos, que retorna a nossa lista de pedidosPendentes. Por fim, veja como fica o código de um consumer: 



<pre>Container(
 padding: EdgeInsets.only(top: 100, left: 20, right: 20, bottom: 100),
 color: Colors.white,
 child: Consumer&lt;PedidosModel&gt;(
 itemCount: pratos.length,
 itemBuilder: (BuildContext context, int index){
 return Container(
 padding: EdgeInsets.all(24),
 decoration: BoxDecoration(
 borderRadius: BorderRadius.circular(8),
 border: Border(
 top: borda,
 left: borda,
 right: borda,
 bottom: borda,
 ),
 color: Colors.white
 ),
 child: Center(child: Text('${pratos[index].nome}')),
 ),
 ),
 }
 )
)

</pre>



Bom, termino esse post por aqui. Espero que esse breve tutorial tenha sido muito útil para você, que queria <a href="https://dtidigital.com.br/blog/considere-react-no-seu-projeto/">aprender um pouco mais</a> sobre o Flutter! Até a próxima!



&nbsp;

Flutter: um novo framework de desenvolvimento mobile:

Desbloqueie o futuro do seu negócio

Confira outros artigos