• LOGIN
  • Nenhum produto no carrinho.

Como integrar/rodar o Flutter no VsCode

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 vamos fazer um post/dica bem rápido ensinando 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 post 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

74M4JiCV z5X7VIuWQgOOy2kAPcQ7T8boAl71AHYD32cBK7RUHUDZSLk9TEOvaDIRURlDMLZ5nCSoa oRnqjMi36UikEl2NvJJV7WW3KEnn NSQBcQDGgSDJret8gzFjGZ3loz7H - Como integrar/rodar o Flutter no VsCode

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

1DoR83uP KKza3H9y0cRja0SIIPPSW bbdgimaWQEkbsTvZKY4Q8f9c5sE uJHKnnk55aoG68AWEIiperTjmuhQHFxD CyKrYFThexYcSljQxVk6xYz9FcwfRE NRVBz mZIxAhE - Como integrar/rodar o Flutter no VsCode

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

pFSEhLEnqjUt0syeqZ2i8d4N3fQXy3ZVGPyRPCgd6bQyEft9p6AdQfJzgsgq bXO4Huv5JzaqO3O9T1CVX4hbOf4dubvCD VjbE6 xlnmCUjJJkWhlU1RpruzQfuQ4wM1y zfZQ  - Como integrar/rodar o Flutter no VsCode

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…

aPgnomzLwRMPC8YWp0RfWoP82QSH1WaBrtUHr5h6MGfQVBCx1nD8ILTfezOmL0pcbEIQa5wmb3LYP7lOMVKs s0uwAfwJ VGScT1q31Bckp4m2XzIhW kgG14ygAzK40TkQ3i5Y7 - Como integrar/rodar o Flutter no VsCode

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

1VVE jM9Gr 0yNSJkIVI8vUGKF5GI2XALAQx KWdkwqcmL bwQZc0CP6Lr5kRyVwuwxcGonBENXgv MTaESfzbSyvlY4TYF6yJ zDdvbHnt uExHaoexWX4cVrEcFkRSDRtSpgXQ - Como integrar/rodar o Flutter no 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

RplAZEoIwMBiovmLLo7iCG35ICdbEeoscyPeM6yK6IAJqaYaWG6DfOOhQGYpSCVyriVDM TgXrTrG feImYW34FCpfo9w0VHTZfTZevUGRnehZq3n7vqdVf5WnqDdHhl4fmGEXRf - Como integrar/rodar o Flutter no VsCode

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:

vAEcID p3UHGcJSx8B4yzDHo5KW YbW82Gto6UzzFd8EkHNX1JLDbVy6 s2RjIatLhANI bilb3mnAr7Y8VGg2PehaIavVCStMZW 144JINbL aBgwD6nKZSeZVf8I2 rm0IXdZP - Como integrar/rodar o Flutter no VsCode

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:

9Hr1KjIBx3QJteMwPSorBi6uCNvex8VzfCqRtuTIQ0QAp7WpuisVlrLssTfYYWk4y7IlS2fp8Fzc2YKU6Uy130j3NFNmcpOHEWEMIyruPNIN99sN eaKeA6BWIrVTx 37wCmkskZ - Como integrar/rodar o Flutter no VsCode

Como subir dois emuladores?

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

zuXM0KPkaHqHPl5nxv8dfBsLKYTBfuWfpTF iNzkHjJNU1lW2f3S 9eB l Nai5Mu1 0Vz1R00Z6aQKBET8HguWCDu0FbJz zB593yKbs508LtzIzYgY1LjDHo5MKfajeItG8zUI - Como integrar/rodar o Flutter no 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

dR7 GjM1dyc9u LJzzUrzrECzn7VMsMRrbb2DthidDi8EUAgf1IT4qjmABYOeW9h3QFson0rj9IqezKAMMmxwfMCo  PIu5G24JIYMCx7wj7VT0GYeXB2hchgvKxu3QOSAtEVVry - Como integrar/rodar o Flutter no VsCode

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

xe e3UMRphVwJpiUCxv e yhwbsvGqpa0SvN8jig5aQVzdzLVYraz Wn5deMsnZMFD737P7Xm5E0F52VbRNzZU Xwa4mSifY7KBWTziQRzPyZ99Bbs9TJYRBYE ArS tMhNUjcUy - Como integrar/rodar o Flutter no VsCode

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

The post Como integrar/rodar o Flutter no VsCode appeared first on Blog da Alura: desenvolvimento, design e muita tecnologia.

FONTE: https://blog.alura.com.br/como-integrar-rodar-o-flutter-no-vscode/

Powered by WPeMatico

17 de maio de 2019

Sobre nós

A 4Java é especializada em treinamentos da área de T.I, dando cursos tanto presencialmente quanto online, também trabalhamos com desenvolvimento de sistemas.

Contato

Email: [email protected]
Endereço:
Rua Goes Calmon, Nº 136, Galeria São Bento, Sala 110b 1º Andar, Centro, Vitória da Conquista / BA
Horário de atendimento: Segunda a Sexta das 08:30 às 12:00 e das 14:00 às 17:30
Contato
top
4Java © Todos os Direitos Reservados
X