Flutter: o guia inicial sobre esse framework!
Até pouco tempo atrás, uma das principais dificuldades do desenvolvimento de aplicativos para smartphones era a necessidade de escrever praticamente o mesmo código, com algumas adaptações, para Android e iOS. O principal objetivo do framework Flutter é eliminar esse problema, pois ele permite a criação de aplicações para esses sistemas a partir do mesmo código fonte.
E não é só isso. Com ele também é possível desenvolver aplicativos para desktop nas plataformas Linux e macOS. Portanto, essa é uma tecnologia bem abrangente e que oferece uma série de recursos para facilitar o desenvolvimento sem a necessidade de reescrever códigos. Para apresentar essa ferramenta, fizemos este guia inicial sobre o Flutter, que contém os seguintes tópicos:
- O que é Flutter?
- Conheça a linguagem Dart
- Entenda a arquitetura do Framework Flutter
- Entenda a anatomia de um Flutter App!
- Quais são as 5 principais características do Flutter?
- Quais as principais aplicações do Flutter? Saiba para que é usado?
- Quais as vantagens de usar o Flutter?
- Quais as desvantagens de usar Flutter?
- Instalando o Flutter e criando seu primeiro projeto!
- Quais as diferenças entre Flutter, React Native e Xamarin?
- Quais as principais empresas que estão usando Flutter?
- Exemplo de uso do Flutter em aplicações
Conteudo
O que é Flutter?
O Flutter é um framework de código aberto, desenvolvido pelo Google, que permite o desenvolvimento de aplicações nativas para Android e iOS. A primeira versão da ferramenta foi lançada em dezembro de 2018, com a proposta de desenvolver aplicações híbridas e concorrer com outras tecnologias semelhantes, como o React Native e Ionic.
O Flutter utiliza o Dart como base para o desenvolvimento de suas aplicações. Trata-se de uma linguagem multiparadigma, criada em 2011 pelo Google, com a intenção de disputar com o JavaScript. Ela permite o desenvolvimento de aplicações cliente-servidor e de aplicativos para smartphones. No Flutter o Dart é utilizado com o padrão de programação orientada a objetos.
O Google Flutter oferece uma forma simples e fácil de construir aplicativos. Sua arquitetura é dividida, de modo geral, em três camadas específicas:
- Framework Dart: camada que engloba os Flutter widgets — componentes predefinidos — para o desenvolvimento das aplicações com base em dois pacotes de componentes visuais: Material Design e Cupertino, os quais oferecem recursos das plataformas Android e iOS respectivamente;
- Engine: camada responsável pela UI — User Interface — e UX — User Experience — do Flutter. Na prática, ela tem a função de unir o código do aplicativo com os recursos do framework para criar a aplicação;
- Embedder: camada responsável por transformar a aplicação em Flutter para cada plataforma específica.
Conheça a linguagem Dart
Dart é uma linguagem de programação que lembra muito as linguagens C e Java. Foi criada pela Google e lançada ao mercado em outubro de 2011, tem suporte para uma tipagem mais dura como a do C mas também pode ser usada de maneira semelhante ao Javascript.
Como mencionado anteriormente, é a linguagem utilizada na framework Flutter e ganhou muita notoriedade por isso. No entanto, o Dart tem muito mais para apresentar do que apenas isso. Como qualquer outra linguagem, conseguimos criar qualquer tipo de aplicação, desde um servidor web até um aplicativo para Windows.
Dessa forma, temos que a linguagem Dart é muito versátil e de fácil compreensão para desenvolvedores iniciantes, tornando-se assim uma linguagem emergente nos últimos anos.
Entenda a arquitetura do Framework Flutter
Já que o Flutter é um SDK (Software Development Kit, que em português significa Kit de Desenvolvimento de Software), temos um ecossistema completo em nossas mãos, contando com um motor de renderizamento, widgets pré-prontos, APIs de integração e muito mais.
Framework Flutter
A framework é feita a partir da linguagem Dart e oferece amplo suporte ao Material Design e o estilo do Cupertino. Com isso temos a implementação de Widgets, animações, gerenciamento de estados e mais alguns fatores que influenciam a dinâmica da interface da pessoa usuária.
Framework Engine
A Engine é escrita na linguagem C++ para ter um maior desempenho. Nela, temos a implementação das funcionalidades essenciais do Flutter, incluindo o layout de textos, arquivos e gerenciamento de redes. O Dart é usado para compilar e executar as aplicações e a biblioteca Skia do Google é usada para renderização de gráficos.
Camada de plataforma Flutter
Nesta camada, temos a conversação do app com o sistema operacional do celular, Android ou IOS. De fato, é responsável por controlar o ciclo de vida dos programas, gerenciando o tamanho da tela, manipulação de threads e a plataforma de mensagem.
Entenda a anatomia de um Flutter App!
Como qualquer outro tipo de aplicação, temos um formato de projeto já pré-estabelecido e no Flutter não poderia ser diferente. Dessa forma utilizamos uma estrutura de árvores, onde separamos os componentes e os adicionamos na tela de maneira hierárquica, facilitando assim o fluxo do nosso app.
Na imagem a seguir, podemos ver um exemplo de estrutura de aplicativo no Flutter.
Como vimos, temos o Scaffold que é uma tela branca que serve como um agregador para os componentes filhos.
Logo abaixo, temos o AppBar que fica fixo na parte superior do app e o Container que é basicamente uma caixa que irá conter o conteúdo do nosso app.
Já dentro do Container, adicionamos uma Column que nos permite incluir Widgets nesse espaço. Por padrão, o alocamento dos componentes é feito na direção vertical.
O primeiro componente adicionado na Column é uma Row, que nada mais é do que um componente que nos oferece a oportunidade de adicionar mais Widgets. Só que, dessa vez de maneira horizontal. E dentro dessa Row temos apenas dois Widgets simples, um texto e um ícone.
O segundo componente da Column é apenas um Widget de texto.
Como percebemos, a estruturação do Flutter é bem simples e intuitiva, muito semelhante ao HTML nesse ponto. Podemos ver também que o possível código desse sistema não fica muito complexo, já que temos uma padronização e reutilização dos maravilhosos Widgets que o Flutter nos oferece.
Quais são as 5 principais características do Flutter?
O Flutter contém uma série de características que fazem com que ele seja uma ferramenta poderosa na construção de aplicações para dispositivos móveis. Confira algumas delas a seguir.
1. Permite o desenvolvimento multiplataforma
O framework Flutter pode ser instalado em Windows, Linux, macOS e Chrome OS. Portanto, em qualquer uma dessas plataformas é possível desenvolver aplicativos para Android e iOS. Além disso, ele pode ser utilizado em diferentes ferramentas, como no editor de código Visual Studio Code e na IDE Android Studio.
2. Possibilita o desenvolvimento de aplicações nativas
Como mencionamos, desenvolver para diferentes plataformas requer a escrita de códigos em duplicidade, especialmente a camada que contém as regras de negócio. Uma das características do Flutter é permitir a criação de aplicações nativas para diferentes sistemas operacionais — entre eles Android e iOS —, o que elimina essa necessidade.
Vale ressaltar que ele também permite o desenvolvimento de aplicativos Flutter desktop em Linux e macOS. Além disso, o projeto para o desenvolvimento de aplicações Flutter web está em versão beta.
3. Permite o acesso aos recursos nativos
Outra característica do Flutter é permitir a utilização de recursos nativos do sistema operacional, como câmera, geolocalização etc. Quando o aplicativo é compilado, ele é transformado em uma aplicação nativa de acordo com a plataforma correspondente escolhida.
4. Oferece maior desempenho
Por oferecer acesso aos recursos nativos do sistema operacional, há maior desempenho ao executar as aplicações. Outra razão para isso é por ele não necessitar de uma camada intermediária para acessar esses recursos, ou seja, o aplicativo é escrito em Dart, mas convertido para a linguagem de máquina nativa do sistema operacional.
5. Componentização e programação reativa
No Flutter, temos algumas características que podemos encontrar nas ferramentas concorrentes. No Android temos o jeito de montar o Layout, no Xamarin possuímos a unificação de código para distribuição nas diversas plataformas e no React obtemos a programação reativa e componentização, que no Flutter são referidos como Widgets.
Tudo que encontramos no Flutter são Widgets, logo, tudo no Flutter são componentes. Podemos fazer uma comparação com as aplicações web de hoje em dia. Dessa maneira temos que um texto é um Widget, um botão também e até mesmo um comportamento também é um Widget.
Fora isso, o Flutter já vem de fábrica com o Live Reload embutido. Dessa forma, se houver qualquer tipo de alteração em algum arquivo do projeto, a aplicação se modifica em tempo real, além de que temos o armazenamento dos estados das variáveis no momento da atualização para que não se perca nenhum dado na hora de salvar algum arquivo.
Quais as principais aplicações do Flutter? Saiba para que é usado?
O Flutter é usado para facilitar o desenvolvimento mobile através de um toolkit. Por ter o código fonte aberto criado pelo Google, conseguimos criar aplicativos para Android e IOS, além de ser o principal método para desenvolver programas para o Google Fuchsia.
Uma das promessas do time de desenvolvimento do Flutter é a criação de aplicativos para web. Em 2021, o suporte à plataforma web está em beta, mas funcional.
Quais as vantagens de usar o Flutter?
Algumas das características apresentadas no tópico anterior, já representam benefícios em utilizar o Flutter, como o maior desempenho e o acesso a recursos nativos. Entretanto, existem outras vantagens em utilizar essa ferramenta. Confira algumas delas abaixo.
Simples de aprender e simples de usar
O Flutter é uma ferramenta moderníssima e você consegue ver isso a partir do desenvolvimento no seu dia-a-dia. De maneira simples e com pouco código, já conseguimos criar aplicativos para celular. Se você já utilizou Java, Swift, ou React Native, vai perceber que o Flutter é muito diferente.
Um dos pontos mais invejáveis do Flutter é a utilização de pouco código para a criação de um app realmente nativo.
Economia de tempo e dinheiro
Como o Flutter é uma ferramenta de desenvolvimento multiplataforma, conseguimos criar na mesma base de código um aplicativo Android e outro IOS. Desenvolvimento multiplataforma é o melhor jeito de economizar tempo e dinheiro, já que conseguimos diminuir o processo de desenvolvimento para diversas plataformas.
Temos também a questão da licenciatura que em algumas outras frameworks, como o Xamarin, acabamos tendo de pagar para utilizar a IDE, por exemplo. No caso do Flutter, tudo é de graça, desde o SDK até as IDEs, podendo até escolher qual editor de texto você vai usar para desenvolver os aplicativos.
É um framework open source
Contar com ferramentas de código aberto contribui para reduzir o custo no desenvolvimento da aplicação, já que não será preciso pagar pela licença de uso. Além do Google, que é o desenvolvedor principal, há a comunidade de pessoas desenvolvedoras que ajudam a tirar dúvidas em diferentes plataformas, como na Stack Overflow, no Gitter, entre outras.
Alta produtividade
O Flutter permite o desenvolvimento de aplicações para diferentes plataformas. Isso significa maior produtividade para a equipe de desenvolvimento. Entretanto, ele utiliza a linguagem Dart, que não é muito popular. De acordo com a pesquisa da Stack Overflow, de 2020, sobre as tecnologias mais populares, a linguagem Dart é utilizada por apenas 4% dos entrevistados.
Já a linguagem JavaScript, é utilizada por 67,7% dos entrevistados. Por conta disso, caso seja iniciante, é melhor iniciar o aprendizado para o desenvolvimento de aplicativos em tecnologias como o React Native / JavaScript, que já estão mais consolidados no mercado.
Contudo, o framework Flutter e a linguagem Dart também devem fazer parte de um complemento desse aprendizado, já que é uma tecnologia que vem tomando espaço no mercado.
Boa documentação
É muito importante que as novas ferramentas tenham boas documentações, mas infelizmente nem sempre é o caso.
Felizmente, o Flutter provê para os seus desenvolvedores e desenvolvedoras uma documentação riquíssima em detalhes e exemplos. Nela, temos muitas receitas de código pronto e também um catálogo com todos os Widgets que o Flutter tem.