Fale com a gente no WhatsApp Fale com a gente no WhatsApp
Fale com a gente no WhatsApp

Contagem Regressiva 2024

A ÚLTIMA OFERTA DO ANO

Desenvolvimento Mobile Flutter

Configurando ambiente de desenvolvimento Flutter

Veja neste artigo como configurar o ambiente de desenvolvimento Flutter.

há 4 anos 7 meses

Formação Desenvolvedor Dart Flutter
Conheça a formação em detalhes

Como vimos aqui no blog, o Flutter é um framework multiplataforma para desenvolvimento de aplicativos Android e iOS utilizando uma mesma base de código. Por ser multiplataforma, o Flutter permite desenvolvermos apps em qualquer sistema operacional (Windows, Linux ou macOS), porém, para isso, precisamos configurar seu ambiente de desenvolvimento, como veremos neste artigo.

Configurando o ambiente

Para desenvolvermos com o Flutter, precisaremos dos seguintes itens instalados em nossa máquina:

  • Flutter SDK;
  • Android Studio e/ou um editor de texto com plug-ins de suporte ao Flutter (vamos utilizar o Android Studio como exemplo);
  • Um emulador ou dispositivo para testarmos a aplicação.
  • Configurar o plugin do Flutter no Android Studio (ou outro editor de textos com suporte ao Flutter).

Instalação do Flutter SDK

A instalação do Flutter varia em cada sistema operacional, como veremos abaixo:

Instalação no Windows:

A instalação no Windows é bem simples, necessitando apenas do Git e o próprio SDK do Flutter. Os passos para realizar esta instalação podem ser vistos abaixo:

1 - O Flutter é dependente do Git para funcionar. Por isso, é necessário que o Git esteja instalado na máquina. Para isso, basta baixar o cliente do Git para Windows em sua página oficial. A instalação é no estilo Next > Next > Finish. Após o download do instalador do Git para Windows for concluído, basta clicar no instalador para que o processo de instalação seja iniciado;

2 - Certifique-se de que você esteja executando o Windows 7 SP1 64 bits ou superior;

3 - Baixe o arquivo ZIP da última versão do Flutter. O arquivo mais recente pode ser encontrado na página oficial do Flutter, dentro da seção “Get the Flutter SDK”;

4 - Extraia o arquivo ZIP com o Flutter SDK para uma pasta onde não seja necessária a elevação de privilégios. A documentação do Flutter recomenda que o SDK seja extraído para C:\src\Flutter;

5 - Dentro da pasta onde o Flutter SDK foi instalado, localize o arquivo flutter_console.bat e dê um duplo clique sob ele. Dessa maneira, o console do Flutter será inicializado e nós já poderemos rodar comandos para o Flutter;

Além disso, se quisermos colocar o Flutter CLI diretamente em nosso PATH (evitando termos que sempre abrir o Flutter Console de maneira manual), os seguintes passos são necessários:

  • Vá em Painel de Controle > Contas de usuário > Contas de usuário > Variáveis de 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 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 PowerShell e digite o comando flutter. O help do Flutter deve ser exibido.

Com isso, o SDK do Flutter estará instalado e funcionando normalmente :)

Flutter - Fundamentos
Curso Flutter - Fundamentos
Conhecer o curso

Instalação no Linux:

A instalação no Linux também é relativamente simples, como podemos ver nos passos abaixo:

1 - O Flutter é dependente do Git para funcionar. Para isso, instale o Git através de seu gerenciador de pacotes (se você utiliza o Synaptics – especialmente Ubuntu ou Debian, você pode rodar o comando apt*-get install git-all*);

2 - Verifique se sua distribuição Linux é 64 bits. O Flutter só funciona em sistemas operacionais 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 “development” 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;

6 - Rode o comando flutter no terminal. O help do Flutter CLI deve ser exibido: Comando Flutter executado no terminal do macOS

Os passos acima adicionam o Flutter ao PATH de maneira temporária. Se quiser adicionar o Flutter permanentemente, siga os passos da própria documentação.

Seguido todos esses passos, nosso ambiente linux também já está funcional :D.

Instalação no macOS

O processo no macOS é bem similar ao do Linux, como podemos ver abaixo:

1 - O Flutter é dependente do Git para funcionar. Para instalar o Git no MacOS, você pode realizar a instalação através do Homebrew (com o comando brew install git) ou através de um instalador tradicional do GIT que pode ser obtido na página da sourceforge;

2 - Baixe a última versão do Flutter SDK para o MacOS. O arquivo compactado com a última versão pode ser obtido em sua página oficial, na seção “Get the Flutter SDK”;

