Flutter - Como configurar o ambiente de desenvolvimento

Quer aprender a configurar o Flutter na sua máquina para criar lindos aplicativos com este incrível framework? Cola aqui neste artigo que aprenderemos agora como fazer isso!

Para desenvolvermos utilizando Flutter, precisaremos dos seguintes itens instalados em nossa máquina, independentemente se ela é Windows, Linux ou macOS:

• Flutter SDK.

• Android Studio e/ou um editor de texto com plug-ins de suporte ao Flutter (vamos utilizar o Intellij idea community).

• Um emulador ou dispositivo físico para testarmos a aplicação.

• Configurar o plugin do Flutter no Intellij Idea (ou outro editor de textos com suporte ao Flutter).

Instalação do Flutter

Instalando o Flutter no Windows

A instalação no Windows normalmente é bem rápida, pois necessitamos apenas do Git instalado e do próprio SDK do Flutter (que já tem o SDK do Dart embutido).

Para instalar e configurar o Flutter no Windows, veja os passos a seguir:

1 - O Flutter depende do Git para funcionar. Então, é necessário que o Git esteja instalado na máquina antes de instalarmos o Flutter. Para isso, basta baixar o cliente do Git para Windows da sua página oficial. A instalação é no estilo Avançar> Avançar> Concluir. Quando o download for concluído, basta clicar no instalador do Git para que o processo de instalação seja iniciado.

2 - Baixe o arquivo zip da última versão do Flutter. Esse arquivo pode ser encontrado na página oficial do Flutter, dentro da seção “Get the Flutter SDK”. O nome do arquivo normalmente é flutter_windows_x.x.x-stable.zip, no qual as letras “x” são os números da versão mais atual disponível.

3 - Extraia o arquivo zip com o Flutter SDK para uma pasta onde não sejam necessários privilégios de administrador. A documentação do Flutter recomenda que o SDK seja extraído para C:\flutter.

4 - Para utilizarmos o Flutter CLI (interface de linha de comandos) diretamente em qualquer linha de comando, os seguintes passos são necessários:

• Vá em Painel de Controle > Contas de usuário > Alterar as variáveis do meu ambiente.

• Na seção de variáveis de ambiente de usuário, procure a variável chamada “Path”.

• Adicione à variável “Path” o caminho para a pasta C:/flutter/bin. Não se esqueça de separar a nova entrada das entradas pré-existentes com um ponto e vírgula (;).

• Reinicie o Windows.

• Abra uma instância do git bash ou cmd e digite o comando Flutter. O help do Flutter deve ser exibido.

5 - E por último, mas não menos importante, execute em uma linha de comando do Windows o comando flutter doctor, para que ele dê o diagnóstico completo e informe se a instalação foi realizada corretamente. Caso ainda haja pendências, ele dirá quais são e como resolvê-las.

Instalando o Flutter no Linux

A instalação no Linux normalmente é bem rápida para quem tem o hábito de trabalhar com a linha de comandos com a linha de comandos. Necessitamos apenas do Git instalado e do próprio SDK do Flutter (que já tem o SDK do Dart embutido).

Para instalar e configurar o Flutter no Linux (Synaptics, Ubuntu ou Debian), veja os passos a seguir:

1 - O Flutter depende do Git para funcionar. Para isso, instale o Git através de seu gerenciador de pacotes por meio do comando apt-get install git-all.

2 -Verifique se sua distribuição Linux é 64 bits. O Flutter só funciona em sistemas operacionais de 64 bits.

3 - Baixe a última versão do Flutter SDK para Linux. O SDK pode ser baixado em sua página oficial na seção “Get the Flutter SDK”.

4 - Extraia o Flutter para uma pasta que não exija elevação de privilégios. A documentação recomenda que o Flutter SDK seja extraído para uma pasta chamada “flutter” na raiz do seu usuário.

5 - Adicione o Flutter às variáveis de ambiente com o comando export PATH=pwd/flutter/bin:$PATH em uma instância do Terminal. Porém, este export funcionará apenas enquanto o terminal estiver aberto. Uma maneira de configurar definitivamente no path do Linux está no artigo Update your path da documentação do Flutter.

