> For the complete documentation index, see [llms.txt](https://ecm-pmdm-flutter.gitbook.io/1.-introduccion-a-flutter/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ecm-pmdm-flutter.gitbook.io/1.-introduccion-a-flutter/3.-primera-aplicacion-en-flutter/desde-visual-studio-code.md).

# Desde Visual Studio Code

{% hint style="warning" %}
**Atención**: Las extensiones de Dart y Flutter han de estar instaladas y habilitadas en Visual Studio Code.

Toda la información y detalles: <https://flutter.dev/docs/get-started/test-drive?tab=vscode>
{% endhint %}

## Creamos un nuevo proyecto Flutter

1. Abrimos Visual Studio Code (VSCode)&#x20;
2. Accedemos a la paleta de comandos:  **View -> Command Palette**  o **`Ctrl/Cmd + Shift + P`**
3. Escribimos “**flutter**” y seleccionamos:   **Flutter: New Project**.

> :information\_source:**Atención:  Organización(Package)  y  lenguaje para Android/iOS**&#x20;
>
> La aplicación se crea siempre por defecto con el  nombre de package *com.example.  P*odemos cambiarlo en la  Configuración de Flutter en VSCode: &#x20;
>
> *Preferencias --> Configuración --> Extensiones -->Dart --> Flutter*&#x20;
>
> * Cambiar Package: sección *Dart: Flutter Create Organization y* pulsamos sobre *"Editar en settings.json"* y añadimos a la lista *json* (por ejemplo, en primer lugar) el nombre de nuestra organización. Por ejemplo, para *dam.empar* seria: `"dart.flutterCreateOrganization": "dam.empar",`&#x20;
> * El lenguaje por defecto lo podemos cambiar en:  *Dart: Flutter Create Android Language* y *Dart: Flutter Create IOSLanguage*

![](/files/J3lbtdQVHgtMsJa7ESkq)

4\. Seleccionamos el **tipo** de proyecto Flutter:   **Application**

![](/files/TPiUJepm8O2Kgl0BF2wZ)

5\. Creamos o seleccionamos el **directorio** **padre** donde se creará automáticamente la **nueva** **carpeta** para el proyecto.

6\. Escribimos el **nombre** del **proyecto**:  `hellofluttervs`, y pulsamos **Enter**.

7\. Esperamos a que se cree el proyecto y se abrirá automáticamente en el editor de código el fichero `main.dart`&#x20;

![](/files/OCey8yLZpDgzOeIvFnLI)

## Ejecutamos la aplicación Flutter

* Desde la barra de estado tenemos un **selector** **de** **dispositivos** (podemos ver que Chrome es el dispositivo sobre el que se ejecutará la aplicación por defecto)

![](/files/ThYtEt31gjADwHvsPhwo)

* Para **seleccionar** otro dispositivo o emulador, haremos clic sobre el selector de dispositivos: se abrirá la *paleta de comandos* con una ventana emergente que muestra la lista de dispositivos reales y emuladores disponibles

![](/files/6KuoCVYaelRigM482Ov3)

* Seleccionamos un dispositivo/emulador de la lista (si no está en ejecucición, se arrancará el emulador seleccionado)
* Ejecutamos la aplicación desde:  **Run --> Start Debugging** or pulsamos **`F5`.**
* Esperamos a que se compile y se despliegue en el dispositivo:

![](/files/TaxmDUT3fPHnJ82Tk4w2)

* Nos aparecen las herramientas de depuración:

![](/files/H11OF7wbkWk36i4y9FRN)

### Probamos hot reload

Si **modificamos** el título de la barra de la aplicación y **guardamos** (o pulsamos en hot reload), veremos de inmediato el resultado en ejecución sin perder el estado:

![](/files/KmpmtGxYueO1vo13G024)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://ecm-pmdm-flutter.gitbook.io/1.-introduccion-a-flutter/3.-primera-aplicacion-en-flutter/desde-visual-studio-code.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.