Flutter - Como configurar o ambiente de desenvolvimento

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