Visual Studio Code

Instalación y configuración

Sigue las instrucciones de Configura un editor para instalar las extensiónes de Dart y Flutter (también llamados plugins).

Actualizando la extensión

Las actualizaciones de la extensión se envían regularmente. Por defecto, VS Code actualiza automáticamente las extensiones cuando hay actualizaciones disponibles.

Para instalar actualizaciones manualmente:

  1. Haga clic sobre el botón Extensions Side Bar
  2. Si se muestra la extensión de Flutter con una actualización disponible, haga clic en el botón de actualización y luego en el botón de recarga

Creando proyectos

Creando un nuevo proyecto

Para crear un nuevo proyecto de Flutter a partir de la plantilla de la aplicación de inicio Flutter:

  1. Abre la paleta de comandos (Ctrl+Shift+P (Cmd+Shift+P en macOS)).
  2. Seleccione el comando Flutter: New Project y presione Enter.
  3. Ingrese tu nombre de proyecto deseado.
  4. Seleccione un Project location.

Abriendo un proyecto desde el código fuente existente

Para abrir un proyecto Flutter existente:

  1. Clic en File>Open… desde la ventana principal del IDE.
  2. Navegue al directorio que contiene tus archivos de código fuente existentes de Flutter.
  3. Clic en Open.

Edición de código y problemas de visualización

La extensión de Flutter realiza análisis de código que permite:

  • Resaltado de sintaxis.
  • Completado de código basado en análisis de tipo enriquecido.
  • Navegando para escribir declaraciones (Go to Definition or F12), y buscar tipo de usos (Find All References o Shift+F12).
  • Visualización de todos los problemas actuales del código fuente (View>Problems or Ctrl+Shift+M (Cmd+Shift+M en macOS)). Cualquier problema de análisis se muestra en el panel Problemas:
    Problems pane

Ejecución y depuración

Comience a depurar haciendo clic en Debug>Start Debugging desde la ventana principal del IDE o presione F5.

Seleccionar un dispositivo de destino

Cuando se abre un proyecto Flutter en VS Code, debería ver un conjunto de entradas específicas de Flutter en la barra de estado, incluida una versión de Flutter SDK y un nombre de dispositivo (o el mensaje Sin dispositivos).

Flutter device

La extensión Flutter selecciona automáticamente el último dispositivo conectado. Sin embargo, si tiene varios dispositivos/simuladores conectados, haga 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.

Ejecuta la aplicación sin puntos de interrupción

  1. Clic en Debug>Start Without Debugging en la ventana principal del IDE, o presiona Ctrl+F5. La barra de estado se vuelve naranja para mostrar que te encuentras en una sesión de depuración.
    Debug Console

Ejecutar aplicación con puntos de interrupción

  1. Si lo deseas, establece puntos de interrupción en tu código fuente.
  2. Clic en Debug>Start Debugging en la ventana principal del IDE, o presiona F5.
    • La parte derecha de Debug Sidebar muestra stack frames y variables.
    • El panel inferior de Debug Console muestra la salida de registros detallados.
    • La depuración se basa en una configuración de inicio predeterminada. Para personalizar esto, haz clic en el el engranaje en la parte superior de Debug Sidebar para crear un archivo launch.json. Luego puedes modificar los valores.

Edición rápida y actualización en ciclo de desarrollo

Flutter ofrece el mejor ciclo de desarrollo de su clase, permitiéndote ver el efecto de tus cambios casi instantáneamente con la función de “hot reload”. Mira Usando Hot reloading Flutter Apps para más detalles.

Depuración avanzada

Depuración de problemas de diseño visual

Durante una sesión de depuración, se agregan varios comandos de depuración adicionales a la Paleta de Comandos], incluyendo:

  • Toggle Baseline Painting: Hace que cada RenderBox dibuje una línea en cada línea de base.
  • Toggle Repaint Rainbow: Muestra colores rotativos en las capas cuando vuelva a pintar.
  • Toggle Slow Animations: Reduce la velocidad de las animaciones para permitir la inspección visual.
  • Toggle Slow-Mode Banner: Ocultar el banner de “slow mode” incluso cuando se ejecuta una compilación de depuración.

