AlbertoVentura.Dev

Instalando o Flutter no VS Code

Uma vez que já instalamos o Flutter no nosso computador e configuramos o Android Studio, poderemos também instalar no VS Code

Para isso abra o VS Code, vá no ícone lateral para abrir a aba de Extensões (Ctrl+Shift+X) pesquise por Flutter (ele também irá instalar o Dart! Caso não instale, é só instalar manualmente).

Agora para que o Terminal reconheça o Flutter, precisamos adicionar o comando nas variáveis de ambiente do Windows.

Variáveis de ambiente

Abra o iniciar (tecla windows do teclado) e digite: variáveis, com isso irá aparecer a opção: Editar as variáveis de ambiente do sistema, aperte enter.

Na tela que abriu, próximo a região inferior direita, tem um botão chamado de “Variáveis de Ambiente”, clique.

Na região superior da tela que abriu, na seção Variáveis de usuário para seu-nome-de-usuário, clique no “path” e depois “Editar”

Abrirá uma tela, nela, clique em procurar, e assim como fizemos no post anterior, vá até a pasta “C:\src\flutter\bin” e clique em “Ok”.

Testando o terminal

Abra o Terminal do VS Code (Ctrl+’) e digite flutter doctor (tudo em minúsculo!) e caso você tenha configurado tudo corretamente, será exibido tudo corretamente.

Criando um projeto teste

No terminal do VS Code (Ctrl+’) digite o seguinte comando flutter create nome_do_projeto e aperte enter.

Nota: o projeto será criado na pasta que foi executado o comando, por padrão em ‘C:\Users\NomeDoUsuário’

Após a criação do projeto, entre na pasta do mesmo com o cd nome_do_projeto e digite o comando code . para fazer com que o VS Code abra a pasta como um projeto. (você pode fechar a anterior)

Testando o emulador android no VS Code

Caso você não tenha feito as configurações de Emulador Android no Android Studio, sugiro que você consulte rapidinho o que é preciso neste post antes de testar o emulador no VS Code.

Vá na região de Run and Debug (Ctrl+Shift+D) e clique no botão Run and Debug, será exibido algumas opções para Emular seu app, desde criar um emulador básico quanto usar o emulador que foi criado pelo Android Studio no post passado, selecione o emulador que criamos anteriormente e espere executar.

Nota: comigo não foi possível abrir o app no emulador durante a primeira vez devido algumas configurações do próprio VS Code, depois da falha, executei novamente o Run and Debug e o app abriu normalmente.

Nota²: Caso na tela do Run and Debug não funcione, certifique-se de abrir o arquivo main.dart ( NomeDoSeuProjeto/lib/main.dart ), depois clique no botão de Start Debugging que fica no canto superior direito, logo abaixo dos botões minimizar, expandir, fechar.

Agora seu VS Code está preparado para trabalhar com Flutter!

Leave a Comment

Your email address will not be published. Required fields are marked *