Introdução
Neste artigo, você descobrirá o que é Flutter, para que e como utilizá-lo.
Quantas vezes você abriu um aplicativo hoje ou verificou alguma coisa em um smartphone ou outro dispositivo móvel hoje?
Provavelmente muitas vezes! Seja Android ou iOS, os aplicativos e dispositivos móveis hoje facilitam nossa vida na hora pagar contas sem precisar ir ao banco; pedir comida; chamar um carro, e muito mais.
Com tantos apps por aí, podemos dizer que o mercado de trabalho está aquecido e existem oportunidades para quem busca trabalhar com o desenvolvimento mobile. Assim, uma das opções de tecnologia para aprender é o Flutter, utilizado em grandes empresas. Ao invés de aprender as linguagens de suas respectivas plataformas, por que não aprender uma única que consegue dar suporte para todas elas?
O que é Flutter?
Flutter é um framework (ferramenta) de desenvolvimento com foco multiplataforma em dispositivos móveis. Criado pela Google, é bastante utilizado no mercado e, mais recentemente, permite a criação de aplicações para desktop (Linux, Windows e macOS). Vamos entender mais sobre isso?
Na prática, o Flutter é uma ferramenta para desenvolver aplicativos em diferentes plataformas - Android e iOS - ao mesmo tempo com um único código. Logo, seus principais benefícios são a versatilidade, menor curva de aprendizado e agilidade.
É extremamente vantajoso para as empresas, pois uma pessoa dev pode desenvolver aplicativos para sistemas operacionais diferentes, oposto ao modelo nativo, em que são necessários duas pessoas devs para cada plataforma.
O que é um framework?
Agora, você pode se perguntar sobre o que são os termos framework e multiplataforma. Vamos ver um a um!
O framework pode ser simplesmente definido como uma ferramenta. Em uma definição mais aprofundada, trata-se de um pacote de códigos de bibliotecas pré-prontas que facilitam o desenvolvimento do projeto.
O Flutter é uma linguagem de programação?
A resposta é simples: não! O Flutter não pode ser considerado uma linguagem de programação como Dart, Java e .net; trata-se de um framework, conforme vimos.
Qual linguagem o Flutter utiliza?
O Flutter utiliza o Dart, também criada pela Google, uma linguagem otimizada para dispositivos clientes (ou client-side) multi plataforma.
O objetivo dela é ser a mais produtiva possível e também a mais flexível para servir como base para diversos frameworks de desenvolvimento de aplicativos.
Até o momento da escrita deste artigo, Flutter é o único framework que utiliza Dart para desenvolver aplicativos.
Ela oferece algumas facilidades de desenvolvimento como:
- hot reload: para ver instantaneamente as alterações feitas no código (que é bem incomum para linguagens compiladas);
- Rodar templates no navegador;
- null safety: permitindo uma maior adaptabilidade do código.
Embora Dart seja a linguagem base do Flutter, não é necessário que você aprenda primeiro Dart e depois Flutter. Você pode ir aprendendo Dart enquanto aprende Flutter. Quanto mais você se aprofundar em Flutter, mais vai se aprofundar em Dart por consequência.
É importante aprender pelo menos o básico de Dart:
- Variáveis e tipos;
- Funções;
- Repetições;
- Classes/objetos.
Conhecendo esses conceitos, você já consegue entender melhor a estrutura de um código Flutter.
O que é multiplataforma?
Dizemos multiplataforma em razão de que o Flutter desenvolve um único código, que funciona simultaneamente para diferentes sistemas operacionais; esse modelo de desenvolvimento é chamado de híbrido.
Há também a opção de desenvolvimento nativo. No mercado de mobile, antes era difícil programar um aplicativo para Android e iOS ao mesmo tempo, pois o desenvolvimento para dispositivos diversos requer técnicas em diferentes linguagens de programação, e cada uma delas com suas características e estruturas:
- Sistema operacional Android utiliza Java/Kotlin;
- Sistema operacional iOS usa Swift;
- Desktop pode ser desenvolvido com Java/JavaScript(Electron)/Rust etc.
Ou seja, há um problema: sabendo Kotlin, posso construir apenas para Android, porém não para iOS! E para solucionar isso, o Flutter foi criado: nele conseguimos produzir aplicações multiplataforma.
A partir da versão 2.10 do Flutter, podemos desenvolver aplicações para desktop também. Desta forma, o Flutter é uma das tecnologias mais maleáveis do mercado.
Para se aventurar mais no mundo dos híbridos e nativos, você pode ler nosso artigo que aprofunda os primeiros passos no universo mobile.
Comece seus primeiros passos no Flutter
Acesse gratuitamente as primeiras aulas de Flutter e Android Studio da Formação Flutter da Alura e aprenda mais sobre:
- O que é o Flutter;
- Onde programar (Android Studio).
Como funciona o Flutter?
Flutter funciona com a linguagem Dart e sua estrutura funciona por meio de componentes/widgets. E o que são widgets?
Os widgets são os “blocos” de construção, como um lego ou quebra-cabeça, que encaixamos para montar as telas de um aplicativo.
O Flutter utiliza como base o Dart, uma linguagem de programação do paradigma Orientação a objetos. Com o Dart no núcleo, podemos criar aplicações que são mais otimizadas para diversos dispositivos do que outras ferramentas híbridas, por exemplo, o React Native.
Quando falamos de linguagens mais otimizadas, pensamos no tempo de execução e performance. Desenvolver na linguagem nativa do dispositivo é sempre mais performático do que com uma linguagem híbrida independente de qual seja ela, além de que novas features são implementadas primeiro nas linguagens nativas.
Por que utilizar Flutter?
Assim como todo framework, Flutter tem suas vantagens e desvantagens. A resposta curta para esta pergunta é: depende do caso. Em resumo, se você precisa de aplicações para diversas plataformas e não quer dar manutenção em três linguagens diferentes, Flutter é para você!
Vantagens do Flutter
Linguagem orientada a objetos
Como falado acima, Flutter utiliza Dart como base. Dart é uma linguagem com estrutura muito semelhante a linguagens focadas em orientação à objetos, por exemplo, o Java.
Se quiser saber mais sobre o paradigma de orientação a objetos, recomendamos o vídeo abaixo:
Orientação a objetos com Roberta Arcoverde | #HipstersPontoTube
Uma das vantagens da linguagem é que ela não é presa 100% ao tipo. Dart tem a capacidade de adaptar o tipo de uma variável sem que ela seja declarada explicitamente. Também tem a capacidade de trabalhar com valores nulos através do null safety.
Assim, o Flutter combina as vantagens de linguagens mais robustas como Java e a adaptabilidade do JavaScript. Isso pode ser tanto uma vantagem quanto uma desvantagem.
Ao mesmo tempo que temos liberdade para declarar variáveis como quisermos, nós também precisamos nos preocupar de colocar o tipo certo no lugar correto. Às vezes isso pode causar confusão no momento de codar.
Documentação de qualidade
Uma outra grande vantagem do Flutter é a sua documentação. Flutter conta com uma documentação bem detalhada e estruturada de como instalar, configurar e utilizar em um projeto.
A documentação conta com exemplos de códigos, tutoriais e uma descrição bem detalhada do que cada componente faz. Convido você a abrir a documentação do Flutter e explorar tudo o que ela pode oferecer. É bem incomum encontrar uma linguagem tão bem documentada quanto o Flutter.
Mesmo para linguagens mais famosas como JavaScript ou Java as documentações oferecem pouco suporte. Geralmente, contamos mais com a ajuda da comunidade do que realmente dos órgãos desenvolvedores. Sites como Stackoverflow ou Dev.to acabam servindo mais como suporte "oficial".
Mesmo falando extremamente bem da documentação do Flutter, ela não é perfeita. Os exemplos nem sempre mostram a forma mais eficiente para o nosso caso de uso (para esses casos precisamos de suporte da comunidade), e alguns componentes/widgets tem a sua descrição um pouco confusa.
No geral é uma linguagem muito boa para começar porque o suporte inicial é bem estruturado e completo, permitindo que você consiga criar pequenas aplicações com facilidade.
Desvantagens do Flutter
Vamos ser sinceros com você: toda e qualquer tecnologia apresenta vantagens e desvantagens; é importante que você as conheça para tomar decisões embasadas e conscientes em sua carreira. Afinal, para quem não sabe aonde vai, qualquer caminho serve, não é mesmo?
Configurar o ambiente de aprendizagem
Uma desvantagem (e no geral para frameworks híbridos) é configurar o ambiente de desenvolvimento. Para codar em Flutter, precisamos de duas ferramentas: uma IDE (VSCode, VisualStudio, AndroidStudio, etc) ou um editor de texto (bloco de notas, notepad++, Atom, etc).
Se você quiser saber mais sobre o que é uma IDE, acesse este artigo que explica o que é essa ferramenta. Basicamente, uma IDE é o programa onde a gente escreve as linhas de código.
O problema vem na hora de testar a aplicação. É necessário que você tenha um dispositivo virtual ou físico que emula um celular funcionando em tempo real. Para Android, é um pouco mais tranquilo porque o emulador roda em várias máquinas. Já o iOS precisa de um Mac com xCode.
Existe uma diferença entre emulador e simulador. Rapidamente explicando: o emulador imita todo o hardware e software como se fosse um dispositivo real. Por sua vez, o simulador é um ambiente que imita o comportamento e estado de um dispositivo. Emuladores precisam de um sistema mais poderoso para rodar do que um simulador.
E mesmo para Android, o seu sistema precisa ser poderoso o suficiente para rodar o código e o emulador. Um sistema muito fraco pode tornar a experiência de codar muito exaustiva e frustrante.
Essa é a primeira e principal barreira para começar a desenvolver aplicações híbridas.
Tempo de mercado
Uma outra desvantagem é que Flutter ainda é muito novo no mercado. Então ainda existem poucos recursos criados pela comunidade, como por exemplo respostas à dúvidas e posts/vídeos com ideias e tutoriais.
Agora que entendemos as vantagens e desvantagens do Flutter, é hora de ir para o código — a parte que você provavelmente estava esperando!
Como utilizar o Flutter?
Vamos considerar que você tenha quase tudo o que é necessário para começar o desenvolvimento com Flutter (ambiente de desenvolvimento com emulador e IDE). Como podemos iniciar a escrita da nossa aplicação?
Precisamos instalar, no computador, as seguintes ferramentas:
- 1) Flutter SDK: o arquivo que permite utilizar a ferramenta;
- 2) Android Studio e/ou xCode: contém as ferramentas de build para testar e subir a aplicação em dispositivos Android e iOS (além de servirem como IDEs);
- 3) IDE: é o programa onde você vai escrever o código. Há diversas opções de IDE no mercado para escolher: Visual Studio Code (que utilizaremos neste artigo), Android Studio, xCode;
- 4) Emulador: necessário para rodar e testar o aplicativo que pretendemos criar.
Depois de configurado o Flutter SDK e um emulador/simulador, podemos iniciar nosso projeto através do terminal.
Dentro de uma pasta qualquer (que não seja dentro da pasta do SDK do Flutter ou uma pasta que você não tem acesso), digite o seguinte comando no terminal:
flutter create nome_da_aplicacaoIsso vai gerar todos os arquivos e pastas necessários para começarmos o desenvolvimento da nossa aplicação. Tudo isso está em uma pasta com o nome que demos para a nossa aplicação.
Em seguida, digite flutter create meu_app para gerar a pasta meu_app.
Abra a pasta dentro de uma IDE (neste caso utilizarei o VSCode) e você terá acesso a seguinte estrutura de arquivos (considerando a versão 3.0.5 do Flutter):
Aos poucos, vamos entendendo o que cada pasta faz dentro do projeto. Neste começo, vamos nos preocupar em fazer nosso projeto funcionar.
Dependendo da IDE que você estiver utilizando, você pode subir uma instância do emulador/simulador com apenas alguns cliques. No caso do Visual Studio Code, o botão de subir instância fica no canto inferior direito.
O código visto na imagem pode ser lido abaixo:
//Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.blue,
), // ThemeData
home: const MyHomePage(title: 'Flutter Demo Home Page'),
); // MaterialApp
} Clique onde está escrito o nome do seu sistema operacional e escolha o emulador/simulador que você já deixou pré-configurado.
Depois de iniciar nosso dispositivo, podemos subir nossa aplicação.
Quando criamos um novo projeto Flutter, a ferramenta já deixa um código pronto para testarmos se o Flutter consegue subir corretamente.
Esse código inicial fica dentro da pasta lib. Aproveitando, dentro desta pasta é onde vamos desenvolver nossa aplicação, criar toda a estrutura de arquivos e pastas.
Dentro da pasta lib encontramos o arquivo main.dart, este arquivo contém a função main() que inicia nosso projeto. Após abrir esse arquivo, no Visual Studio Code, teremos uma nova opção no canto superior direito onde podemos debugar/depurar nossa aplicação.
O botão tem um formato de um botão play/tocar com um inseto. Após clicar nesse botão, o Flutter vai subir nosso código no emulador que está rodando de plano de fundo.
Dentro do emulador você terá uma tela parecida com a tela a seguir:
Ao clicarmos no botão azul, o valor "0" no meio da tela deverá ser alterado pela quantidade de vezes que clicamos no botão.
E esse é o projeto de demonstração do Flutter! A partir dele podemos começar a entender a estrutura de como um aplicativo funciona.
Voltando para o código do arquivo main.dart nós temos várias linhas de código e também de comentários.
Comentários são marcados por
//
Para continuar acompanhando o artigo, é importante que você tenha o conhecimento de paradigmas de orientação a objetos e lógica de programação.
A primeira linha nós temos o import, ele indica que algum arquivo ou classe deve ser importado no projeto. Neste caso precisamos do material.dartque contém as informações do Material Design.
Material Design é a linguagem visual do Android criada pela Google. Para saber mais, pode acessar a documentação dela.
Na linha número 3 nós temos a função main que chama nosso app. O app está declarado na linha 7. Repare que na linha 7, nossa classe MyApp extende um StatelessWidget.
Lembrando do que falei no começo do artigo, o Flutter é composto por blocos que são conhecidos por widgets. Cada parte visual da nossa aplicação (o que será mostrado na tela do nosso dispositivo) deve ser declarado como um widget.
Portanto botões, textos, cartões, imagens, etc… são considerados widgets.
Existem dois tipos básicos de widgets, stateless e stateful. Stateless são widgets que não tem alterações em seu estado. Stateful são widgets que acabam sofrendo alterações em seu estado. Mais para frente vamos entender melhor como esses estados funcionam.
Na linha 12 nós temos a função que vai construir nosso widget do MyApp. A função recebe um contexto (context) e retorna alguma coisa. Essa coisa pode ser qualquer widget. Neste caso o widget é um MaterialApp.
Dentro do construtor deste widget passamos alguns parâmetros, como title, theme e home.
Widgets podem ser criados do zero como foi o caso do MyApp ou também podem ser algo pré-montado como o caso do MaterialApp.
A documentação do Flutter nos apresenta com um catálogo de widgets pré-montados que podemos utilizar em nosso projeto.
Para finalizar nosso entendimento do código Flutter, temos a linha 32 com o stateful widget MyHomePage. Este widget é a representação do corpo da nossa aplicação. Dentro dele nós temos o texto "You have pushed the button this many times:", o número de vezes que o botão foi apertado (que podemos chamar de contador) e também o botão no canto inferior direito.
Mas por que esse widget foi criado como stateful? Bom, o contador tem o seu valor alterado quando clicamos no botão de adição, portanto existe uma alteração no seu estado.
Uma observação que o widget que tem alguma alteração no seu estado deve ser declarado dentro de um statefulwidget, sendo filho direto do mesmo.
Construa um aplicativo mobile do zero com Flutter
Construa um aplicativo mobile do zero, transformando um design no Figma em código!
Live Coding | Desenvolva um aplicativo em Flutter! #AluraMais
Estrutura de arquivos e pastas em um projeto Flutter
É de grande importância que nosso projeto seja bem estruturado e organizado para facilitar manutenção e entendimento do código.
Uma das boas práticas de organização do projeto é deixar na raiz da pasta lib apenas o arquivo main.dart. As telas, temas e outros componentes devem ficar em outras pastas dentro dessa pasta lib.
Dentro do arquivo main.dart deve ficar apenas a estrutura mínima para chamar o app. E a página inicial deve ser importada da pasta screens.
Um exemplo de estrutura de arquivos:
Dentro da pasta lib temos as pastas componentes onde vão ficar os componentes e seções da aplicação, e a pasta screens onde ficam as telas da aplicação. A ideia é que as telas importem os componentes necessários para a sua estrutura. O arquivo main.dart inicializa a aplicação e chama a página inicial home.dart.
Como desenvolver boas práticas de programação? com Fabio Akita | #HipstersPontoTube
Curva de aprendizado
Uma dúvida comum para iniciantes nos estudos da tecnologia pode ser: Qual a curva de aprendizado do Flutter?
Os pré-requisitos, conhecimentos e técnicas que você precisa dominar para mergulhar no Flutter são:
Se você está iniciando os estudos na área de desenvolvimento, pode estudar com a gente na Alura! Temos um roteiro de estudo simplificado:
- Comece com a Formação Iniciante em Programação para entender lógica de programação e criar os primeiros algoritmos;
- Em seguida, siga para a Formação de Dart e desenvolva sólidas técnicas com a linguagem - o que ajuda muito no Flutter;
- Por último, mergulhe de cabeça na Formação Flutter!
Aprenda mais sobre Flutter
Acesse gratuitamente as primeiras aulas da Formação Flutter, feita pela Escola de Mobile da Alura e continue aprendendo sobre temas como:
- Flutter: Widgets, Stateless, Stateful, Imagens e Animações
- Flutter: Controller, navegação e estados
- Flutter: aplicando persistência de dados
- Flutter com WebAPI: integrando sua aplicação
- Flutter com Web API: evoluindo na integração da aplicação
Mercado de trabalho e empresas que utilizam Flutter
É natural também se perguntar: o mercado de Flutter é aquecido e oferece boas oportunidades? Quais técnicas preciso dominar para me inscrever em um estágio ou vaga Dev Flutter Júnior?
O mercado de Flutter é promissor e você pode encontrar boas oportunidades. Veja algumas empresas que utilizam o Flutter:
- Nubank;
- iFood;
- Alibaba;
- Ebay.
Se você quiser mais detalhes sobre as técnicas e o mercado de trabalho, confira esta pesquisa que realizamos e se mantém atualizada até o momento.
Apostilas — Você profissional em T
Com as Apostilas de tecnologia sobre Front-End, Programação, UX & Design e Ciências de Dados da Alura avance nos estudos e no desenvolvimento da sua carreira em T.
Você poderá se aprofundar nos seguintes tópicos:
- Desenvolvimento Web com HTML, CSS e JavaScript;
- UX e Usabilidade aplicados em Mobile e Web;
- Java para Desenvolvimento Web;
- Java e Orientação a Objetos;
- Python e Orientação a Objetos;
- C# e Orientação a Objetos;
- SQL e modelagem com banco de dados;
Baixe elas completas em: Apostilas da Alura - Conteúdo livre para o seu aprendizado
Conclusão
Neste artigo, tivemos uma visão geral e mergulhamos no maravilhoso mundo do Flutter. Aprender essa ferramenta é uma ótima opção para começar a desenvolver aplicações para dispositivos móveis.
A documentação bem detalhada ajuda muito nos primeiros passos, tornando o Flutter uma das ferramentas mais amigáveis para aprender.
É importante que você já tenha os conhecimentos de lógica de programação e paradigma de orientação a objetos para facilitar o entendimento.
Se você já tem conhecimentos de React JS e/ou JavaScript, talvez React Native seja um ponto de transição mais familiar. Com apenas a grande barreira que é preparar todo o ambiente de desenvolvimento (que praticamente todas as linguagens de desenvolvimento mobile tem), é difícil não recomendar Flutter.
E vamos lançar um desafio! Se você gostou desse artigo, compartilhe nas redes sociais o que você aprendeu com ele com a hashtag #AprendinoBlogdaAlura.
Se quiser conhecer mais sobre Flutter, pode acessar a formação Flutter da Alura, em que você poderá entender os fundamentos e primeiros passos do framework, desenvolver um portfólio de projetos e, é claro, técnicas e habilidades intermediárias e avançadas com a tecnologia.
Como fazer um bom portfólio em tecnologia com Diogo Pires | #HipstersPontoTube
Bons estudos!
