Conhecendo o Flutter - O SDK mobile do Google

5/5 - (1 vote)

Você já ouviu falar do Flutter?!

Há cerca de 3 anos venho me dedicando fortemente ao desenvolvimento mobile com o Ionic Framework.
Porém, há 5 ou 6 meses uma nova alternativa de desenvolvimento mobile vem me chamando muito a atenção e me dedico algumas horas diárias com ele, trata-se do Flutter.

Hoje vou explanar um pouco sobre esse poderoso Framework do Google, e, quem sabe despertar o interesse de vocês para mais uma opção para aprendizado e também influência profissional..

Bom,

O Flutter é o Framework móvel do Google que permite construir aplicativos Android e iOS com apenas um código. O Flutter é um código aberto e gratuito.

Ele inclui:

Framework reativo moderno;
Mecanismo de renderização em 2D muito rápido;
Ferramentas para desenvolvimento;
Widgets prontos que constituem os componentes da UI do aplicativo.

O que os usuários geralmente esperam de aplicativos?

Posso listar pelo menos 3 fatores:

Design Bonito;
Animações Suaves;
Ótimo desempenho.

Além disso, os desenvolvedores precisam criar novos recursos sem comprometer a qualidade e o desempenho. É aí que o Flutter entra.

O Flutter fornece o melhor do desenvolvimento mobile: desempenho e integração de plataformas móveis, com desenvolvimento rápido e alcance multiplataforma e com ferramentas de UI portáteis.

Segundo o Google, o Flutter foi construído para melhorar a qualidade dos aplicativos, a velocidade do desenvolvimento, e para alcançar mais usuários.

O Flutter é único porque o código é compilado em ARM, ou seja, compila o código para cada plataforma. Isso agiliza a abertura e o desempenho do aplicativo. Além disso, utiliza um renderizador Mobile First acelerado por GPU para que haja consistência da UI entre as plataformas e o dispositivo. Então ele projeta os Widgets com um Framework personalizável e extensível em camadas.

Não há pontes entre o Framerwork e os Widgets, tornando a renderização eficiente e as animações mais suaves.

Com o Flutter, uma View é construída como uma árvore imutável de Widgets.

Os Widgets são a base dos aplicativos Flutter, é uma descrição de parte da interface do usuário e quase tudo é um Widget, escrito em Dart.

No Flutter, não existe arquivo distinto para personalização de layout (JS, HTML, CSS), tudo é definido em um Widget Flutter.

Quando o estado do Widget é alterado seja pela entrada do usuário ou por animações, o Widget se reconstrói de acordo com o novo estado, economizando tempo, pois a UI pode ser descrita como funções de estado. Não precisamos escrever códigos extras para atualizar a UI quando o estado for alterado.

O Mecanismo de renderização é construído no Skia, uma biblioteca de renderização gráfica em 2D, em Dart. Ele exibe Widgets para dispositivos iOS e Android. As plataformas precisam fornecer uma tela para o Flutter poder colocar os Widgets e o mecanismo de renderização. Por isso é bom obter uma compilação AOT (veremos mais abaixo) no código nativo.

Dart

O Flutter é escrito em Dart, uma linguagem concisa, fortemente tipificada e orientada a objeto. O Dart é bem semelhante à linguagens como Swift, C#, Java e JS.

O que torna o Dart adequado para o desenvolvimento mobile?

Primeiro, o desempenho tanto no desenvolvimento quando em produção, pois ele suporta a compilação JIT (Just-in-time) e a AOT (Ahead-of-time).

A JIT possibilita que o Flutter recompila o código no dispositivo, enquanto o aplicativo está rodando, isso faz com que a aplicação não perca o estado de desenvolvimento. Isso gera um ciclo de desenvolvimento muito rápido e produtivo, possibilitando o recarregamento expresso do aplicativo.

Na compilação AOT, as bibliotecas e funções utilizadas pelo código do aplicativo são compilados no código ARM nativo de cada plataforma. Isso é bom para lançar compilações, pois o código nativo se inicia rapidamente e possui desempenho previsível.

Na prática

Bom, vamos então por a mão na massa.

Antes de tudo precisamos ter o Flutter instalado em nosso ambiente de desenvolvimento, para isso, basta seguir esse pequeno tutorial disponibilizado pela equipe do Flutter: https://flutter.io/get-started/install/.

Ambiente de desenvolvimento configurado, vamos para a ação:

Abrindo o Android Studio, vamos clicar em “Configure” > “Plugins”:

Após isso, clicamos em “Browse Repositories”

3. E pesquisamos por “Flutter”, e instalamos o Plugin:

Reiniciamos o Android Studio, e ao abri-lo, podemos criar um novo Projeto Flutter (as 4 próximas ilustrações explicam por si só):

Com o projeto do Flutter criado, como podemos ver, na imagem abaixo em destaque Vermelho temos toda a estrutura do projeto, e em destaque Azul temos o arquivo principal, o dart (reparem na extensão .dart, que como dito no começo do artigo é a linguagem utilizada pelo Flutter).

Este é um projeto default do Flutter, quando criamos uma aplicação Flutter, seja pelo Android Studio, ou pelo Prompt de Comando (CMD), este é o aplicativo criado.

Vou destacar alguns pontos importantes no primeiro trecho de códigos (vide abaixo):

O destaque em Vermelho é a importação do material.dart responsável pelo conjunto de widgets de layouts do Material par autilizarmos em nossa aplicação.

O trecho destacado em Azul é a criação da nossa classe MyApp, classe principal e única dessa aplicação.

Utilizando o MaterialApp, nós definimos uma cor de Tema para a aplicação, neste caso o “Colors.blue”.

Em seguida definimos que a nossa Home, será a MyHomePage.

Logo abaixo, em “class MyHomePage extends StatefulWidget” nós criamos a nossa classe MyHomePage, criando ainda um String “title”.

E herdamos então da Classe _MyHomePageState que vai ser alterada a partir de input do usuário, para isso colocamos “_MyHomePageState createState() => new _MyHomePageState();”

Então, prosseguindo, devemos Criar a nossa classe _MyHomePageState:

Em destaque Vermelho criamos uma função que tem a responsabilidade de incrementar um contador (variável _counter).

Em seguida, destacado em Azul criamos o nosso Widget, utilizando um Scaffold, que já nos traz inúmeros widgets prontos para utilizar na aplicação.

Neste exemplo, utilizamos o:

AppBar: onde passamos o título da nossa página;
Body: passando 2 textos centralizados, um com texto fixo “You have pushed the Button this many times:” e outro com o valor da variável _counter;
FloatingActionButton: um botão com o ícone de “+”, que na sua função onPressed, executa a função criada, destacada em Vermelho.

Bom, o aplicativo demo é teoricamente simples, mas já vimos criação de Widgets prontos com o Scaffold, criação de Funções, Classes e Estados.

Na parte superior do Android Studio, em sua barra de tarefas, vamos clicar na Seta Verde para executarmos nosso aplicativo, para isso devemos conectar um dispositivo que será reconhecido automaticamente, ou criar um emulador de Android: