Saltar al contenido principal

Visual Studio Code

Cómo desarrollar aplicaciones Flutter en Visual Studio Code.

Instalación y configuración

#

VS Code es un editor de código para construir y depurar apps. Con la extensión de Flutter instalada, puedes compilar, desplegar y depurar apps de Flutter.

Para instalar la última versión de VS Code, sigue las instrucciones de Microsoft para la plataforma correspondiente:

Instalar la extensión de Flutter

#

  1. Inicia VS Code.

  2. Abre un navegador y ve a la página de la extensión de Flutter en el Visual Studio Marketplace.

  3. Haz clic en Instalar. Al instalar la extensión de Flutter también se instala la extensión de Dart.

Validar tu configuración de VS Code

#

  1. Ve a Ver > Paleta de comandos....

    También puedes presionar Ctrl / Cmd + Shift + P.

  2. Escribe doctor.

  3. Selecciona Flutter: Ejecutar Flutter Doctor.

    Una vez que seleccionas este comando, VS Code hace lo siguiente:

    • Abre el panel de Salida (Output).
    • Muestra flutter (flutter) en el menú desplegable en la parte superior derecha de este panel.
    • Muestra la salida del comando flutter doctor.

Actualizar la extensión

#

Las actualizaciones de las extensiones se publican de forma regular. Por defecto, VS Code actualiza automáticamente las extensiones cuando hay actualizaciones disponibles.

Para instalar las actualizaciones tú mismo:

  1. Haz clic en Extensiones en la barra lateral.
  2. Si la extensión de Flutter tiene una actualización disponible, haz clic en Actualizar y luego en Recargar.
  3. Reinicia VS Code.

Crear proyectos

#

Hay un par de formas de crear un nuevo proyecto.

Crear un nuevo proyecto

#

Para crear un nuevo proyecto de Flutter desde la plantilla de app inicial de Flutter:

  1. Ve a Ver > Paleta de comandos....

    También puedes presionar Ctrl / Cmd + Shift + P.

  2. Escribe flutter.

  3. Selecciona Flutter: Nuevo proyecto.

  4. Presiona Enter.

  5. Selecciona Aplicación.

  6. Presiona Enter.

  7. Selecciona una Ubicación del proyecto.

  8. Ingresa el Nombre del proyecto que desees.

Abrir un proyecto desde código fuente existente

#

Para abrir un proyecto de Flutter existente:

  1. Ve a Archivo > Abrir.

    También puedes presionar Ctrl / Cmd + O

  2. Navega hasta el directorio que contiene los archivos de código fuente de Flutter existentes.

  3. Haz clic en Open.

Editar código y ver problemas

#

La extensión de Flutter realiza el análisis de código. El análisis de código puede:

  • Resaltar la sintaxis del lenguaje

  • Completar código basado en un análisis de tipos enriquecido

  • Navegar a las declaraciones de tipos

    • Ir a Ir > Ir a la definición.
    • También puedes presionar F12.

  • Encontrar usos de tipos.

    • Presiona Shift + F12.

  • Ver todos los problemas actuales del código fuente.

    • Ve a Ver > Problemas.
    • También puedes presionar Ctrl / Cmd + Shift + M.
    • El panel de Problemas muestra cualquier problema de análisis:
      Panel de problemas

Ejecución y depuración

#

Inicia la depuración haciendo clic en Ejecutar > Iniciar depuración en la ventana principal del IDE, o presiona F5.

Seleccionar un dispositivo de destino

#

Cuando hay un proyecto de Flutter abierto en VS Code, deberías ver un conjunto de entradas específicas de Flutter en la barra de estado, incluida una versión del Flutter SDK y un nombre de dispositivo (o el mensaje Sin dispositivos):
Barra de estado de VS Code

La extensión de Flutter selecciona automáticamente el último dispositivo conectado. Sin embargo, si tienes varios dispositivos/simuladores conectados, haz clic en dispositivo en la barra de estado para ver una lista de selección en la parte superior de la pantalla. Selecciona el dispositivo que deseas usar para ejecutar o depurar.

Ejecutar la aplicación sin puntos de interrupción

#

Ve a Ejecutar > Iniciar sin depurar.

También puedes presionar Ctrl + F5.

Ejecutar la aplicación con puntos de interrupción