Depurar bibliotecas externas

Por defecto, depurar una biblioteca externa está desactivado en la extensión Flutter. Para habilitarlo:

  1. **Settings > Extensions > Dart Configuration **
  2. Marca la opción Debug External Libraries

Flutter inspector, performance profiling y Dart DevTools

Dart DevTools son un conjunto de herramientas de depuración y creación de perfiles presentada con una interfaz de usuario basada en html. DevTools reemplaza la versión anterior de perfilado basada en navegador, Observatory, e incluye funcionalidades previamente solo disponibles para IntelliJ, como el Flutter Inspector.

DevTools esta aún en desarrollo pero disponible para previsualización. Para instalación e instrucciones sobre como empezar, mira DevTools’ docs.

Consejos de edición para el código Flutter

Si tienes consejos adicionales que compartirnos, por favor ¡háznoslos llegar!

Asistencias y soluciones rápidas

Las asistencias son cambios de código relacionados con un determinado identificador de código. Varias de ellas están disponibles cuando el cursor se coloca sobre un identificador de widget Flutter, como se indica mediante el icono de bombilla amarilla. La asistencia se puede invocar haciendo clic en la bombilla o usando el atajo de teclado Ctrl+Enter, como se ilustra aquí:

Code Assists

Las soluciones rápidas son similares, solo se muestran con un código que tiene un error y pueden ayudar a corregirlo.

Envolver con la nueva asistencia de widgets

: Esto se puede usar cuando tiene un widget que deseas envolver en un widget circundante, por ejemplo, si deseas envolver un widget en un Row o un Column.

Asistencia para envolver una lista de widgets con un nuevo widget

: Similar a la asistencia anterior, pero para envolver una lista existente de widgets en lugar de un widget individual.

Asistencia para convertir child a children

: Cambiar un argumento child a un argumento children, y envolver el valor del argumento en una lista.

Snippets

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

Snippets

La extensión de Flutter incluye los siguientes snippets:

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

Puedes también definir snippets personalizados ejecutando Configure User Snippets desde la Paleta de Comandos.

Atajos de teclado

Hot Reload
Durante una sesión de depuración, haciendo clic en el botón Restart sobre Debug Toolbar, o presionando Ctrl+Shift+F5 (Cmd+Shift+F5 en macOS) realiza un hot reload.

Las asignaciones de teclado puedes ser cambiadas ejecutando el comando Open Keyboard Shortcuts desde la Paleta de Comandos.

Hot Restart

‘Hot Reloads’ vs ‘Hot Restarts’

Hot reload funciona inyectando archivos actualizados de código fuente en la máquina virtual Dart en ejecución. Esto incluye no solo agregar nuevas clases, sino también agregar métodos y campos a las clases existentes, y cambiar las funciones existentes. Sin embargo, algunos tipos de cambios de código no se reflejarán con hot reload:

  • Inicializadores de variables globales.
  • Inicializadores de campos Static.
  • El método main() de la aplicación.

Para estos cambios, puedes reiniciar completamente tu aplicación, sin tener que finalizar tu sesión de depuración. Para realizar un hot restart, ejecute el comando Flutter: Hot Restart desde la Paleta de Comandos, o pulsa Ctrl+F5.

Solución de problemas

Problemas conocidos y comentarios

Todos los errores conocidos se siguen en el issue tracker: [Dart an Flutter extensions GitHub issue tracker][].

Agradecemos sus comentarios, tanto sobre errores/problemas como sobre solicitudes de funcionalidades. Antes de presentar nuevos problemas, por favor:

  • Haz una búsqueda rápida en los issue trackers para ver si el problema ya ha sido marcado.
  • Asegúrate de que haz actualizado la versión más reciente del plugin.

Al presentar nuevos issues, por favor incluye la salida de flutter doctor

[Dart an Flutter extensions GitHub issue tracker]: https://github.com/Dart-Code/Dart-Code/issues