6 - Rode o comando ´flutter´ no terminal. O help do Flutter CLI deve ser exibido. E por último, mas não menos importante, execute em uma linha de comandos do seu Linux o comando flutter doctor para que ele dê o diagnóstico completo se a instalação foi realizada corretamente. Caso ainda haja pendências, ele dirá quais são e como resolvê-las.

Instalando o Flutter no macOS

O processo de instalação do Flutter no macOS é bastante similar ao do Linux.

A instalação no macOS normalmente é bem rápida para quem está habituado(a) com a linha de comandos. Necessitamos apenas do Git instalado e do próprio SDK do Flutter (que já tem o SDK do Dart embutido).

1 - O Flutter depende do Git para funcionar. Para isso, instale o Git através de seu gerenciador de pacotes (utilizaremos aqui o homebrew) por meio do comando brew install git.

3 - Baixe a última versão do Flutter SDK para macOS. O SDK pode ser baixado em sua página oficial na seção “Get the Flutter SDK”.

4 - Extraia o Flutter para uma pasta que não exige privilégios de administrador. A documentação recomenda que o Flutter SDK seja extraído para uma pasta chamada “flutter” na raíz do seu usuário.

5 - Atualize o PATH da máquina para que este aponte para o Flutter SDK. Para isso, basta rodar o comando export PATH=pwd/flutter/bin:$PATH em uma instância do Terminal. Este export funcionará apenas enquanto o terminal estiver aberto. Uma maneira de configurar definitivamente no path do macOS está no artigo Update your path da documentação do Flutter.

6 - Rode o comando ´flutter´ no terminal. O help do Flutter CLI deve ser exibido. E por último, mas não menos importante, execute em uma linha de comandos do seu macOS o comando flutter doctor para que ele dê o diagnóstico completo se a instalação foi realizada corretamente. Caso ainda haja pendências ele dirá quais são e como resolvê-las.

Instalação do Intellij Idea

Além do SDK do Flutter, precisamos de uma IDE (ou editor de textos) para escrevermos nossos códigos e, com isso, desenvolvermos nossas aplicações. O Intellij Idea possui um suporte gigantesco para construir aplicações Flutter, desde criar um projeto e debugar até a compilação. Dito isso, é essa ferramenta que utilizaremos como exemplo. Porém, ela não é a única existente, o Visual Studio Code também possui um excelente suporte ao Flutter.

Para instalação do Intellij Idea, é necessário baixar o instalador da página oficial, independentemente da plataforma que esteja utilizando. Você pode baixar a última versão do Intellij Idea em sua página oficial. Lembrando que vamos utilizar a versão community.

Após baixar a versão community, o processo de instalação dependerá de cada plataforma.

Instalando o Intellij no Windows

O processo de instalação do Intellij no Windows é bem simples e segue o padrão Avançar > Avançar > Concluir. Ao final deste processo, ele será instalado normalmente e estará funcional.

Instalando o Intellij no Linux

A instalação no Linux é um pouco mais complexa, como podemos ver nos passos abaixo:

1 – Você deverá extrair o arquivo baixado para uma pasta própria para aplicativos em seu sistema operacional. Estas pastas geralmente estão em /usr/local/ (se você quiser disponibilizar o Intellij Idea somente para seu usuário) ou em /opt/ (para usuários compartilhados).

2 – Abra uma instância do Terminal para navegar até a pasta onde o Intellij Idea foi descompactado.

3 – Ao chegar na pasta onde o Intellij Idea foi descompactado, navegue até a pasta /bin e execute o arquivo idea.sh. O Intellij Idea deve ser inicializado.

Opcionalmente, você também pode adicionar a pasta /intellij-idea/bin à variável PATH. Dessa maneira, será necessário navegar sempre até a pasta onde o Android Studio foi descompactado.

Instalando o Intellij no macOS

Para instalar o Intellij Idea no macOS, assim como a maioria dos softwares, o processo é o seguinte:

1 - Abra o arquivo DMG que foi baixado.

2 - Arraste o Intellij Idea para dentro da pasta Applications.

3 - Execute o Intellij Idea.

Ao final desse processo, o Intellij Idea estará instalado e pronto para ser utilizado.

Configurando o emulador