#

  1. Si lo deseas, establece puntos de interrupción en tu código fuente.

  2. Haz clic en Ejecutar > Iniciar depuración. También puedes presionar F5. La barra de estado se vuelve naranja para mostrarte que estás en una sesión de depuración.
    Consola de depuración

    • La Barra lateral de depuración de la izquierda muestra marcos de pila (stack frames) y variables.
    • El panel inferior de la Consola de depuración muestra la salida detallada del registro.
    • La depuración se basa en una configuración de inicio predeterminada. Para personalizarla, haz clic en el engranaje en la parte superior de la Barra lateral de depuración para crear un archivo launch.json. Luego puedes modificar los valores.

Ejecutar la app en modo debug, profile o release

#

Flutter ofrece muchos modos de compilación diferentes en los que ejecutar tu app. Puedes leer más sobre ellos en los Modos de compilación de Flutter.

  1. Abre el archivo launch.json en VS Code.

    Si no tienes un archivo launch.json:

    1. Ve a View > Run.

      También puedes presionar Ctrl / Cmd + Shift + D

      Se muestra el panel Ejecutar y depurar.

    2. Haz clic en crear un archivo launch.json.

  2. En la sección configurations, cambia la propiedad flutterMode al modo de compilación que deseas como objetivo.

    Por ejemplo, si deseas ejecutar en modo debug, tu launch.json podría verse así:

    json
    "configurations": [
  {
    "name": "Flutter",
    "request": "launch",
    "type": "dart",
    "flutterMode": "debug"
  }
]

  3. Ejecuta la app a través del panel Ejecutar.

Ciclo de desarrollo de edición y actualización rápidos

#

Flutter ofrece el mejor ciclo de desarrollo de su clase que te permite ver el efecto de tus cambios de forma casi instantánea con la función Hot Reload con estado (Stateful Hot Reload). Para obtener más información, consulta Hot reload.

Depuración avanzada

#

Es posible que estos consejos de depuración avanzada te resulten útiles:

Depuración de problemas de diseño visual (layout)

#

Durante una sesión de depuración, se añaden varios comandos de depuración adicionales a la Paleta de comandos y al Flutter inspector. Cuando el espacio es limitado, el icono se utiliza como la versión visual de la etiqueta.

Alternar la pintura de la línea base Icono de pintado de línea base

Hace que cada RenderBox pinte una línea en cada una de sus líneas base.

Alternar el arcoíris de repintado Icono de arcoíris de repintado

Muestra colores rotativos en las capas al volver a pintar.

Alternar animaciones lentas Ícono para animaciones lentas

Ralentiza las animaciones para permitir la inspección visual.

Alternar el banner de modo debug Icono del banner de modo debug

Oculta el banner de modo debug incluso cuando se ejecuta una compilación de debug.

Depuración de librerías externas

#

Por defecto, la depuración de una librería externa está desactivada en la extensión de Flutter. Para activarla:

  1. Selecciona Configuración > Extensiones > Configuración de Dart.
  2. Marca la opción Debug External Libraries (Depurar librerías externas).

Consejos de edición para código de Flutter

#

Si tienes consejos adicionales que debamos compartir, ¡haznoslo saber!

Asistencias y soluciones rápidas

#

Las asistencias (assists) son cambios de código relacionados con un determinado identificador de código. Muchas de ellas están disponibles cuando el cursor se coloca sobre un identificador de Widget de Flutter, como indica el icono de la bombilla amarilla. Para invocar la asistencia, haz clic en la bombilla como se muestra en la siguiente captura de pantalla:

Asistencias de código

También puedes presionar Ctrl / Cmd + .

Las soluciones rápidas (quick fixes) son similares, solo que se muestran cuando un trozo de código tiene un error y pueden ayudar a corregirlo.

Asistencia Encapsular con un nuevo widget

Esto se puede usar cuando tienes un Widget que deseas envolver en un Widget contenedor, por ejemplo si deseas envolver un Widget en un Row o Column.

Asistencia Encapsular lista de widgets con un nuevo widget

Similar a la asistencia anterior, pero para envolver una lista de Widgets existente en lugar de un Widget individual.

Asistencia Convertir child a children

Cambia un argumento child a un argumento children, y envuelve el valor del argumento en una lista.

Asistencia Convertir StatelessWidget a StatefulWidget

