Blog Formação DEV

Iniciando um projeto Flutter pelo VSCode

Neste artigo irá ser apresentado como fazer para iniciar seu emulador a partir do VSCode e como buildar seu projeto a partir dele também, sem precisar utilizar outros programas como o Android Studio e nem linha de comando no terminal.
Iniciando um projeto Flutter pelo VSCode
Texto de: Lucas Galdino

Pré-requisitos

Antes de mais nada é necessário que você já tenha emuladores instalados e funcionando na sua máquina. Para instalar e configurar um emulador Android você pode seguir as instruções do site oficial do Android Studio. Já no caso de um emulador de iOS, basta instalar o Xcode no seu Mac que o emulador estará disponível. Lembrando, para emular iOS é necessário que você esteja em uma máquina com MacOS, não é possível fazer isso a partir de Windows ou Linux. Também é importante que você tenha instalado no seu VSCode as extensões oficiais do Dart e do Flutter.

Configurando um Projeto

De início prepararemos um projeto básico em Flutter para poder mostrar as opções que teremos no Visual Studio Code. Você pode utilizar um projeto já criado ou criar um novo com o comando no terminal:

flutter create nomeDoProjeto 

Agora basta abrir o projeto na IDE e iremos para a seguinte tela:

Esse é um projeto recém-criado utilizando o Flutter e na minha máquina tenho um emulador de iOS e um de Android configurados.

Iniciando o projeto

Temos algumas formas diferentes de fazer isso dentro do VSCode. Primeiramente mostrarei como fazer para escolher o local aonde o projeto será iniciado, ou seja, Android ou iOS. Para isso é bem simples, basta clicar naquele botão que a seta está apontando.

Ao clicar irá aparecer um menu com algumas opções, cada uma delas representa uma plataforma para iniciar o seu projeto.

Agora vem um dos ótimos recursos do VSCode, ao clicar em uma dessas opções o emulador em questão será inicializado no exato mesmo momento. Isso é bem útil e evita que você precise abrir qualquer outro programa para poder executar o emulador e evita também o uso do terminal para o mesmo procedimento.

Pronto, uma vez que temos a plataforma selecionada e o emulador aberto, temos duas formas de iniciar o projeto. Uma delas é simples e rápida, basta apertar o atalho CTRL+F5 no Windows/Linux ou CONTROL+Fn+F5 no Mac (caso suas teclas F1 a F12 funcionem sem o uso da tecla FN, podem remover ela do atalho). E pronto, seu projeto será inicializado diretamente.

A outra forma é um pouco mais complexa, porém totalmente funcional também. Nela é necessário que você deixe em evidência no VSCode o seu arquivo main.dart. Com ele aberto clique no seguinte botão:

Ao clicar nesse botão de Play, irão aparecer as seguintes opções:

Basta clicar na opção Run Without Debugging e pronto, seu projeto será inicializado da mesma forma.

Conclusão

Então é isso galera, mostrei como iniciar um projeto diretamente pelo VSCode, sem a necessidade de comandos no terminal ou uso de outros softwares para iniciar emuladores. Espero ter ajudado de alguma forma, bons estudos!

Sobre o autor
Cod3r

Cod3r

Com mais de 400 mil alunos, a Cod3r é uma das principais escolas de tecnologia do País. Um de seus produtos mais importantes é a Formação DEV, com objetivo de preparar os profissionais para o mercado.

Ótimo! Inscreveu-se com sucesso.

Bem-vindo de volta! Registou-se com sucesso.

Assinou com sucesso o Blog Formação DEV .

Sucesso! Verifique o seu e-mail para obter o link mágico para se inscrever.

As suas informações de pagamento foram atualizadas.

Seu pagamento não foi atualizado.