Visual Studio Code (VS Code) é o editor de código máis popular e recomendado para o desenvolvemento con Flutter. Grazas ás súas potentes extensións de Dart e Flutter, convértese nunha ferramenta incriblemente eficiente para escribir, depurar e optimizar as túas aplicacións.

Nesta sección, exploraremos algunhas das funcionalidades máis útiles que VS Code e as súas extensións ofrecen para Flutter.

📦 Extensións Imprescindibles #

Instala estas extensións dende o Marketplace de VS Code:

⚡ Xeración de Bloques de Código Automáticos (Snippets) #

As extensións de Flutter proporcionan atallos rápidos (snippets) para xerar estruturas de código comúns, aforrándoche tempo e evitando erros.

Comeza a escribir a palabra clave e VS Code suxerirache o snippet. Preme Tab ou ↩ Enter para autocompletar.

• Escribindo palabras clave como stful ou stless, e premendo ↩ Enter, xérase automaticamente a estrutura dun widget.

Os snippets que poño a continuación son os que nos proporciona a extensión “Flutter”. Se queres máis snippets, existe unha extensión chamada “Flutter Widget Snippets” que proporciona moitos máis

stless #

Crea un StatelessWidget básico

//Código xerado co snippet stless:
// Cando escribes 'stless' e premes Enter/Tab

class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

stful #

Crea un StatefulWidget completo coa súa clase State asociada.

//Código xerado co snippet stful:
// Cando escribes 'stful' e premes Enter/Tab

class MyWidget extends StatefulWidget {
  const MyWidget({super.key});

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

main #

Xera a función main() con runApp().

🧩 Snippets da extensión de Dart para VS Code #

🪄 Refactorizacións rápidas (moi útiles) #

Selecciona unha parte do código, preme ⌘ + . (Mac) ou Ctrl + . (Windows/Linux) para ver accións rápidas.

Algunhas moi útiles:

Extraer un Widget (Extract Widget) #

Esta é unha das ferramentas máis potentes. Permíteche converter un anaco de código de UI (un Container, Column, etc.) nun novo widget reutilizable (StatelessWidget ou StatefulWidget).

Como usalo: Posicionate no bloque de código que queres extraer e preme ⌘ + . (Mac) ou Ctrl + . (Windows/Linux). Elixe “Extract Widget” e ponlle un nome ao novo widget.

// Antes de refactorizar:

...
body: const Center(
          child: Text('¡Hola, mundo!'),
        ),
...

/* 
Despois de posicionarme en Text('¡Hola, mundo!'), premer en "⌘ + ." (Mac) ou "Ctrl + ." (Windows/Linux)" 
seleccionando Extract Widget" e poñerlle o nome  de 'NovoWidget':
*/ 

...

body: NovoWidget(),

// E en calquera lugar do ficheiro, creouse:
class NovoWidget extends StatelessWidget {
  const NovoWidget({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text('¡Hola, mundo!'),
    );
  }
}

Envolver (Wrap with widget / Wrap with Column / Wrap with Row…) #

Permíteche engadir rapidamente un widget pai arredor dun widget existente. É moi útil para aplicar layouts.

Como usalo: Sitúa o cursor sobre o widget que queres envolver. Preme ⌘ + . (Mac) ou Ctrl + . (Windows/Linux) e elixe “Wrap with Column”, “Wrap with Row”, ou “Wrap with widget” (para engadir calquera outro widget como Padding, Container, Center).

No seguinte exemplo, queremos envolver o widget Center nun widget Column (verémolo máis adiante nos apuntes). Basicamente, nun Column poderemos visualizar un array de widgets.

🪪 Cambiar nome de variables, clases ou métodos en todo o proxecto #

• Sitúate sobre o nome dunha variable/método/clase
• Preme F2 ou fai clic co botón dereito e selecciona “Rename Symbol”. Escribe o novo nome e preme Enter. → permite renomear en todo o proxecto automaticamente

🔥 Hot Reload e Hot Restart Integrado #

Estás funcións activanse cando estamos executando ou deputando a aplicación, ou no navegador ou nun emulador/simulador.

Hot Reload #

Cando fas cambios no código (por exemplo, nun texto ou unha cor) e gardas o ficheiro, verás os cambios na túa aplicación (sen ter que volver a arrancar ou actualizar o emulador/simulador ou navegador).

Garda o ficheiro (Ctrl+S / Cmd+S). Tamén podes premer o botón de raio ⚡ na barra de depuración ou na paleta de comandos.

Hot Restart #

Reinicia completamente a aplicación, limpando o seu estado. Necesario para cambios estruturais (cambios en initState(), adición de novas dependencias).

Preme o botón de reinicio 🔄 na barra de depuración ou na paleta de comandos.

🌲 Flutter Outline #

Este panel (normalmente á esquerda, xunto ao explorador de ficheiros) mostra a árbore de widgets da túa pantalla actual. É moi útil para:

• Visualizar a xerarquía dos teus widgets.
• Identificar rapidamente onde se atopan os problemas de layout.
• Navegar por widgets complexos.

🔍 Navegación rápida #

📚 Recursos recomendados #

• Documentación oficial de Flutter para VS Code
• Extensión oficial Flutter para VS Code