Google I/O 19 — Nosso resumão sobre Flutter e Dart
Escrito por Giuliano Stravini e Rafael Honda.
Se você já ouviu algo a respeito do Dart, provavelmente deve ter ouvido sobre o Flutter também. No evento deste ano do Google I/O 19, foram apresentadas muitas novidades, que pudemos resumir neste artigo. Bora lá conferir!
O que é Flutter e por que ele usa Dart?
Não seria incrível um dia aprender um framework que pode ser utilizada em várias plataformas, como Android, iOS, Web e Desktop?! Esse dia pode estar mais próximo do que você pensa com o Flutter e Dart. Vale mencionar que ambos são mantidos pela equipe da Google e vem crescendo bastante nesses últimos tempos. O Flutter é um framework para criar a aplicativos nativos tanto para Android quanto para iOS, a sua arquitetura é composta por uma engine em C++ e todo framework é escrito em Dart.
O Dart é uma linguagem fortemente tipada, leve, orientada a objetos e funcional. Seu desenvolvimento foi dividido em três aspectos:
Produtividade
Como roda o código em Dart? O compiler do Dart possui um Kernel Compiler, onde é feito o processamento da linguagem, o Analyzer é responsável pela navegação, refatoração e adequação do código, o Analysis Server funciona como um servidor local que expõe o código para as IDE’s e editores. Todo o processo funciona de maneira eficiente.
Rapidez
Desenvolver em Dart é rápido e torna-se muito produtivo visualizar as alterações em tempo real, com a funcionalidade do hot reload. O hot reloadfunciona injetando arquivos de código-fonte atualizados na máquina virtual Dart(VM). Depois que a VM atualiza as classes com as novas versões de campos e funções, a estrutura Flutter recria automaticamente a árvore de widgets/componentes, permitindo que você visualize rapidamente os efeitos de suas alterações.
Multi-plataforma
Flutter para web foi apresentado como um preview, ele roda através do mapeamento dos elementos Dart para o Browser APIs. O desempenho da aplicação web é excelente equiparando-se às aplicações nativas flutter mobile.
Essas são algumas das principais razões para o Flutter usar Dart, além também da visão do futuro que o Dart está seguindo, com constantes atualizações, melhorias e evolução da linguagem.
Confira o vídeo da apresentação na íntegra:
https://www.youtube.com/watch?v=J5DQRPRBi
Flutter 1.5
Desde a versão 1.2, a equipe da Google, esteve focada em aumentar a qualidade e estabilidade do framework. Na versão 1.5 do flutter foram feitos muitos ajustes com relação a performance e crashs. Além disso, houve um grande crescimento na questão de Material Design com novos widgets e customizações.
Material Design
Nessa atualização foi acrescentado uma das coisas mais pedidas pelos usuários, Dark Theme! Para utilizá-lo em seu código é muito simples, basta fazer a chamada dele dentro do seu MaterialApp e pronto!
Foi também acrescentado possibilidade de personalização de sliders, como tamanho, cores e formas diferentes e, assim como dark theme, muito simples de aplicar, é só envolver o sliderem um widget chamado “SliderTheme” e dentro da propriedade data, colocar um “SliderThemeData” com a personalização que você quiser, podendo até fazer algo bem Pink Floyd.
Também foram alteradas algumas animações de transição de tela e labelsopcionais para BottomTabBar, que podem ser conferidas aqui.
Novos widgets!
Um ponto muito positivo do Flutter é que a biblioteca de componentes é muito rica, fazendo seu código ficar cada dia mais independente de biblioteca de terceiros. A seguir, vamos mostrar um componente muito interessante que foi adicionado nessa última atualização.
ExpandedSearchBar
Quando acionamos a barra de pesquisa, uma lista de histórico e sugestões de busca é aberta e, como de costume, é muito simples de implementar.
Primeiramente deve ser feito uma classe que estende ao “SearchDelegate”. Dentro dela você terá três rotinas: “buildSuggestions”, para o retorno das sugestões. “buildResults” para o retorno do resultado e o ”showSearch” para exibir o textField da barra de pesquisa.
O resultado será algo como o GIF abaixo:
Foram adicionados outros componentes além desse e podem ser conferidos aqui.
Acessibilidade
A acessibilidade não foi deixada de lado! Inúmeras melhorias foram feitas, afinal, todos nós temos o direito de usufruir o máximo de um aplicativo e nessas melhorias, inclui-se a implementação da propriedade semanticsLabel.
Sua funcionalidade é auxiliar as ferramentas de interpretação de tela a reconhecerem e lerem uma determinada informação, indispensável para pessoas que possuem algum tipo de deficiência visual. Sua implementação não limita-se apenas em componentes de Text, mas também com ícones. Componentes que ainda não possuem essa propriedade podem ser implementados com um widgetchamado Semantics, que tem o mesmo propósito.
Outra adição foi o OrdinalSortKey, essa propriedade é quem dita a ordem em que o interpretador de tela deve ler os semanticsLabel, pois assim como começar a ler um livro pelo final não faz sentido, um aplicativo sem uma boa ordem de leitura pode ser confuso para algumas pessoas. Abaixo tem uma imagem da utilização do OrdinalSortKey:
Além disso foram adicionados muitos outros elementos que ajudam a deixar seu aplicativo mais acessível para todas as pessoas, como componentes que tiveram seu contraste aumentado para seguir o guia de acessibilidade. Também foi aumentada a área clicável de componentes que possuem essa função e tornou-se possível realizar testes de widget com propriedades de acessibilidade. Para mais informações clique aqui.
Adaptabilidade
Foi feita uma demonstração de adaptabilidade em relação a plataformas e tamanhos diferentes. Podemos perceber que os componentes conseguem se adaptar desde um smart watch até uma SmartTV, isso mostra a potência do UI dessa ferramenta que vêm crescendo a cada dia. Caso queira ver na íntegra, clique aqui.
Flutter Desktop
Na demonstração para da parte desktop, foi apresentado um aplicativo que já estava rodando nos dispositivos mobile, apesar de estar nos estágios iniciais,
demonstrou uma boa performance. Interessante é que já está implementado comportamentos que apenas aplicativos desktops possuem, como por exemplo, uma ação com teclado ou o famoso hover (quando colocamos o mouse em cima de algo e surge um efeito de esmaecimento). Não é nada complicado aplicar, esse exemplo ao lado é o código que incrementa uma ação igual ao hover.
Basta envolver ser componente em um Listener e então você terá os callbacks de onPointerEnter, que representa a ação de colocar o mouse em cima do elemento, onPointerExit, que representa a retirada do mouse e existe muitas outras opções.
Com esse código acima, você pode obter um resultado parecido com o GIF abaixo:
A principal diferença na arquitetura do Flutter que permite que o mesmo código que estava rodando nos dispositivos mobile rode em ChromeOS é uma nova layer, “ARC++”. Ela faz com que o código rode com a mesma fidelidade que os dispositivos mobile.
Essa novidade não é só para ChromeOS, mas para desktops em geral, como MacOS, Windows e Linux, o que muda é a arquitetura que é algo mais parecido com a imagem abaixo:
Mesmo com muitas funcionalidades implementadas, vale lembrar que ainda está nos estágios iniciais, então grandes mudanças podem ocorrer sem um aviso prévio e sem garantia de compatibilidade com versões antigas. Para mais informações, clique aqui.
Flutter Web
Na plataforma web já foi dado um ponta pé inicial no beta do Flutter Web. Agora você pode usar seu código em Dart para ser compilado e interpretado na web, graças ao Dart2JS Compiler.
Indo um pouco mais a fundo nessa arquitetura, podemos ver que o Flutter Web Engine vai transformar seus componentes escritos em Dart para HTML, CSS e Canvas e por fim, o Dart2js compiler vai compilar o seu código em JavaScript para o browser interpretá-lo
Apesar de ainda ter muitas limitações, como falta de algumas APIs, a questão da performance ainda passa por um processo de otimização, logo que na demonstração apresentada, ela se saiu muito bem. Vale mencionar que o compilador possui suporte parcial para Firefox e Edge, enquanto a sua compatibilidade é focada para o Chrome. O desenvolvimento para o Desktop, está em estágio de desenvolvimento, então não é aconselhado iniciar projetos grandes utilizando Flutter para web. Entenda o porquê clicando aqui.
Vale mencionar que o compilador possui suporte parcial para Firefox e Edge, enquanto a sua compatibilidade é focada para o Chrome. Assim como desktop, ainda está em estágio de desenvolvimento, então não são aconselhados a iniciar projetos grandes utilizando Flutter para web. Mais informações podem ser obtidas aqui.
Confira todas as novidades do Flutter:
https://www.youtube.com/watch?v=YSULAJf6R6M&list=PLjxrf2q8roU2no7yROrcQSVtwbYyxAGZV
Conclusão
Depois desse evento, podemos ver que a equipe da Google não está para brincadeira. Dart vem crescendo aos poucos, mas já é uma linguagem bem estruturada e a cada atualização traz boas novidades e a maioria delas aumenta sua rapidez, eficiência e o mais importante, nossa produtividade. Assim como o Dart, o Flutter, apesar de ainda estar engatinhando em alguns aspectos, também vem ganhando bastante notoriedade, pois, a cada conferência, recebemos um pacotão de novidades interessantes, tanto sobre a expansão para novas plataformas de desenvolvimento quanto nos quesitos de UI. Contudo, podemos esperar muito mais novidades durante os próximos meses, porque esses projetos estão em boas mãos.