3 - 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 “development” na raíz do seu usuário;

4 - 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;

5 - Em uma instância do Terminal, rode o comando flutter. O help do Flutter CLI deve ser exibido em seguida:

Comando Flutter executado no terminal do macOS

Os passos acima adicionam o Flutter ao PATH de maneira temporária. Se quiser adicionar o Flutter permanentemente, siga os passos da própria documentação.

Instalação do Android Studio

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 Android Studio possui um suporte incrível para construir aplicações Flutter, desde criar um projeto 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, porém veremos sua configuração em um outro artigo :)

Para instalação do Android Studio, é necessário baixar o instalador da página oficial, independente da plataforma que esteja utilizando. Você pode baixar a última versão do Android Studio em sua página oficial. Após acessar este link, basta clicar no botão “Download Android Studio” e aceitar os termos de licenciamento para que o download seja iniciado.

Após a conclusão do Download, o processo de instalação dependerá de sua plataforma.

Instalação do Android Studio no Windows

O processo de instalação do Android Studio no Windows é bem simples e segue o padrão Next > Next > Finish. Ao final deste processo, ele será instalado normalmente e estará funcional.

Instalação do Android Studio 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 Android Studio 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 Android Studio foi descompactado;

3 - Ao chegar na pasta onde o Android Studio foi descompactado, navegue até a pasta /bin e execute o arquivo studio.sh. O Android Studio deve ser inicializado.

Opcionalmente, você também pode adicionar a pasta /android-studio/bin à variável PATH. Dessa maneira, você não precisará navegar sempre até a pasta onde o Android Studio foi descompactado.

Instalação do Android Studio no macOS

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

1 - Abra o arquivo DMG que foi baixado;

2 - Arraste o Android Studio para dentro da pasta Applications;

3 - Execute o Android Studio.

Ao final destes processos, o Android Studio estará instalado e pronto para ser utilizado. O último passo, então, é configurar o emulador no Android Studio para que possamos testar nossas aplicações.

Criando emulador no Android Studio

Como dito acima, um emulador facilita (e muito) no desenvolvimento de nossos aplicativos, já que é com ele que conseguiremos testar nosso app e verificar se tudo está funcionando como deveria. Para isso, o Android Studio permite a criação e gerenciamento de emuladores dentro da IDE.

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:

Abrindo o AVD Manager no Android Studio 2 - Ao fazer isso, a seguinte tela será aberta:

Exibindo emuladores existentes no Android Studio 3 - O próximo passo é clicar na opção CREATE VIRTUAL DEVICE, selecionar o dispositivo que queira utilizar como emulador

Selecionando dispositivo para emular no Android Studio Selecionar a versão do Android a ser utilizada (no meu computador, estou utilizando a versão do Android Q):

Selecionando versão do Android a ser utilizado no emulador E, por fim, nomear o emulador para finalizar a criação:

Emulador criado no Android Studio

Configurando plugin do Flutter no Android Studio

Agora que já possuímos todo nosso ambiente configurado e funcional, precisamos instalar o plugin do Flutter ao Android Studio, é com ele que a IDE permitirá criar, gerenciar e executar apps Flutter. Sendo assim, no Android Studio é feito através de um plugin. Para instalar e configurar este plugin, siga os seguintes passos:

1 - Abra o Android Studio;

2 - Abra o Gerenciador de Plugins em File > Settings > Plugins (no caso do Windows ou Linux) ou Preferences > Plugins (no caso do MacOS);

3 - Clique em “Browse Repositories…”, selecione o plugin do Flutter e clique em “Install”;

4 - O Android Studio irá pedir a instalação do plugin do Dart também. Confirme a instalação deste plugin adicional;

5 - Aceite a reinicialização do Android Studio após a instalação do plugin.

Com isso, seu ambiente de desenvolvimento Flutter já está configurado e estamos aptos a desenvolvermos nosso primeiro projeto, como veremos no próximo artigo desta trilha. Até lá.

Autor(a) do artigo

Fagner Pinheiro
Fagner Pinheiro

Professor na TreinaWeb e graduado em Sistemas de Informação pelo Instituto Federal da Bahia. Apaixonado por desenvolvimento web, desktop e mobile desde os 12 anos de idade. Já utilizou todos os sistemas operacionais possíveis, mas hoje se contenta com o OSX instalado em seu desktop. Quando não está trabalhando, é IGL e Awper do time de CS:GO da Treinaweb. Até passou em uma peneira do Cruzeiro, mas preferiu estudar Python.

Todos os artigos

Artigos relacionados Ver todos