Artigos de Tecnologia e Negócios > Programação

Como integrar/rodar o Flutter no VsCode

Mario Souto
Mario Souto

Trabalhar com Flutter rodando ele pelo terminal pode ser prático, mas ter ele integradinho na sua ferramenta de desenvolvimento favorita pode ser muito mais produtivo, e no meu caso com o VsCode eu realmente curto bastante! Se baseando nisso hoje vou ensinar como integrar o Flutter no VsCode.

Pré requisitos

Para aproveitar melhor esse post, eu recomendo que você faça ele após ter um projetinho Flutter criado, se você quiser ver como começar da uma olhada nesse artigo ou se preferir em vídeo assiste aqui

Lembrando que na plataforma da Alura, esses e vários outros conteúdos mais extra cursos de diversas tecnologias estão disponíveis através do Alura+ dentro da plataforma da alura

Você vai precisar ter criado pelo menos um emulador Android e ter feito o processo de setup do Flutter em sua máquina

Mão na massa

Eu usarei no exemplo esse projetinho de instagram fake, mas fique a vontade pra criar o seu projeto para acompanhar o post. Com o VsCode aberto, baixe a extensão do Flutter, que irá fazer a integração dos comandos da CLI com a estrutura do nosso editor

Após terminar a instalação, va na aba de Debug do VSCode e clique na setinha verde como na foto abaixo

Após clicar irá sugir uma opção perguntando qual ambiente você está, basta clicar que está em um projeto Dart & Flutter

Na sequência, irá vir uma pergunta sobre qual emulador você deseja utilizar, em meu caso vou selecionar um emulador Android que deixei previamente criado.

Feito isso, irá surgir um emulador Android em sua máquina em processo de loading...

É importante dizer que na data de criação desse post acontece algum bug que irá resultar nesse erro no Debug Console do VSCode

Para resolver, basta clicar novamente no botão de play da parte de Debug na sidebar a esquerda do editor e ver seu aplicativo abrindo

Como utilizar Breakpoints?

O VSCode tem suporte nativo para breeak points, sempre que quiser debugar algo no flutter basta clicar antes do número da linha desejada e executar a ação dentro do app:

Na aba debug do VsCode, você pode também acessar as variáveis que estão no momento do debug e fazer testes em cima:

Como subir dois emuladores?

Apertando Ctrl (Command no mac) + Shift + P é possível visualizar todos os comandos Flutter disponíveis dentro do VsCode

Para subir dois emulador basta selecionar o comando launch emulator e escolher o que falta pra você.

O VSCode atualmente não suporta sincronizar dois emuladores, portanto caso você queira debugar vai precisar ficar alternando entre os emuladores através da opção ">Flutter Select Device" desligando e ligando o projeto.

O que eu faço no dia a dia para ser mais produtivo é escolheru ma plataforma, ex o Android e deixar a outra rodando via uma aba do terminal 100% separado do VSCode, o único foco é garantir que o layout está saindo certinho nas duas plataformas.

Para isso, após ter 2 emuladores abertos, rode o comando flutter run e na sequência pede o ID como na imagem abaixo do emulador que você quer abrir

Após copiar o ID, basta rodar o comando novamente mas com esse formato flutter run -d IDDOEMULADOR

Por hoje é isso, vejo você no próximo artigo, Espero que tenha gostado, em breve trarei mais dicas, não deixe de me seguir nas minhas redes sociais e acompanhar meus outros artigos em meu site pessoal https://mariosouto.com.

Leia também:

Artigos de Tecnologia e Negócios > Programação

Cursos profissionais de Programação é na Alura, comece agora!

  • 1047 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1047 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1047 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1047 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Procurando planos para empresas?
Acesso por 1 ano
Estude 24h/dia onde e quando quiser
Novos cursos toda semana