Iniciando no Flutter: Configurando o ambiente de desenvolvimento

Instalando e Configurando o Flutter no Windows

--

Olá pessoal, em meio a tantos tutoriais disponíveis na WEB, eu como iniciante neste novo mundo tive muitas dificuldades para configurar o ambiente e iniciar no desenvolvimento com o flutter de forma prática e eficiente. Apanhei muito mais consegui chegar a um resultado favorável, porém para isto tive que percorrer vários fóruns, recorrer a vários vídeos no youtube, ler e reler milhares de tutoriais sem contar as inúmeras dicas e ajudas recebidas nos grupos do TELEGRAM. (Inclusive deixo aqui a dica do grupo FLUTTERANDO que é fantástico).

Quando estamos iniciando em uma nova jornada de conhecimento e buscando aprender coisas novas não é difícil nos depararmos com tantos conceitos e opiniões diferentes. São vários vídeos, fóruns, tutoriais que a gente fica meio perdido. Uns falam que é bom fazer tudo na mão a moda “OLD SCHOOL”, outros indicam geradores de código, gerenciadores de pacotes… é tanto conteúdo que até assusta… Bom vou deixar aqui um pouco da minha experiência e o que funcionou comigo.

Para iniciar no flutter primeiro temos que entender que:

Flutter é um SDK de código aberto criado pelo Google para o desenvolvimento de aplicativos para Android, iOS, Desktop ou Web. Atualmente o flutter tem tido grande foco para o desenvolvimento MOBILE, mais já temos muitos membros da comunidade se aventurando no flutter WEB e no flutter Desktop.

A linguagem utilizada no desenvolvimento é o DART que foi uma linguagem de script inicialmente projetada pela Google para substituir o javascript no desenvolvimento WEB mais não teve muito sucesso devido a grande comunidade do javascript. Mesmo não sendo muito felizes nesta sugestão esta linguagem foi amadurecendo e hoje com a entrada do flutter ela tem atraído muitos desenvolvedores por ser considerada uma linguagem multi-paradigma, além de apresentar fortes estruturas típicas de linguagens orientadas a objeto.

Bom passando esta parte chata do conceito

Lembrando que esta parte conceitual muitas vezes nos tiram de várias enrascadas no futuro, principalmente quando paramos de pensar como programadores apenas e passamos a pensar em entender como que as coisas funcionam.

Vamos ao que interessa.

Para iniciar no flutter temos que seguir alguns passos:

  1. Instalar o Android Studio
  2. Instalar e configurar o Dart SDK
  3. Instalar e configurar o Flutter SDK
  4. Configurar as Variáveis de Ambiente
  5. Instalar o Visual Studio CODE (Opcional, porem vale muito a pena)

Pré-requisitos

Para instalar e executar o Flutter, seu ambiente de desenvolvimento deve atender a esses requisitos mínimos:

Sistema Operacional:

  • Windows 7 SP1 ou versões mais atuais (64-bit)

Espaço em Disco:

  • 400 MB (Somente para o Flutter sem contar as IDE’s).

Ferramentas Obrigatórias:

  • Android Studio: Segundo a própria documentação oficial do Flutter, ele depende de uma instalação completa do Android Studio para fornecer suas dependências da plataforma Android. No entanto, você pode escrever seus aplicativos Flutter em vários editores como por exemplo o Visual Studio CODE do qual falaremos mais adiante.
  • Utilitários de linha de comando: No windows temos o CMD que é o PROMPT de comando nativo nativo e o Windows PowerShell presente nas versões mais atuais do Windows 10.
  • Git: É muito interessante também ter instalado o Git e garantir que o mesmo esteja configurado e habilitado a fornecer comandos para execução no PROMPT de comando.

Passo 1: Instalando o Android Studio

Faça o download do pacote de instalação oficial em:

Após o download inicie a instalação padrão, selecione seu local de instalação e prossiga até o final.

Passo a passo resumido da instalação do Android Studio

A instalação embora muito importante para que todos os recursos funcionem da forma correta como descrito na documentação oficial é bem simples, prática e sem muitos desafios. Então vou partir para o que interessa, “a configuração do flutter”, mais deixarei o link com um passo a passo caso haja dúvidas.

Passo 2: Instalando o Flutter

O flutter pode ser instalado em praticamente em todas as plataformas que nós desenvolvedores estamos acostumados ou seja pode ser utilizado tanto no Windows, MACOS e Linux.

Lista de OS’s disponíveis para a instalação do Flutter SDK

Para instalar o flutter vamos ao site oficial da ferramento no link:

Neste tutorial estarei abordando a instalação no ambiente windows que é o ambiente que eu tenho no momento porém futuramente tentarei evoluir adicionando também as instalações no Linux e no MACOS.

