Saltar al contenido principal

Configura y prueba Flutter

¡Configura Flutter en tu dispositivo con un editor basado en Code OSS, como VS Code, y comienza a desarrollar tu primera aplicación multiplataforma con Flutter!

Aprende cómo usar cualquier editor basado en Code OSS, como VS Code, para configurar tu entorno de desarrollo de Flutter y probar la experiencia de desarrollo con Flutter.

Si ya has desarrollado con Flutter antes, o prefieres usar un editor o IDE diferente, puedes seguir las instrucciones de configuración personalizada en su lugar.

Confirma tu plataforma de desarrollo

#

Las instrucciones de esta página están configuradas para cubrir la instalación y prueba de Flutter en un dispositivo macOS.

Si quieres seguir las instrucciones para un sistema operativo diferente, selecciona uno de los siguientes.

Descarga el software requerido

#

Para configurar Flutter de la manera más fluida, instala primero las siguientes herramientas.

  1. Configura el soporte para Linux

    Si no has configurado el soporte para Linux en tu Chromebook antes, activa el soporte para Linux.

    Si ya has activado el soporte para Linux, asegúrate de que esté actualizado siguiendo las instrucciones para solucionar problemas con Linux.

  2. Descarga e instala los paquetes requeridos

    Usando apt-get o tu mecanismo de instalación preferido, instala las últimas versiones de los siguientes paquetes:

    • curl
    • git
    • unzip
    • xz-utils
    • zip
    • libglu1-mesa

    Si quieres usar apt-get, instala estos paquetes usando los siguientes comandos:

    sudo apt-get update -y && sudo apt-get upgrade -y
sudo apt-get install -y curl git unzip xz-utils zip libglu1-mesa

  3. Descarga e instala Visual Studio Code

    Para instalar Flutter rápidamente, y luego editar y depurar tus aplicaciones, instala y configura Visual Studio Code.

    En su lugar, puedes instalar y usar cualquier otro editor basado en Code OSS que soporte extensiones de VS Code. Si decides hacerlo, para el resto de este artículo, asume que VS Code se refiere al editor de tu elección.

  1. Instala git

    Si ya tienes git instalado, salta al siguiente paso: Descargar e instalar Visual Studio Code.

    Hay varias formas de instalar git en tu Mac, pero la que recomendamos es mediante Xcode. Esto será importante cuando dirijas tus compilaciones hacia iOS o macOS.

    xcode-select --install

    Si aún no has instalado las herramientas, debería abrirse un cuadro de diálogo confirmando que deseas instalarlas. Haz clic en Instalar, luego, una vez completada la instalación, haz clic en Listo.

  2. Descarga e instala Visual Studio Code

    Para instalar Flutter rápidamente, y luego editar y depurar tus aplicaciones, instala y configura Visual Studio Code.

    En su lugar, puedes instalar y usar cualquier otro editor basado en Code OSS que soporte extensiones de VS Code. Si decides hacerlo, para el resto de este artículo, asume que VS Code se refiere al editor de tu elección.

  1. Instala Git para Windows

    Descarga e instala la última versión de Git para Windows.

    Para obtener ayuda con la instalación o resolución de problemas de Git, consulta la documentación de Git.

  2. Descarga e instala Visual Studio Code

    Para instalar Flutter rápidamente, y luego editar y depurar tus aplicaciones, instala y configura Visual Studio Code.

    En su lugar, puedes instalar y usar cualquier otro editor basado en Code OSS que soporte extensiones de VS Code. Si decides hacerlo, para el resto de este artículo, asume que VS Code se refiere al editor de tu elección.

  1. Descarga e instala los paquetes requeridos

    Usando tu gestor de paquetes o mecanismo preferido, instala las últimas versiones de los siguientes paquetes:

    • curl
    • git
    • unzip
    • xz-utils
    • zip
    • libglu1-mesa

    En distribuciones basadas en Debian con apt-get, como Ubuntu, instala estos paquetes usando los siguientes comandos:

    sudo apt-get update -y && sudo apt-get upgrade -y
