Flutter: um novo framework de desenvolvimento mobile:
O Flutter é um framework de desenvolvimento híbrido para mobile, tanto Android quanto IOS, que trabalha em cima de widgets. Toda aplicação mobile 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á?
Futures – a maneira como o flutter lida com funções assíncronas
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:
class Prato { String nome; int preco; Prato(int preco, String nome){ this.nome = nome; this.preco = preco; } } Future <Prato> buscarPratoNaCozinha(){ var prato = Future<Prato>.delayed( Duration(seconds: 4), () => new Prato(40, "Tropeiro completo"), ); return prato; }
Mas, e ai? Bom, com um future, você consegue renderizar a tela com um FUTURE BUILDER.
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:
- default:
,ela ainda não está completa, ou seja, não houve nenhum retorno; - hasData:
,que foi um sucesso e sua função assíncrona já retornou o valor; - hasError:
,ocorreu um erro na sua função assíncrona.
No caso da nossa chamada buscarPratoNaCozinha(), temos que:
- default: o garçom ainda não retornou com o prato para a mesa do cliente;
- hasData: já nos retornou um prato;
- hasError: o garçom deixou o prato cair no caminho para a mesa.
Veja como ficaria o código e o resultado:
FutureBuilder<Prato>( future: _future, builder: (BuildContext context, AsyncSnapshot<Prato> 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. } } )
![framework de desenvolvimento mobile](https://dtidigital.com.br/wp-content/uploads/2020/03/foto-2-1-1024x786.png)
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.
Providers – como controlar o estado global da sua aplicação
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:
class Pedidos with ChangeNotifier { final List<Prato> _pedidosPendentes = []; UnmodifiableListView<Prato> get pedidos =>
UnmodifiableListView(_pedidosPendentes); void realizarPedido(Prato prato) { _pedidosPendentes.add(prato); notifyListeners(); } }
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:
void _inserirNovoPrato(BuildContext context, Prato prato){ Provider.of<PedidosModel>)(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: () => {_inserirNovoPrato(context, prato)}, ); }
![flutter](https://dtidigital.com.br/wp-content/uploads/2020/03/foto-3-1024x786.png)
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:
Provider.of<PedidosModel>(context, listen:false).realizarPedido(prato);
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:
Container( padding: EdgeInsets.only(top: 100, left: 20, right: 20, bottom: 100), color: Colors.white, child: Consumer<PedidosModel>( 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}')), ), ), } ) )
Bom, termino esse post por aqui. Espero que esse breve tutorial tenha sido muito útil para você, que queria aprender um pouco mais sobre o Flutter!
Até a próxima!
Produtos Digitais
Confira outros artigos
![Produtos digitais: implantação e operação](/_next/image?url=https%3A%2F%2Fwww.cms.dtidigital.com.br%2Fwp-content%2Fuploads%2F2024%2F06%2FProdutos-digitais-implantacao-e-operacao.webp&w=1024&q=75)
Produtos digitais: entregas contínuas com IA
Nas últimas semanas, lançamos uma série de artigos sobre o uso de inteligência artificial no processo de construção de produtos digitais. Neles, apresentamos alguns aceleradores que a dti tem utilizado para potencializar a eficiência dos times. Abordamos a fase de concepção do produto, as atividades de gestão e design, o desenvolvimento do software e a […]
Produtos Digitais
![Inteligência Artificial: acelerando o design e gestão de produtos digitais. Computador com códigos coloridos](/_next/image?url=https%3A%2F%2Fwww.cms.dtidigital.com.br%2Fwp-content%2Fuploads%2F2024%2F05%2Fshutterstock_2284126663-_1_-scaled.webp&w=1024&q=75)
Inteligência Artificial: acelerando o design e gestão de produtos digitais
Como aproveitar o melhor da Inteligência Artificial Generativa para gerar mais valor? Essa tem sido uma pergunta recorrente no mercado conforme as empresas buscam entender e adotar a tecnologia. Embora existam muitas dúvidas e hipóteses não comprovadas, parece ser consenso que os avanços na Inteligência Artificial impactarão significativamente muitas profissões. No relatório The economic potencial […]
Produtos Digitais
![IA Generativa: acelerando a concepção de produtos digitais. Foto de quadro com post-it e gráficos, numa ideação para conceber o produto](/_next/image?url=https%3A%2F%2Fwww.cms.dtidigital.com.br%2Fwp-content%2Fuploads%2F2024%2F05%2Fjanela-planejamento0.webp&w=1024&q=75)
IA Generativa: acelerando a concepção de produtos digitais
Como as empresas podem responder às crescentes demandas por produtividade e eficiência em um mundo digital em constante mudança? O período pandêmico acelerou a digitalização de várias empresas e agora o desafio é outro. Entramos em uma era de incertezas, na qual não há mais espaço para desperdícios ou prolongados ciclos de entrega de software. […]
Produtos Digitais