Cambia la implementación de un StatelessWidget a la de un StatefulWidget, creando la clase State y moviendo el código allí.

Snippets

#

Los snippets se pueden usar para acelerar la entrada de estructuras de código típicas. Se invocan escribiendo su prefijo y luego seleccionando desde la ventana de autocompletado de código: Snippets

La extensión de Flutter incluye los siguientes snippets:

  • Prefijo stless: Crear una nueva subclase de StatelessWidget.
  • Prefijo stful: Crear una nueva subclase de StatefulWidget y su subclase State asociada.
  • Prefijo stanim: Crear una nueva subclase de StatefulWidget, y su subclase State asociada que incluye un campo inicializado con un AnimationController.

La extensión de Dart incluye los siguientes snippets:

PrefijoDescripciónEjemplo de Código
main Insertar una función main, usada como punto de entrada. void main(List<String> args) { }
try Insertar un bloque try/catch. try { } catch (e) { }
ifInsertar una sentencia if.if (condition) { }
ife Insertar una sentencia if con un bloque else. if (condition) { } else { }
switch Insertar una sentencia switch. switch (variable) { case value1: break; case value2: break; default: }
for Insertar un bucle for. for (var i = 0; i < 10; i++) { }
fori Insertar un bucle for-in. for (var item in list) { }
whileInsertar un bucle while.while (condition) { }
do Insertar un bucle do-while. do { } while (condition);
fun Insertar una definición de función. void myFunction(String name) { }
class Insertar una definición de clase. class MyClass { }
typedef Insertar un typedef. typedef MyFunction = void Function(String);
test Insertar un bloque de prueba (test). test('My test description', () { });
group Insertar un bloque de grupo de pruebas (test group). group('My test group', () { });

También puedes definir snippets personalizados ejecutando Configurar fragmentos de código de usuario desde la Paleta de comandos.

Atajos de teclado

#
Hot reload

Para realizar un Hot Reload durante una sesión de depuración, haz clic en Hot Reload en la Barra de herramientas de depuración.

También puedes presionar Ctrl + F5 (Cmd + F5 en macOS).

Las asignaciones de teclado se pueden cambiar ejecutando el comando Abrir atajos de teclado desde la Paleta de comandos.

Hot reload vs. hot restart

#

Hot Reload funciona inyectando archivos de código fuente actualizados en la Dart VM (Máquina Virtual) en ejecución. Esto incluye no solo añadir nuevas clases, sino también añadir métodos y campos a clases existentes, y cambiar funciones existentes. Sin embargo, unos pocos tipos de cambios de código no se pueden aplicar con Hot Reload:

  • Inicializadores de variables globales
  • Inicializadores de campos estáticos
  • El método main() de la app

Para estos cambios, reinicia tu app sin finalizar tu sesión de depuración. Para realizar un Hot Restart, ejecuta el comando Flutter: Hot Restart desde la Paleta de comandos.

También puedes presionar Ctrl + Shift + F5 o Cmd + Shift + F5 en macOS.

Flutter Property Editor

#

El Flutter Property Editor es una potente herramienta proporcionada por la extensión de Flutter que te permite ver y modificar propiedades de widgets directamente desde su interfaz visual.

Cómo abrir el Flutter Property Editor en VS Code

#
  1. Haz clic en el icono Icono de VS Code del Flutter Property Editor del Flutter Property Editor en la barra lateral de VS Code.
  2. El Flutter Property Editor se cargará en el panel lateral.
  3. Consulta la documentación del Flutter Property Editor para obtener una guía detallada de uso.

Panel lateral del Flutter Property Editor en VS Code

Resolución de problemas

#

Problemas conocidos y comentarios

#

Todos los errores conocidos se rastrean en el rastreador de problemas: Rastreador de problemas de GitHub de las extensiones de Dart y Flutter. Agradecemos tus comentarios, tanto sobre errores/problemas como solicitudes de nuevas funciones.

Antes de registrar nuevos problemas (issues):

  • Haz una búsqueda rápida en los rastreadores de problemas para ver si el problema ya está registrado.
  • Asegúrate de estar actualizado con la versión más reciente del plugin.

Al registrar nuevos problemas, incluye la salida de flutter doctor.

A menos que se indique lo contrario, la documentación de este sitio refleja Flutter 3.44.0. Página actualizada por última vez el 2026-05-05. Ver código fuente oreportar un problema.