sudo apt-get install -y curl git unzip xz-utils zip libglu1-mesa

  2. Descarga e instala Visual Studio Code

    Para instalar Flutter rápidamente, y luego editar y depurar tus aplicaciones, instala y configura Visual Studio Code.

    En su lugar, puedes instalar y usar cualquier otro editor basado en Code OSS que soporte extensiones de VS Code. Si decides hacerlo, para el resto de este artículo, asume que VS Code se refiere al editor de tu elección.

Instalar y configurar Flutter

#

Ahora que has instalado Git y VS Code, sigue estos pasos para usar VS Code para instalar y configurar Flutter.

  1. Inicia VS Code

    Si aún no está abierto, abre VS Code buscándolo con Spotlight o abriéndolo manualmente desde el directorio donde está instalado.

  2. Añade la extensión de Flutter a VS Code

    Para añadir las extensiones de Dart y Flutter a VS Code, visita la página del marketplace de la extensión de Flutter, luego haz clic en Instalar. Si tu navegador te lo solicita, permítele abrir VS Code.

  3. Instala Flutter con VS Code

    1. Abre la paleta de comandos en VS Code.

      Ve a View > Command Palette o presiona Command + Shift + P.

    2. En la paleta de comandos, escribe flutter.

    3. Selecciona Flutter: New Project.

    4. VS Code te pedirá que localices el SDK de Flutter en tu ordenador. Selecciona Download SDK.

    5. Cuando se muestre el cuadro de diálogo Select Folder for Flutter SDK, elige dónde quieres instalar Flutter.

    6. Haz clic en Clone Flutter.

      Mientras descarga Flutter, VS Code muestra esta notificación emergente:

      Downloading the Flutter SDK. This may take a few minutes.

      Esta descarga tarda unos minutos. Si sospechas que la descarga se ha colgado, haz clic en Cancelar y luego inicia la instalación de nuevo.

    7. Haz clic en Add SDK to PATH.

      Cuando se realiza con éxito, se muestra una notificación:

      The Flutter SDK was added to your PATH

    8. Es posible que VS Code muestre un aviso de Google Analytics.

      Si estás de acuerdo, haz clic en Aceptar.

    9. Para asegurarte de que Flutter esté disponible en todas las terminales:

      1. Cierra y luego vuelve a abrir todas las ventanas de terminal.
      2. Reinicia VS Code.

  4. Solución de problemas de instalación

    Si encuentras algún problema durante la instalación, consulta la sección de resolución de problemas de instalación de Flutter.

Prueba Flutter

#