Vamos lá! Feito o download vamos descompactar a Flutter SDK em uma pasta de nossa preferência no meu caso eu utilizo: “C:\flutter”

Eu utilizo sempre pastas simples sem muitos níveis para facilitar a manutenção e até mesmo manter uma organização do meu ambiente mais isto vei do gosto de cada um. A própria documentação oriente você a utilizar [c:\src\flutter] ou até mesmo [c:\Program Files\flutter] mais como falei anteriormente cada um ter a sua forma de se organizar então faça da melhor forma para seu entendimento.

Feito o download e após descompactar tudo nos locais corretos devemos fazer a configuração das variáveis de ambiente no windows de forma a fazer com que o utilitário de linha de comando tenha acesso as ferramentas do flutter, para isto vamos seguir um pequeno roteiro:

Navegue até o painel de controle:

Menu Iniciar do Windows — Seleção do Painel de Controle

Vá na opção sistema:

Painel de Controle do Windows

Configurações avançadas do sistema:

Painel de Propriedades do Sistema do Windows

Variáveis de ambiente:

Painel de propriedades do sistema do Windows

Vá até a linha do PATH e clique em editar:

Editor de variáveis de ambiente do Windows

Agora adicione as pastas necessárias para que o seu utilitário de terminal tenha acesso as comandos da linguagem:

Configuração das variáveis de ambiente

Os caminhos vão variar devido as pastas de instalação mais são todos bem parecidos com:

  • [Caminho para sua instalação]\.pub-cache\bin
  • [Caminho para sua instalação]\bin
  • [Caminho para sua instalação]\bin\cache\dart-sdk\bin
  • C:\Program Files\Android\Android Studio\jre\bin

Desta forma garantimos que nosso utilitário de terminal tenha acesso aos recursos da ferramenta e que possamos executar os comandos necessários para o desenvolvimento.

Após esta etapa em algumas máquinas pode ser necessário reiniciar o sistema, em outras basta você fechar e abrir os utilitários de terminal que estará funcionando.

Para verificar se esta tudo “OK”, vamos rodar um comandinho simples no terminal para garantir que esta tudo funcionando:

Vá no seu teclado e pressione as teclas “WINDOWS+ R”

Teclas de atalho para o utilitário “Executar” do windows

Na janelinha de comando digite o nome do utilitário de terminal que você deseja utilizar, hoje temos a opção do CMD ou do powershell.

Utilitário “Executar” do windows

No PROMPT do utilitário de terminal digite o comando “flutter doctor”.

Prompt de comando PowerShell do Windows 10 — Comando Flutter Doctor

Se tudo correu bem até ai, você receberá a informação da imagem acima, feito isto podemos partir para um outro comando onde verificaremos a versão do flutter e a versão do dart atualmente instalados:

Comandos “flutter — version” e “dart — version”:

Obs: — na verdade são 2 caracteres “-” seguidos, aqui ele deixa uma barrinha o que pode confundir algumas pessoas.

Feito isto teremos:

No resultado acima, temos a informação de que a versão atual do Dart SDK presente no nosso ambiente é a 2.7.0 e que a versão do Flutter SDK é a 1.12.13+hotfix5.

Pronto, estamos com o flutter instalado, mais não acaba por ai… mesmo seguindo todos os passos ainda pode ser necessário aceitar alguns termos de responsabilidade coisa simples de se fazer no próprio PROMPT de comando com o comando “flutter doctor — android-licenses” caso você tenha o seguinte alerta:

Erro de licenses do Flutter SDK

Agora vamos adicionar alguns Plugins e extensões ao nosso bom e velho Android Studio para que este seja capaz de trabalhar com o flutter e teremos nosso ambiente praticamente todo configurado.

Abra o Android Studio e navegue até a opção Configurações > Plugins:

Menu de configurações do Android Studio

Instale os Plugins Dart e Flutter e quaisquer outros Plugins e temas de seu interesse e pronto! pode começar a programar.

Tela de seleção de Plugins do Android Studio

Passo 3 (Adicional): Instalando o Visual Studio CODE

Para instalar o Visual Studio CODE basta ir a página oficial da ferramenta com o link abaixo e baixar a versão mais atual do mesmo e instala-lo:

Prossiga com a instalação assim como feito no Android Studio e conclua a instalação.

Tela de instalação do Visual Studio CODE

Após finalizar abra o Visual Studio CODE e adicione algumas extensões para dar acesso ao desenvolvimento com o flutter:

Para isto vá em “File > Preference > Extensions” e procure as extensões Dart e Flutter e pronto… abra a pasta do projeto no Visual Studio CODE, tecle F5 e seu código irá compilar de forma correta.

--

--