Flutter & VSCode — desenvolvimento com rapidez e eficiência

Fala pessoal beleza? Espero que sim!
Quanto tempo né? Sem novidades, alias, tenho algumas… Estou estudando Flutter a algum tempo e estou simplesmente apaixonado pelo framework e pela linguagem Dart! Já estou cogitando trabalhar com ele e estou aprendendo muito todos os dias! Então fiquem ligados no blog porque vou postar bastante coisa sobre Flutter/Dart beleza? Bom bora pro post então!

Reuni algumas dicas de como ser mais produtivo com o Flutter no VSCode e como resultado tive este post, espero de coração que gostem e que sirva para aumentar a produtividade de vocês!

Não vou abordar instalação nem configuração do sdk e etc pois ja existem muitos tutoriais no Youtube, deem uma googlada.

Iniciando projeto com o debug

Você pode usar o Ctrl+Shift+P para mostrar uma lista com os comandos usados ​​recentemente ou também pesquisar comandos. Por ele vou iniciar um novo projeto flutter:

Quando iniciado um novo projeto Flutter no VSCode (tendo as extensões do Flutter e Dart instaladas), podemos clicar no icone DEBUG no menu a esquerda:

Acima e a esquerda do menu podemos notar que um botão de play apareceu, como o botão verde abaixo:

Quando clicado, iniciamos o projeto direto no emulador e temos o reload e debug automáticos em nossa aplicação, facilitando bastante o desenvolvimento e o debug da mesma.

Estes são alguns dos atalhos de debug que serão úteis:

• F5 - Iniciar debug
• Ctrl+ F5- Iniciar sem debug
• Shift+ F5- Parar debug
• Ctrl+ Shift+ F5(macOS: Cmd+ Shift+ F5) - Reinicia o debug

Pressionando o Ctrl+Shift+P e digitando dev (ou pressionando Ctrl+Alt+D), você pode iniciar o Dart devtools em seu navegador, onde você encontra mais detalhes da aplicação, tendo assim um debug mais completo e visual.

Podemos fazer um post passando maiores detalhes de cada feature do devtools se vocês pedirem bele?

Extensões e configurações primárias

Sugiro que de cara você habilite nas configurações do VSCode a opção “ dart.previewFlutterUiGuides”, mudando para true, isso vai fazer com que apareçam algumas linhas no código que ligam pai a filho, facilita bastante quando você quer descobrir de onde vem um componente, no flutter isso as vezes se torna confuso dependendo do tamanho do seu código.

Outra coisa que a extensão do Dart permite fazer é executar várias ações úteis através de um menu pressionando Ctrl+.. Basicamente adiciona suporte ao Dart, destaque de sintaxe e conclusão de código, veja:

Atalhos

Vou ensinar vocês a consultar o atalho para obter todos os atalhos.

A lista de atalhos é muito grande por isso não vou conseguir explicar todos pra vocês, porém nesta lista você pode consultar, modificar, adicionar novos atalhos e etc. Você pode encontrar a lista de atalhos de teclado padrão e também procurar atalhos específicos usando CTRL+K+S, e digitando por exemplo “dart” veja:

Você também pode imprimir todos os atalhos de teclado padrão do VSCode aqui , obter a lista oficial de atalhos personalizados do Dart aqui e a documentação da extensão aqui.

Formatação

Como podemos formatar nosso código para deixa-lo padronizado entre equipes com o Flutter e Dart? Muito simples, temos um atalho maroto que faz isso (Alt+Shift+F), ou podemos usar o Prettier que pelas minhas pesquisas também funcionou com o auto-save, tenho um tutorial de como configurar o Prettier no VSCode aqui.

Sempre coloque vírgulas à direita para que a formatação com o atalho funcione corretamente.

Pubspec Assist

Uma das principais coisas que percebi logo de cara que me atrapalharia quando comecei a brincar com o flutter foi importar e manter os pacotes atualizados.

Toda vez que eu precisava atualizar um pacote, tinha que ir la no pub.dev, procurar o pacote, ir para a guia de instalação e copiar/colar uma linha de código. Como mencionei antes, não podemos perder tempo com essas coisas.

É aqui que a extensão chamada Pubspec Assist entra em ação. Tudo o que você precisa fazer é abrir o arquivo pubspec.yaml, abrir a aba de comandos, selecionar “pubspec assist: add dependency” e digitar o nome da dependência que você quer usar. Isso vai adicionar a linha automaticamente ao seu arquivo pubspec.yaml, atualizado para a versão mais recente, e tudo isso sem mexer no código. Veja:

Bracket Pair Colorizer 2

No Flutter, os colchetes parecem ser infinitos, tem uma hora que é normal nos perdermos no próprio código e não conseguir identificar os pares de colchetes facilmente. Não precisa procurar mais nada, temos o Bracket Pair Colorizer 2 para melhorar a legibilidade do código:

Bloc Extension for VSCode

Esta extensão faz com que o VSCode suporte a biblioteca Bloc e fornece ferramentas para criar Blocs efetivamente para aplicativos em Flutter e AngularDart .

Achei ela bem interessante pra quem trabalha com o Bloc, pois passamos a ter vários atalhos para gerar a arquitetura de um jeito fácil e simples, veja alguns:

O comando New Bloc permite criar um bloc e os eventos / estados para que precisemos somente implementar a lógica. Você pode ativar o comando dando um Ctrl+Shift+P e executando “Bloc: New Bloc”, o resultado podemos ver no gif acima.

Temos vários snippets para trabalhar nesta extensão, como disse antes se vocês quiserem um post aprofundado sobre a extensão deixa nos comentários pra eu saber. Você pode ver a lista completa da extensão aqui.

Todo tree

Falando em TODOs, o Todo Tree procura as tags TODO e FIXME dentro do seu código e exibe esses comentários na visualização em árvore no painel, permitindo que você vá diretamente a esse comentário quando clicar nele. Uma extensão simples, mas tão poderosa que me poupa muito tempo procurando no meu código.

Espero que vocês tenham curtido o artigo e que ele possa te ajudar de alguma forma! Se você tiver mais extensões que sejam úteis para mim e para outros desenvolvedores de flutter, escreva nos comentários deste artigo com uma rápida descrição. Vamos melhorar o fluxo de trabalho um do outro!

Abraços