22 minutos de leitura
Autor(a)
Formado em Sistemas de Informação na FIAP e em Design Gráfico na Escola Panamericana de Artes e Design. Trabalho como desenvolvedor e instrutor na Alura. Nas horas vagas sou artista/ilustrador.
Fique por dentro de conteúdos, insights e oportunidades do universo tech. Receba novidades e lançamentos direto no seu e-mail.
Neste artigo, você vai aprender o que é Flutter, para que serve esse framework de desenvolvimento mobile, as diferenças entre stateless e stateful, e como iniciar a programação Flutter utilizando Dart
Você já parou para pensar em quantas vezes, só hoje, abriu um aplicativo ou utilizou um smartphone?
Provavelmente algumas vezes! Seja Android ou iOS, os aplicativos facilitam a nossa vida na hora de pagar contas sem ir ao banco; pedir comida; chamar um carro, e muito mais.
Com tantos apps por aí, podemos dizer que o mercado de trabalho oferece oportunidades para trabalhar com desenvolvimento mobile.
Assim, uma opção de tecnologia para estudar é o Flutter, utilizado em grandes empresas.
Em vez de aprender uma linguagem específica, por que não aprender uma única ferramenta que suporta várias plataformas?
Flutter é um framework de desenvolvimento focado em criar aplicações multiplataforma para dispositivos móveis.
Desenvolvido pela Google, o Flutter tem ampla adoção no mercado e, além de criar apps para dispositivos móveis, agora também permite o desenvolvimento para desktop (Linux, Windows e macOS).
Na prática, com o Flutter, é possível escrever o código uma única vez para que o aplicativo funcione em diferentes plataformas, como Android e iOS. Seus principais benefícios são a versatilidade, a curva de aprendizado reduzida e a agilidade no desenvolvimento.
A ferramenta é vantajosa para as empresas. Uma pessoa desenvolve o aplicativo para sistemas operacionais diferentes, ao contrário do modelo nativo, que necessita de duas pessoas devs, uma para cada plataforma.
O que é Flutter? #HipstersPontoTube
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 facilita o desenvolvimento do projeto.
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.
O que é Biblioteca, Framework e API? #HipstersPontoTube
O Flutter utiliza Dart, linguagem também criada pela Google e otimizada para dispositivos clientes (ou client-side) multiplataforma.
O objetivo dela é ser a mais produtiva possível e também mais flexível para servir como base para diversos frameworks de desenvolvimento de aplicativos.
Ela oferece algumas facilidades de desenvolvimento como:
Embora Dart seja a linguagem base do Flutter, não é absolutamente necessário que você aprenda primeiro Dart e depois Flutter.
Você pode aprender Dart enquanto estuda Flutter. Quanto mais você mergulhar em Flutter, mais vai se aprofundar em Dart por consequência.
É importante aprender pelo menos o básico de Dart:
Os 5 métodos da lista do Dart | #AluraMais
Conhecendo esses conceitos, você já consegue entender melhor a estrutura de um código Flutter.
Multiplataforma significa que com o Flutter é possível desenvolver um único código que roda simultaneamente em diferentes sistemas operacionais. Esse modelo é conhecido como desenvolvimento 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 requeria técnicas em diferentes linguagens de programação e suas diferentes características e estruturas:
Ou seja, há um problema no desenvolvimento nativo: sabendo Kotlin, posso construir apenas para Android, porém não para iOS! Para solucionar isso, o Flutter foi criado: agora 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.
Você pode acessar gratuitamente as primeiras aulas de Flutter e Android Studio da trilha Flutter da Alura e aprenda mais sobre:
A estrutura do Flutter é baseada em widgets (componentes visuais reutilizáveis). Mas afinal, 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.
Esses widgets são escritos com Dart, uma linguagem do paradigma Orientação a objetos. Com o Dart no núcleo, criamos aplicações mais otimizadas para diversos dispositivos do que outras ferramentas híbridas, por exemplo, o React Native.
Se precisa criar aplicações para várias plataformas, mas quer evitar manter códigos em diferentes linguagens, o Flutter é uma ótima opção. Porém, sempre avalie se a tecnologia atende ao objetivo do seu projeto.
Não existe ferramenta perfeita em tecnologia e com o Flutter não é diferente.
Como vimos, o Flutter utiliza Dart como base. Dart possui uma estrutura muito semelhante a linguagens focadas em orientação a 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
Orientação a objetos com Roberta Arcoverde | #HipstersPontoTube
Uma das vantagens da linguagem é que ela não é presa 100% ao tipo. Dart adapta o tipo de uma variável sem que ela seja declarada explicitamente. E trabalha com valores nulos por meio do null safety.
Assim, o Flutter combina as vantagens de linguagens mais robustas como Java e a adaptabilidade do JavaScript. Isso pode ser uma vantagem - e uma desvantagem.
Se há liberdade para declarar variáveis como quisermos, também precisamos nos preocupar em colocar o tipo certo no lugar correto. Às vezes, isso gera confusão no momento de “codar”.
Uma outra grande vantagem do Flutter é a sua documentação. Bem detalhada e estruturada, ensina como instalar, configurar e utilizar um projeto.
A documentação conta com exemplos de códigos, tutoriais e uma descrição detalhada do que cada componente faz.
Convido você a abrir a documentação do Flutter e explorá-la. Não é sempre que você encontra uma ferramenta tão bem documentada quanto o Flutter.
Mesmo no caso das linguagens mais famosas (JavaScript ou Java), as documentações deixam a desejar no pouco suporte oferecido.
Geralmente, contamos mais com a ajuda da comunidade; sites como Stackoverflow ou Dev.to servem mais como suporte "oficial".
Apesar dos elogios à documentação do Flutter, ela não é perfeita (como nada o é).
Os exemplos nem sempre mostram a forma mais eficiente para o nosso caso de uso (nesses casos, precisamos de suporte da comunidade), e a descrição de alguns componentes/widgets pode parecer um pouco confusa.
No geral, o Flutter é ótimo para começar. O suporte inicial é bem estruturado e completo, facilitando que você crie pequenas aplicações.
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.
Para quem não sabe aonde vai, qualquer caminho serve, não é mesmo?
Para “codar” em Flutter, precisamos de duas ferramentas: uma IDE (VSCode, VisualStudio, AndroidStudio, etc), e um emulador/simulador ou dispositivo móvel para testar.
Se você quiser saber mais sobre IDE, acesse este artigo que explica o que é essa ferramenta.
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. A explicação rápida é: 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 requerem um sistema mais poderoso para rodar do que um simulador.
E mesmo para Android, o seu sistema precisa ser potente o suficiente para rodar o código e o emulador. Um sistema fraco dificulta a experiência de codar, tornando-a exaustiva.
Essa é a primeira e principal barreira para começar a desenvolver aplicações híbridas.
Agora que entendemos as vantagens e desvantagem do Flutter, é hora de ir para o código, a parte que você provavelmente estava esperando!
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.
Ecossistema Flutter – Hipsters Ponto Tech #287
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 a pasta do SDK do Flutter ou uma pasta a que você não tem acesso), digite o seguinte comando no terminal:
flutter create nome_da_aplicacao O comando vai gerar todos os arquivos e pastas necessários, organizados na pasta para a qual demos um nome.
Pronto! Você pode começar o desenvolvimento de uma 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.19.5 do Flutter):
Você deve ter percebido uma extensa lista de arquivos. Aos poucos, vamos entendendo o que cada pasta faz dentro do projeto. Neste começo, preocupe-se em fazer o projeto funcionar.
Dependendo da sua IDE, 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:
// This works for code too, not just values: Most code changes can be
// tested with just a hot reload.
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}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 dessa pasta é onde vamos desenvolver nossa aplicação e criar toda a estrutura de arquivos e pastas.
Dentro da pasta `lib`, encontramos o arquivo `main.dart`, que contém a função `main()`, responsável por iniciar um 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. Clique nesse botão, e 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 clicar no botão roxo, 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 compreendemos a estrutura de como um aplicativo funciona.
Voltando para o código do arquivo `main.dart`, você vai enxergar várias linhas de código e de comentários.
Comentários são marcados por `//` 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.
Na primeira linha, temos o `import`, o qual indica que algum arquivo ou classe deve ser importado no projeto. Neste caso, precisamos do `material.dart`, que contém as informações do Material Design.
Material Design é a linguagem visual do Android criada pela Google. Para saber mais, acesse a sua documentação.
Na linha número 3, vemos a função `main` que chama nosso app. O app está declarado na linha 7. Repare que, na linha 7, a classe `MyApp` extende um `StatelessWidget`.
Lembrando do que falei no começo do artigo, o Flutter é composto por blocos 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.
Há dois tipos básicos de widgets, stateless e stateful.
Stateless (em português, “sem estado”) são widgets que não sofrem alterações em seu estado.
Stateful (em português, “com estado”) são widgets que sofrem alterações em seu estado. Mais para frente, vamos entender como esses estados funcionam.
Na linha 12, verificamos 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 pré-montados, a exemplo do `MaterialApp`.
A documentação do Flutter apresenta um catálogo de widgets pré-montados que podemos utilizar em nosso projeto.
Para finalizar nosso entendimento do código Flutter, vejamos a linha 39 com o stateful widget`MyHomePage`. Este widget é a representação do corpo da nossa aplicação. Dentro dele, você observa três elementos:
Esse widget foi criado como stateful. Por quê?
Bom, o contador tem o seu valor alterado quando clicamos no botão de adição, portanto existe uma alteração no seu estado. Como ocorre uma mudança de valor, há uma mudança de estado. E a definição de ‘statefulWidget` é justamente suas mudanças de estado.
O widget cujo estado é modificado deve ser declarado dentro de um statefulwidget, sendo seu filho direto.
É de grande importância que nosso projeto seja bem estruturado e organizado para facilitar a manutenção e o 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, os temas e outros componentes devem ficar em outras pastas dentro da `lib`.
Dentro do arquivo `main.dart`, inserimos apenas a estrutura mínima para chamar o app. E a página inicial deve ser importada da pasta `screens`.
Veja um exemplo de estrutura de arquivos:
Dentro da pasta `lib`, vemos duas pastas:
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
Se você entendeu os conceitos básicos de Flutter, pode avançar para habilidades de nível pleno-sênior.
Dois conceitos importantes são: integração contínua ou continuous integration (CI) e entrega contínua ou continuous delivery (CD).
A ideia principal de CI é que diversas equipes trabalhem em uma única estrutura de código ou repositório. Qualquer adição, manutenção ou remoção realizada por uma equipe será implementada no produto em produção.
Um exemplo seria de duas equipes trabalhando em um app de um banco online: Uma equipe (A) será responsável por desenvolver a tela, mais especificamente a parte visual do aplicativo; Uma outra equipe (B) será responsável por adicionar um novo tipo de conta dentro do banco.
Ambas equipes trabalham em tarefas distintas, mas, no final, ambas as funcionalidades irão compor o único app de banco.
O ponto é que as equipes são incentivadas a fazer pequenos merges (junções de código) para que trabalhem na mesma base de código.
Assim, qualquer mudança, feita por uma equipe, que acabe quebrando o código, pode ser facilmente ajustada por que há menos código novo para olhar do que um merge gigantesco no final do mês, ou seja, fica mais fácil identificar o bug ou erro.
Quando falamos de integração contínua, falamos dessas integrações do código novo feitas de forma mais regular e menos espaçada: o merge vira uma prática diária em vez de semanal ou mensal.
CI é uma técnica avançada que facilita a identificação e correção de erros, impactando diretamente na qualidade do código e diminuindo a chance de que erros cheguem na mão dos usuários de um aplicativo.
CI é uma técnica avançada que facilita a identificação e correção de erros, impactando diretamente na qualidade do código e diminuindo a chance de que erros cheguem na mão dos usuários de um aplicativo.
Na prática, a CI requer a automatização dos processos de teste e build do aplicativo. Ela envolve os seguintes passos:
O conceito de CD assemelha-se ao de CI, mas o contexto em que se aplica é um pouco diferente. Vamos usar o mesmo exemplo das duas equipes trabalhando no app de online banking.
Tal como CI ajuda a identificar erros e conflitos no código e suaviza esse processo, o CD automatiza e simplifica a entrega do projeto em lojas como Google Play (Android) ou App Store (iOS).
Em vez de entregar grandes features a cada três meses (um exemplo arbitrário), CD recomenda entregas menores e constantes.
Dessa forma, você e as demais equipes mantêm um ritmo constante de entrega, oferecendo novas funcionalidades, correções e atualizações às pessoas usuárias finais de forma rápida e confiável.
Na prática, dois processos são automatizados: distribuição para testes internos e lançamentos nas lojas.
O processo de CD aproveita a base estabelecida pela CI, adicionando os seguintes passos:
Veja mais conteúdos sobre CI/CD através da formação Flutter CI/CD: automatize seu trabalho.
Avançando ainda mais em técnicas e conceitos no Flutter, há o server driven UI (Interface orientada por servidor).
Server driven UI é uma arquitetura de desenvolvimento em que toda a responsabilidade de construir telas de um aplicativo fica no servidor.
O conceito inicial e básico, que aprendemos até o momento, é que nós escrevemos os widgets e eles aparecem em nosso dispositivo.
Mas tudo isso tem sido feito dentro do próprio aplicativo. Praticamente a única maneira que a pessoa pode ter seu aplicativo atualizado é baixando uma nova versão na Play Store (Google) ou Apple Store (Apple).
No entanto, do lado da pessoa desenvolvedora, o processo de atualizar um aplicativo na loja leva dias. É aí que entra o server driven UI.
Com a arquitetura server driven UI, o aplicativo faz uma requisição para o servidor, solicitando uma descrição de interface.
Geralmente, essa resposta vem no formato de árvore de widgets em um objeto JSON. Com essa resposta, o aplicativo sabe como desenhar e renderizar a interface na tela do dispositivo.
Um exemplo seria em um aplicativo de notícias: server driven UI pode ser usada para personalizar a interface do usuário para cada usuário.
O servidor pode enviar ao aplicativo uma descrição JSON da interface do usuário personalizada, com base nas preferências da pessoa usuária e no conteúdo da notícia que ela está visualizando.
Qualquer alteração feita no arquivo JSON gera mudanças imediatas no aplicativo.
Dessa forma, podemos implementar pequenas atualizações no aplicativo e dispensar a atualização do aplicativo na loja. O ciclo de atualização de um aplicativo na loja pode demorar de 1 a 5 dias, enquanto server driven UI reduz esse tempo para minutos.
No entanto, essas atualizações mais rápidas são menores, por exemplo, mudar a cor de botão, alterar a ordem de um menu de opções etc.
Mudanças maiores ou estruturais no projeto ainda necessitam de atualização na loja de aplicativos, porém server driven UI facilita a vida da pessoa desenvolvedora.
Veja as vantagens de server driven UI no Flutter:
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:
Com esses fundamentos, o aprendizado do Flutter se torna mais acessível, pois a pessoa estudante passa a compreender melhor a estrutura dos projetos.
Se você está iniciando os estudos na área de desenvolvimento, pode estudar com a gente na Alura!
A carreira Desenvolvimento Mobile com Flutter reúne conteúdos que ajudam a construir essa base e avançar na criação de aplicativos, desde os primeiros conceitos até práticas mais completas com a tecnologia.
É natural se perguntar: o mercado de Flutter oferece boas oportunidades? Quais técnicas são necessárias para candidatar-se a vagas de estágio ou posição júnior em Flutter?
O mercado de Flutter é promissor e você pode encontrar boas oportunidades.
Veja algumas empresas que utilizam o Flutter:
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.
Neste artigo, passamos por uma visão geral e mergulhamos no maravilhoso mundo do Flutter. Aprender essa ferramenta é uma ótima escolha 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.
Bons estudos!
✨ Agradecemos pela sua avaliação! ✨
Avalie este artigo