Um emulador Android facilita (e muito) no desenvolvimento de nossos aplicativos, já que é com ele que conseguiremos testar nossos aplicativos e verificar se tudo está funcionando como deveria. Para isso, o Android Studio permite a criação e gerenciamento de emuladores dentro da IDE. Baixe e instale o Android Studio em sua máquina. O processo de instalação é igual ao do Intellij Idea.

Para criar um emulador no Android Studio, devemos seguir os seguintes passos:

1 – Ao iniciar o Android Studio, clicamos em “Configure” e selecionamos a opção AVD Mananger, como mostrado na imagem abaixo:

2 - Ao abrir o AVD manager, a seguinte tela será aberta:

Selecione o botão “+ create virtual device”. Na próxima tela que abrir, avançaremos selecionando o modelo de smartphone Pixel 2. Após a seleção do Pixel 2, pressione o botão avançar novamente.

3 - Selecione uma imagem android para o emulador. No meu caso, selecionei a do Android R por ser a que tenho baixada, mas, caso você não tenha baixado nenhuma ainda, pode escolher alguma e pressionar o botão de “Download”. Após selecionar a imagem do Android R aperte em avançar e depois em finish.

4 - Que tal testarmos se o emulador funciona corretamente? Basta pressionar no botão verde de “play” na tela do gerenciador de dispositivos virtuais. Normalmente demora um pouco para o emulador abrir e carregar o Android pela primeira vez. Nas próximas, ele fará esta ação bem mais rápido.

Após alguns instantes, tcharam ! Se tudo foi configurado corretamente o emulador android será iniciado como demonstra a figura abaixo.

Configurando plugin do Flutter no Intellij Idea

Agora que possuímos todo o ambiente necessário para criar aplicativos com Flutter configurado e funcional, precisamos instalar os plugins do Flutter e Dart no Intellij Idea, pois é através deste plugin que conseguiremos criar aplicativos Flutter. Para instalar e configurar estes plugins, siga os seguintes passos:

1 - Abra o Intellij Idea. 2 - Na aba do lado esquerdo chamada "Plugins", selecione a aba superior "Marketplace". Pesquise primeiro "Dart" e instale. Depois repita o processo pesquisando por "Flutter" e instalando a extensão do Flutter.

3 - Feche o Intellij Idea, vá para a linha de comandos e navegue até uma pasta qualquer da sua máquina, na qual você deseja criar um projeto Flutter. Feito isso, dê ao Flutter o comando flutter create my_app.

4 - Abra a pasta my_app com o Intellij Idea e verifique se o projeto foi reconhecido como um projeto Dart/Flutter e se é possível pressionar o botão de play na parte superior da tela. Caso seja possível, o Flutter vai rodar o seu aplicativo no emulador Android.

Com isso, seu ambiente de desenvolvimento Flutter já está configurado! Eba! :D A partir daqui você pode seguir todos os nossos cursos de Flutter e a Formação de Flutter.

Como aprender mais sobre Flutter

Se você quer evoluir no desenvolvimento mobile, chegou o momento ideal: estão abertas as inscrições para a Imersão Mobile da Alura!

De 14 a 16 de abril, você vai aprender a desenvolver um app de delivery para Android e iOS com Flutter. Serão três aulas 100% práticas, onde cada etapa te leva para um novo nível de conhecimento, te ajudando a consolidar habilidades essenciais para sua carreira.

Aprenda com especialistas do mercado, encare desafios reais e crie um projeto prático, colocando a mão na massa desde o primeiro dia. Evento 100% gratuito! Inscreva-se agora neste link.

Resumo do que aprendemos

• Aprendemos a instalar o SDK do Flutter;
• Windows, no caso utilizamos o 10 para este exercício
• Linux (Synaptics, Ubuntu ou Debian)
• macOS
• Vimos como instalar o Intellij Idea para utilizá-lo como IDE de desenvolvimento.
• Aprendemos a instalar os plugins do Dart e do Flutter no Intellij Idea para que ele identifique o código criado em Dart e nos dê a opção de executar este código no emulador Android que criamos.
• Descobrimos como configurar um emulador Android Pixel 2.

Referências

• IntelliJ IDEA para quem está começando
• Formação de Flutter
• Android Studio
• Intellij Idea
• Flutter