Flutter, o novo queridinho do Google

Autor: Túlio Magalhães

Flutter é um framework cross-platform para se escrever apps Android, iOS, Desktop e rodar com uma performance nativa. A linguagem padrão do Flutter é o Dart, uma linguagem desenvolvida pelo Google com o intuito inicial de concorrer com o TypeScript (porém acho que não deu muito certo haha).

Flutter vem ganhando muito foco ultimamente devido a sua incrível performance e não depender de nada nativo para poder criar Views, pois diferente do React Native, que no final é uma bridge para cada plataforma, ele tem seu próprio framework de renderização, e isso é ótimo, pois você não depende de algo específico de cada plataforma. Um exemplo é o shadows, que existe nativamente só no iOS e no Android não.

Sua release 1.0 foi em 5 de dezembro de 2018 e no momento que esse artigo foi escrito estava na versão 1.2.1.

Engine do Flutter

Basicamente, o Flutter é divido em 3 camadas em sua Engine. A primeira é responsável por todo o Framework Flutter escrito em Dart onde você estará trabalhando. A Segunda, é algo que dificilmente você terá que se preocupar, pois se trata do core do Flutter, onde o cérebro dele está, pois lá estará tratamentos específicos de cada sistema e a engine gráfica (OpenGL ES), que é o diferencial do Flutter com React Native, por exemplo.

Como Flutter tem sua própria engine de renderização, ela não necessita de uma Bridge específica para cada sistema para a execução do código. No React Native, por exemplo, sempre que você usa um componente de View, basicamente debaixo dos panos ele estará chamando uma View em cada sistema específico, que, de alguma forma ou outra, trará um gargalo para views mais complexas.

Algo interessante do Flutter é que quando se está desenvolvendo, ele irá compilar seu código pra ser executado em uma VM para se ter um build rápido e também poder usufruir do Hot Reloading (vou explicar logo abaixo), porém quando seu app for compilado para produção, o processo de build será totalmente diferenciado, pois ele irá compilar para Android usando o NDK (Native Development Kit) e para iOS O LLVM. No final tudo será convertido para código nativo de cada sistema (não confunda nativo com algo que se remete a usar Framework Android ou iOS, mas sim a nível de sistema operacional).

Widgets

No Flutter tudo é considerado um Widget, desde um tema para sua aplicação até mesmo um componente mais complexo como um TextField. A ideia de ter Widgets pra tudo é basicamente usar composição ao invés de herança, pois pra quem é desenvolvedor Android sabe muito bem como é difícil estender algo nativo para reaproveitar um componente já existente.

Existem dois Widget básicos quando se está criando um layout: StatelessWidget e StatefulWidget. A diferença entre eles é que o Stateless como o próprio nome já diz, não tem estado. Já o Stateful, ele mantém o estado da view e sempre que alguma variável do estado mudar, o Flutter irá enviar um evento para seus filhos serem atualizados. Quem vem do React sabe muito bem como e esses componentes funcionam, inclusive a forma de atualizar o estado é a mesma do React, usando o setState({}).

Widgets de Layout

Para desenhar layouts, existem alguns Widgets que normalmente são os pilares, sendo eles o Container, Row, Column e Stack.

Container

O Container é um Widget que possuí atributos como margin, padding, alinhamento, color, controle de largura e altura, sombras e bordas.

Row

Já o Row é um Widget para se posicionar coisas horizontalmente e podendo controlar o espaçamento entre eles.

Column

O Column não é muito diferente do Row, sendo a única diferença entre eles é que seus filhos serão posicionado verticalmente.

Stack

O Stack é bem simples, ele te da a flexibilidade de empilhar um filho em cima do outro.

Para saber mais detalhes sobre esses e os outros vários tipos de layouts existentes no Flutter, basta entrar neste link da documentação oficial e entender tudo sobre esses Widgets que salvam nossas vidas diariamente.

Widgets de UI

Da mesma forma que em Android e iOS existem componentes básicos para se escrever uma aplicação, no Flutter não seria diferente. Uma coisa bacana do Flutter é que existem dois tipos de componentes visuais, o Material que é baseado no Material Design e o Cuppertino que é baseado em componentes do iOS. Outra coisa quando se está utilizando os Widgets do Material, é que todas as coisas nativas de cada sistema é mantida, como efeitos de scroll, fonte e animação de navegação.

Para mais detalhes de cada um, segue o link da própria documentação oficial do Flutter.

Ferramentas de Desenvolvimento

Para se desenvolver aplicativos em Flutter, existem duas IDEs bem conhecidas que basta a instalação de um plugin e tudo estará pronto.

O primeira é bem comum no mundo Android e também de desenvolvedores back-end, Intellij IDEA. Tanto com Android Studio quanto com o Intellij Community, o plugin será o mesmo, eu particularmente prefiro o Android Studio por já ser uma ferramenta própria para Android e caso você esteja desenvolvendo seu aplicativo para o mesmo, já vai facilitar bastante.

O segundo é muito conhecido no meio de front-ends Web, Visual Studio Code. Para muitos essa simples IDE resolve todos os problemas, e para quem for desenvolver com Flutter, não poderia ser diferente.

Ambas IDEs possuem o suporte necessário para você começar seu app, inclusive com suporte para Debug e Hot Reloading, que faz com que tudo que você alterar, será imediatamente refletido no seu app. Não vou entrar no mérito de dizer qual é melhor ou não pois isso é o gosto de cada um.

Arquiteturas comuns no Flutter

Quando se está desenvolvendo aplicações é muito comum ter a necessidade de quebrar suas regras de negócios em várias camadas, até mesmo para respeitar princípios como SOLID e ter a flexibilidade de testar suas regras.

Atualmente a comunidade do Flutter tem se preocupado bastante sobre arquiteturas de desenvolvimento e com isso desenvolveram um site chamado fluttersamples.com, que possui vários exemplos de arquiteturas conhecidas Como Redux, MVI e BloC (Arquitetura proposta pelo Google para Flutter).

Conclusão

Flutter, para alguns, é algo totalmente diferente do que já trabalharam. No Android, por exemplo, eu tive muita dificuldade de entender como funciona toda essa lógica de criar layouts sem ter um XML no meio; imagino que para desenvolvedores iOS a sensação será a mesma. Agora pra quem vem de Web ou mobile híbrido e já conhece React, eu imagino que o grau de aprendizagem será menor, pois Flutter também é um framework reativo.

Para não finalizar esse artigo sem mostrar nenhum tipo de código, vou deixar um exemplo do que seria um hello world em Flutter.