Introdução

Flutter é flexível o suficiente para permitir que escrevamos aplicativos usando qualquer editor de texto ou IDE. No entanto, é uma experiência de desenvolvimento muito melhor trabalhar com os IDEs para os quais a equipe do Flutter fornece suporte de plug-in. Recursos como preenchimento de código, destaque de sintaxe, assistências de edição de widget e suporte para execução e depuração tornam o processo de desenvolvimento de aplicativos mais eficiente e descomplicado.

Neste artigo, vou orientá-lo através de algumas extensões úteis do VS Code para turbinar seu fluxo de trabalho de desenvolvimento do Flutter. Aqui estão os tipos de extensões que cobriremos:

  • Essentials
  • Snippets de código
  • Assistentes Pubspec
  • Teste
  • Arquitetura

Fundamentos

Dardo e Flutter

Dart e As extensões Flutter permitem o suporte para a linguagem de programação Dart no VS Code. Temos utilitários para editar, refatorar e executar aplicativos Web Flutter e Angular com eficácia.

Desenvolvidas e mantidas pela própria equipe do Flutter, essas extensões fornecem uma série de recursos como recarregamento e reinicialização a quente, autocompletar código e várias opções de depuração.

Esses recursos afetam significativamente a experiência de desenvolvimento. Portanto, eles são uma escolha essencial para qualquer pessoa que desenvolva aplicativos com o Flutter.

Snippets de código

Snippets de vibração incríveis

Awesome Flutter Snippets é uma das extensões mais populares após os lançamentos oficiais da a equipe Dart. Ele apresenta uma série de trechos para escrever código abreviado. Os exemplos são mateapp para Material App, statefulW para Stateful Widget e initS para InitState.

Árvore oscilante

Flutter Tree fornece uma maneira muito curta e organizada de escrever árvores de widgets.

Esta é a aparência:

 Container ( filho: coluna ( crianças: [ Child1 ( criança: Criança2, ), Criança 3 (), ], ),
), //Pode ser substituído pelo seguinte: Container> Coluna [Child1> Child2, Child3]

Assim que você pressiona Enter, todo o código da árvore de widgets fica perfeitamente organizado:

Gerador de arquivo Dart Barrel

Dart Barrel File Generator faz o que seu nome sugere: ele gera barril arquivos para pastas contendo arquivos DART. Um arquivo barrel é um arquivo onde gravamos as instruções export para exportar outros arquivos na biblioteca ou pasta. Isso torna a importação de pacotes mais fácil, pois teremos que importar apenas um arquivo em vez de vários.

Esta extensão simples gera arquivos barrel para qualquer pasta específica. Basta clicar com o botão direito na pasta desejada e escolher uma das duas opções para gerar o arquivo:

Ajudantes Pubspec

Pubspec Assist

Pubspec Assist é definitivamente uma das extensões mais úteis. Ele nos permite instalar e atualizar qualquer número de pacotes com um comando simples.

Podemos pesquisar facilmente por um pacote, mesmo quando não temos certeza de seu nome exato, porque o Pubspec Assist é inteligente o suficiente para encontrar o pacote certo:

Pesquisa de dependência Pubspec

Pubspec Dependency Search cobre um caso de uso totalmente diferente da extensão anterior. Isso nos ajuda a pesquisar pacotes simplesmente clicando no nome do pacote ou com um comando:

Na primeira imagem, somos levados à página do pacote relevante em pub.dev. No segundo, a página de resultados da pesquisa é exibida.

Teste

Melhores testes de vibração

Se você procrastinar a escrita de testes, este é para você. Para qualquer arquivo, Better Flutter Tests gera um arquivo de teste correspondente com um boilerplate no lugar. Se o nome ou a estrutura da pasta do arquivo de projeto for alterado, as alterações relevantes também serão feitas no arquivo de teste. Isso mantém tudo sincronizado e a integridade é mantida.

Você pode ver isso em ação com os seguintes gifs:

Arquitetura

bloco

A única desvantagem da arquitetura BLoC é o clichê que vem com ela. Felizmente, temos bloco para gerar tudo, desde arquivos até o código do modelo. Ele também suporta o pacote Cubit e apresenta vários trechos:

Snippets de provedor de flutuação

Flutter Provider Snippets é uma coleção de snippets que nos ajudam a escrever classes e métodos que são comumente usados ​​na arquitetura do provedor. Os exemplos incluem consumidor , selector e proxyProvider .

flutter_mobx

Flutter_mobx fornece snippets e ferramentas que ajudam durante a refatoração de código. Também torna a execução do gerador de código mais intuitiva.

Snippets GetX

GetX Snippets é poderoso, assim como o próprio pacote. Esta coleção oferece snippets para tudo, desde a geração de modelos a páginas, até widgets complexos como ListView ou Forms. Se você trabalha com a biblioteca GetX, esta extensão pode acelerar muito seu fluxo de trabalho.

Conclusão

Este artigo abordou as extensões mais úteis do VS Code, essenciais para qualquer desenvolvedor de Flutter. Tenho certeza de que isso o deixará mais eficiente e fará com que seu tempo de desenvolvimento valha a pena.

A postagem Essential VS Code extensions for Flutter apareceu primeiro no LogRocket Blog .