O que é Flutter? Saiba tudo sobre o queridinho do Google

Neste artigo você vai ver:

Você sabia que o Flutter é uma linguagem considerada “queridinha do Google”? Porém, o que é Flutter? Já que ele vem ganhando muito foco ultimamente devido a sua incrível performance e por não depender de nada nativo para poder criar Views

Nesse conteúdo, eu vou te mostrar o que é e muito mais sobre ele. Bora? 

Em primeiro lugar, o que é Flutter? 

O 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, desenvolvida pelo Google com o intuito inicial de concorrer com o TypeScript (porém acho que não deu muito certo haha).

No entanto, 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.

Engine do Flutter

Imagem que compõe o conteúdo “o que é flutter”, que mostra o “Flutter System Overview”. Na primeira coluna, temos o “Framework Dart”; Na segunda, “Engine C/C++” e na última o “Embedder Platform Specific”

Basicamente, o Flutter é divido em 3 camadas em sua Engine. Em primeiro lugar, falamos sobre a responsável por todo o Framework Flutter escrito em Dart onde você estará trabalhando

Em segundo lugar, trazemos 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.

Sendo assim, 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 para 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 para tudo é basicamente usar composição ao invés de herança, pois pra quem é uma pessoa desenvolvedora 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: Container, Row, Column e Stack.

Container

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

Captura de tela em que a ferramenta Flutter está aberta em um dispositivo android, com um quadrado no meio da tela escrito “Container”

Row

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

Captura de tela em que a ferramenta Flutter está aberta em um dispositivo android, em que mini quadrados estão centralizados horizontalmente em cada uma das três telas.

Column

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

Captura de tela em que a ferramenta Flutter está aberta em um dispositivo android, em que mini quadrados estão centralizados verticalmente em cada uma das três telas.

Stack

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

Captura de tela em que a ferramenta Flutter está aberta em um dispositivo android, em que um retângulo está empilhado no outro. ‍

Para saber mais detalhes sobre esses e os outros vários tipos de layouts existentes no Flutter, entre na documentação oficial e entenda 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

Por outro lado, quando se está utilizando os Widgets do Material, é que todas as coisas nativas de cada sistema são mantidas, como efeitos de scroll, fonte e animação de navegação.

Para mais detalhes de cada um, acesse a 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.

A primeira é bem comum no mundo Android e também de devs back-end: Intellij IDEA. Tanto com Android Studio quanto com o Intellij Community, o plugin será o mesmo. Entretanto, 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).

Antes de chegarmos na conclusão desse artigo sobre “O que é Flutter”, que tal assistir esse Zup Open Talks em que Fernando Cruz fala sobre as vantagens e as desvantagens do framework, além de saber o porquê ele foi o escolhido no desenvolvimento do app da startup? Aproveite! 

Conclusão

Por fim, chegamos a nossa conclusão com a seguinte pergunta: o que é 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. Dessa forma, imagino que para quem está no desenvolvimento iOS a sensação será a mesma. 

Por outro lado, para 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.

5ccca883e82bf97fc7582fe9_0-4
Desenvolvedor Android
Desenvolvedor Mobile focado em arquitetura, teste de aplicações de grande porte e desenvolvimento nativo do Android.

Artigos relacionados

Capa do artigo em foto com duas pessoas escrevendo códigos em frente a dois notebooks.
Back-End
Postado em:
Imagem onde aparece a mão de uma pessoa branca segurando um celular com códigos na tela.
Mobile
Postado em:

Este site utiliza cookies para proporcionar uma experiência de navegação melhor. Consulte nossa Política de Privacidade.