O documento apresenta Flutter, um framework multiplataforma do Google para desenvolvimento de aplicativos. Ele resume os principais pontos sobre a arquitetura, widgets, integração com código nativo, geração de versões e um caso de uso com o aplicativo VivaBem do UOL.
5. O que é Flutter?
- SDK de desenvolvimento multiplataforma
- Criado pelo Google
- Desempenho
- UI rica e nativa
- Desenvolvimento rápido
- 11/05/2017: Primeira release 0.0.6
- 20/06/2018: Release Preview 1
6. Instalação
- Entrar em: https://flutter.io/get-started/install/
- Extrair em um diretório e adicionar ao $PATH
$ export PATH=`pwd`/flutter/bin:$PATH
$ flutter doctor
35. Prós Contras
- Desempenho
- Hot reload
- Integração com código nativo
- Integridade dos layouts
- Webview/Maps
- Integração com views nativas
- Falta de componentes nativos
- Suporte para devices 32bits
- Suporte para Android SDK16+
[Cinthia] Vamos falar de Flutter, uma visão geral, vamos fazer uma demo, mostrar integração com código Android e iOS, como gerar uma versão para publicar. Também iremos mostrar nosso case que foi destaque no Google I/O, e fechar com prós e contras do Flutter
[Cinthia] O que nos levou a descobrir o Flutter? No início do ano, recebemos uma oportunidade/desafio de desenvolver um app em Flutter e esse app tinha chances de ser um case no Google I/O se fosse publicado até o final de abril
[Cinthia] O que é Flutter? É um SDK para desenvolvimento de aplicativos multiplataforma, que foi criado pelo Google e tem como princípios: desempenho, o app desenvolvido tem performance de app nativo; UI rica e nativa, com experiência do usuário natural de cada plataforma; e desenvolvimento rápido, através do uso de widgets e do hot reload.
A primeira versão do flutter foi lançada há pouco mais de 1 ano e atualmente está na versão Release Preview 1.
[Cícero] Para iniciar o desenvolvimento em Flutter, é necessário baixar a SDK, extrair o conteúdo do zip e adicionar o diretório onde foi extraído o flutter, no path. A partir daí, pode ser feito um flutter doctor em um terminal para validar a instalação.
Pode ser utilizado o Android Studio ou o IntelliJ, adicionando os plugins do Flutter e do Dart, ou ainda o Visual Studio Code com a extension do Flutter.
[Cícero] Para atualizar a versão do Flutter, que está em constante desenvolvimento, basta executar flutter upgrade. Há também outros 2 comandos que serão bastante utilizados: packages get e packages upgrade. Cada vez que o arquivo pubspec.yaml for alterado, adicionando ou alterando um pacote, será necessário executá-los.
[Cícero] // Falar em camadas
O Flutter essencialmente é organizado em camadas, podemos separar em duas camadas principais, a Engine e o Framework.
A Engine é a camada escrita em C/C++ que compõe a estrutura de execução, tendo a Skia, uma biblioteca de renderização 2D e de texto, que também é utilizada por exemplo no Google Chrome e no próprio Android e além da Skia, tem o Dart, que é a linguagem que utilizamos para desenvolver em Flutter.
A camada verde é o Framework, é a parte totalmente escrita em Dart, ou seja, tudo que você utiliza na ferramenta é escrito em Dart, ela controla toda a parte de renderização, gestures, animações e possui o principal pilar do Flutter, as Widgets.
// Falar sobre framework reativo moderno;
// APIs de teste
Tudo no Flutter são Widgets, não só componentes visuais como TextFields e Labels, Widgets também são utilizadas para estruturar o layout, como as Widgets de Center, Row e Column. Acima das Widgets podemos ver na mesma camada os itens Material e Cupertino, que são os conjuntos de Widgets específicas para Android e iOS, logicamente Material são as de Android e Cupertino as de iOS
[Cícero] Uma das dúvidas mais frequentes sobre o Flutter é: Por que utilizar Dart e não Kotlin, Swift ou Javascript? Para responder essa pergunta temos que analisar as características do Flutter e um pouco da estratégia do Google com relação ao Dart.
Eu particularmente nunca tinha ouvido falar em Dart até conhecer o Flutter, então de onde saiu?
Apresentada pelo Google a primeira vez em 2011;
Objetivo de substituir o Javascript como principal linguagem embutida nos navegadores;
Inicialmente podia rodar em uma VM ou compilada para Javascript;
Atualmente é utilizada em vários produtos internos no google.
[Cícero] O Dart não é a primeira linguagem padrão para desenvolver em Flutter, inicialmente era desenvolvido em Javascript, mas a ideia do time de desenvolvimento do Flutter era criar a melhor maneira de desenvolver para mobile, e utilizando Javascript complicaria a maneira que eles queriam gerar os binários para publicação.
Com isso, começaram a buscar e analisar várias linguagem existentes no mercado e a que teve uma maior pontuação geral foi o Dart, mas pq?
É orientada a objetos
É declarativa, fazendo com que os layouts sejam montados de maneira parecida com CSS
É uma linguagem majoritariamente mantida pelo Google
Pode ser tipada
Curva de aprendizagem
Tem um StyleGuide bem definido
Compila para ARM Code
E o mais importante quesito que torna o Dart essencial para o Flutter é que ele pode ser compilado tanto em Ahead-of-time e como Just-in-time, mas o que é isso?
[Cícero] O código da aplicação é compilado direto para código ARM nativo, o que possibilita que a aplicação seja inicializadas com performance de uma aplicação nativa.
[Cícero] Com o objetivo de ser a melhor maneira de desenvolver para mobile, um dos principais feedback que o time do Flutter teve foi que um dos pontos que poderiam melhorar era a velocidade do próprio ciclo de desenvolvimento. A maneira mais comum que desenvolvemos é: Escrevemos código, mandamos rodar e esperamos até que o código seja compilado, o pacote seja gerando, instalado no device e no pior dos casos temos que percorrer várias telas até chegar onde acabamos de fazer a alteração, para ver se deu certo.
Um dos objetivos do Flutter é cortar esse tempo de espera, é aí que a compilação Just-in-time do Dart cai como uma luva no Flutter, com ela podemos compilar diretamente no device com a aplicação em execução e ver em praticamente tempo real se a alteração deu certo ou não.
[Cícero] // Apresentar na prática, mostrando exemplos de uso e falando sobre os benefícios:
Como as Widgets são renderizadas na camada do Flutter, ela apresentam o mesmo layout independente da versão do Android ou iOS, ou seja, você terá um layout moderno em devices antigos sem ter que fazer manobras e nem perder performance.
Widgets não são compostas com herança, mas sim com composição.
[Cinthia] As Widgets são divididas em 2 grandes grupos, o primeiro são as Stateless, que são widgets imutáveis, desenhadas apenas uma vez, como exemplo delas temos os labels de texto, imagens, e no nosso código de exemplo, a AboutPage. As outras são as Stateful, que são mutáveis, onde o método setState redesenha a widget. Os exemplos são views Scrollable, Animadas e a DetailPage do nosso código de exemplo.
[Cinthia] Como eu começo construir um layout? A Scaffold Widget permite que itens básicos sejam adicionados na tela, como AppBar, FloatingActionButton, BottomNavigationBar, Drawer, além do conteúdo da tela. Alguns itens de tela, são facilitados, como a ListView, onde cada item pode ser um ListTile, e só é preciso setar o título, o subtítulo e a imagem dos itens, o layout é montado nesse formato.
[Cinthia] Agora vamos ver como ajustar um layout. Este é nosso app, ele mostra uma lista de frutas, e quando clicamos em um item, vemos os detalhes de uma fruta.
- temos um layout com a imagem da fruta, nome, preço e quantidade, porém, está ruim assim... então vamos centralizar esses itens (Center), verticalmente também (MainAxisAlignment.center). Salvamos e pronto. Este é o hot-reload, que assim que salvamos, atualiza o app no emulador ou no device.
- podemos aumentar o texto da imagem da fruta (tst)
- podemos aumentar também a fonte do nome da fruta (tst)
- a fonte do preço, vamos também deixar negrito (tst).
- podemos também colocar um padding para não ficar tão próximo (Padding)
- e não é só layout que podemos mudar e ver o resultado imediatamente, vamos alterar nosso FloatingButton, que ao invés de adicionar um item, vamos remover um item (Icon.remove / count--)
[Cinthia] Para internacionalizar Strings em dart/flutter, devemos importar as dependências de internacionalização no yaml, implementar os delegates e locales na classe do application
[Cinthia] Implementar uma classe para a Localization e descrição de cada uma das Strings internacionalizadas
[Cinthia] E por último, executar os 2 comandos: extract_to_arb, que irá gerar o arquivo arb com as Strings extraídas da classe, onde será possível traduzí-las, e depois o generate_from_arb que irá processar as strings traduzidas.
[Cinthia] Porém, temos uma maneira mais simples e fácil, que é utilizando o plugin Flutter i18n, onde é necessário importar as dependências de internacionalização no yaml, implementar os delegates e locales na classe do app, e extrair e traduzir as Strings utilizando o plugin
[Cícero] Vamos internacionalizar o título da tela de Comprar, então, basta selecionarmos a opção de extrair a string, selecionar a linguagem, e definir um id para essa string. Depois basta fazer este mesmo processo para as demais linguas, ou editar diretamente os arquivos arb
[Cinthia] É possível integrar o código do Flutter ao nativo, que para Android pode ser em Java ou Kotlin, e para iOS pode ser em objective-C ou Swift. Para fazer a integração deve ser utilizado um canal, que pode ser utilizado em ambos os sentidos: para o flutter acessar o código nativo ou para o código nativo acessar o flutter.
[Cinthia] Aqui vemos um exemplo do código Flutter acessando código nativo
primeiramente criamos o channel, que neste caso se chama tdc_demo_channel, e então fazemos um invokeMethod, utilizando esse channel e passando por parâmetro do método invokeMethod, o nome do método nativo e os parâmetros que desejamos enviar ao nativo.
Do lado do nativo, tanto para Android, quanto para iOS, também precisamos criar o channel, com o mesmo nome, e implementar o método setMethodCallHandler, onde iremos validar o conteúdo do método, e então implementar o seu conteúdo. No nosso caso, retornamos uma string, com o valor “Método Android ou iOS” e apendamos a essa string, os parâmetros recebidos do flutter. Por fim, enviamos através do result o resultado do método nativo executado.
[Cícero] Aqui vemos um exemplo do código nativo acessando código flutter.
Da mesma maneira que o sentido inverso, devemos criar o canal, e apenas inverter o que vimos anteriormente: o código nativo chama o método Flutter através do invokeMethod, passando o nome do método Flutter a ser chamado e os parâmetros a serem enviados para esse método. E então implementamos a callback para receber o resultado do método de flutter que foi chamado.
Do lado do flutter, implementamos o setMethodCallHandler para receber o chamado do código nativo, e validar o nome do método, e então implementamos o conteúdo do método, retornando o resultado. Neste caso o retorno seria a string “Método flutter, parâmetro” e os parâmetros recebidos do código nativo.
[Cinthia] Para gerar a versão final do app Android, basta executar o comando flutter build apk release, passar o zipalign, e assinar o apk. A partir daí, é só subir na loja o apk.
[Cícero] Para gerar a versão de iOS, utilizamos o comando flutter build ios release, e abrimos o arquivo do workspace, e então, através do xcode, podemos submeter a versão para a app store
[Cícero] Agora vamos falar sobre o app que nos levou a aprender Flutter! Viva bem é o canal de saúde e bem-estar do UOL. E o objetivo era fazer um aplicativo contendo práticas de meditação e mindfulness, notícias e blogs da área, além de lembretes através de notificações para lembrar o usuário de praticar a meditação
[Cícero] No VivaBem, nosso foco foi utilizar diversos componentes de UI e trabalhar com animações para gerar um aplicativo atraente. E com reprodução de áudio, utilização do google analytics e push notifications para atender os requisitos do app.
[Cinthia] Assim que recebemos a proposta do case e começamos o estudo de Flutter através do desenvolvimento de POCs, de diversos componentes de UI, requests, parser de jsons. Durante os estudos, tivemos uma reunião com o cliente sobre o app e na semana seguinte, iniciamos o projeto. Em 1 mês finalizamos a versão Beta do app e depois de mais 1 mês, quando ficamos aguardando os áudios das meditações e fazendo ajustes no app, publicamos o app nas lojas. E no começo de maio, veio a confirmação que o VivaBem havia sido aprovado para ser um case na SandBox area do Google I/O
[Cinthia] Aqui está um vídeo com uma demo do nosso app. Este vídeo foi utilizado na Sandbox do Flutter no Google I/O, e o app está no site do Flutter, na área de Showcase. Se quiserem baixar nosso app, está nas lojas, do Android e do iOS, e esse QRCode tem os links diretos.