Ahora que has configurado VS Code y Flutter, ¡es hora de crear una aplicación y probar el desarrollo con Flutter!

  1. Crea una nueva aplicación de Flutter

    1. Abre la paleta de comandos en VS Code.

      Ve a View > Command Palette o presiona Command + Shift + P.

    2. En la paleta de comandos, empieza a escribir flutter:.

      VS Code debería mostrar comandos del plugin de Flutter.

    3. Selecciona el comando Flutter: New Project.

      Es posible que tu sistema operativo o VS Code soliciten acceso a tus documentos, acepta para continuar con el siguiente paso.

    4. Elige la plantilla Application.

      VS Code debería preguntarte Which Flutter template?. Elige Application para inicializar una aplicación de contador simple.

    5. Crea o selecciona el directorio padre para la carpeta de tu nueva aplicación.

      Debería aparecer un diálogo de archivos.

      1. Selecciona o crea el directorio padre donde quieres que se cree el proyecto.
      2. Para confirmar tu selección, haz clic en Select a folder to create the project in.

    6. Introduce un nombre para tu aplicación.

      VS Code debería pedirte que introduzcas un nombre para tu nueva aplicación. Introduce trying_flutter o un nombre similar en minúsculas_con_guiones_bajos. Para confirmar tu selección, presiona Enter.

    7. Espera a que se complete la inicialización del proyecto.

      El progreso de la tarea a menudo se muestra como una notificación en la parte inferior derecha y también se puede acceder a él desde el panel Output.

    8. Abre el directorio lib, luego el archivo main.dart.

      Si tienes curiosidad sobre qué hace cada parte del código, echa un vistazo a los comentarios precedentes a lo largo del archivo.

  2. Ejecuta tu aplicación en la web

    Aunque las aplicaciones de Flutter pueden ejecutarse en muchas plataformas, intenta ejecutar tu nueva aplicación en la web.

    1. Abre la paleta de comandos en VS Code.

      Ve a View > Command Palette o presiona Command + Shift + P.

    2. En la paleta de comandos, empieza a escribir flutter:.

      VS Code debería mostrar comandos del plugin de Flutter.

    3. Selecciona el comando Flutter: Select Device.

    4. En la solicitud Select Device, selecciona Chrome.

    5. Ejecuta o inicia la depuración de tu aplicación.

      Ve a Run > Start Debugging o presiona F5.

      flutter run se utiliza para compilar e iniciar tu aplicación, luego debería abrirse una nueva instancia de Chrome y comenzar a ejecutar la aplicación que acabas de crear.

  3. Prueba el hot reload

    Flutter ofrece un ciclo de desarrollo rápido con hot reload stateful, la capacidad de recargar el código de una aplicación en ejecución activa sin reiniciar ni perder el estado de la aplicación.

    Puedes cambiar el código fuente de tu aplicación, ejecutar el comando de hot reload en VS Code, y luego ver el cambio en tu aplicación en ejecución.

    1. En la aplicación en ejecución, intenta sumar al contador unas cuantas veces haciendo clic en el botón incremento (+).

    2. Con tu aplicación aún ejecutándose, haz un cambio en el archivo lib/main.dart.

      Cambia la línea _counter++ en el método _incrementCounter para decrementar el campo _counter en su lugar.

      dart
      setState(() {
  // ...
  _counter++;
  _counter--;
});

    3. Guarda tus cambios (File > Save All) o haz clic en el botón de Hot Reload icono de hot reload.

      Flutter actualiza la aplicación en ejecución sin perder ningún estado existente. Observa que el valor existente se mantuvo igual.

    4. Intenta hacer clic en el botón incremento (+) de nuevo. Observa que el valor disminuye en lugar de aumentar.

  4. Explora la barra lateral de Flutter

    El plugin de Flutter añade una barra lateral dedicada a VS Code para gestionar las sesiones de depuración y dispositivos de Flutter, ver un esquema de tu código y widgets, así como acceder a las DevTools de Dart y Flutter.

    1. Si tu aplicación no se está ejecutando, inicia la depuración de nuevo.

      Ve a Run > Start Debugging o presiona F5.

    2. Abre la barra lateral de Flutter en VS Code.

      Puedes abrirla con el botón de Flutter Logo de Flutter en la barra lateral de VS Code o abrirla desde la paleta de comandos ejecutando el comando Flutter: Focus on Flutter Sidebar View.

    3. En la barra lateral de Flutter, dentro de DevTools, haz clic en el botón Flutter Inspector.

      Debería abrirse un panel independiente de Widget Inspector en VS Code.

      En el widget inspector, puedes ver el árbol de widgets de tu aplicación, ver las propiedades y el diseño de cada widget, y más.

    4. En el widget inspector, intenta hacer clic en el widget de nivel superior MyHomePage.

      Debería abrirse una vista de sus propiedades y diseño, y el editor de VS Code debería navegar y enfocarse en la línea donde se incluyó el widget.

    5. Explora y prueba otras características en el widget inspector y la barra lateral de Flutter.

Continúa tu camino con Flutter

#

¡Felicitaciones! Ahora que has instalado y probado Flutter, sigue la ruta de aprendizaje de Flutter, configura el desarrollo para una plataforma de destino adicional, o explora algunos de estos recursos para continuar tu viaje de aprendizaje de Flutter.

Compilar para otras plataformas
Aprende desarrollo con Flutter
Mantente al día con Flutter

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.