Cómo instalar Flutter en Windows 10 en Android Studio y Visual Studio Code

En este tutorial te voy a enseñar cómo instalar Flutter en Windows 10, y también a instalar y configurar Flutter en Android Studio y Visual Studio Code para que puedas empezar a desarrollar Apps usando Flutter.

Instalar Git

  1. Descarga Git For Windows.
  2. Instálalo, la configuración por defecto es más que suficiente.

Configurar el SDK de Flutter

  1. Descarga el archivo .zip del SDK de Flutter.
  2. Extrae el archivo .zip en el disco C. Quedará así C:\flutter.
  3. Presiona la tecla Windows y en la barra de búsqueda digita variable.
  4. Selecciona Editar las variables de entorno del sistema.
  5. Da click en Variables de entorno.
  6. En Variables del sistema selecciona la variable Path y luego click en Editar.
  7. Da click en Nueva y pega la ruta de la carpeta bin de Flutter:
  8. Ahora da click en Aceptar en las 3 ventanas para guardar cambios.

Instalar Android Studio

  1. Descarga el Instalador de Android Studio.
  2. Ejecuta el instalador.
  3. Da click en Next.
  4. Marca todas las casillas y da click en Next 2 veces más.
  5. Da click en Install.
  6. Cuando finalize, da click en Next y luego en Finish.
  7. Ahora selecciona Do not import settings y da click en OK.
  8. Se abrirá Android Studio Setup Wizard.
  9. Da click en Next.
  10. Selecciona Custom y nuevamente click en Next.
  11. Selecciona el tema del editor (Te recomiendo Darcula) y da click en Next.
  12. Ahora descarga el SDK de Android, para ello marca todas las casillas.
  13. Da click en el botón que tiene 3 puntos “…”.
  14. Se abrirá el explorador de archivos.
  15. Selecciona la carpeta de tu usuario de windows, dentro crea una carpeta llamada Android, y dentro de esta una carpeta llamada SDK, y luego selecciona la carpeta SDK y da click en OK.
  16. Ahora da click en Next 2 veces y luego click en Finish.
  17. Cuando finalize la descarga da click en Finish y se abrirá Android Studio.

Instalar el Plugin de Flutter en Android Studio

  1. En la ventana Welcome to Android Studio da click en Configure y luego en Plugins.
  2. En la barra de búsqueda digita flutter y da click en Search in repositories.
  3. Da click en el que dice Flutter, Luego en Install, Accept y Yes.
  4. Ahora da click en Restart Android Studio, luego en OK, y en Restart.
  5. Se abrirá nuevamente Android Studio.

Agregar el SDK de Android a Flutter

  1. Abrimos nuevamente las Variables de entorno.
  2. Y en Variables del sistema da click en Nueva.
  3. En Nombre de la variable digita ANDROID_HOME.
  4. Da click en Examinar directorio y selecciona la ruta en donde descargarte el SDK de android:
  5. Ahora da click en Aceptar en las 3 ventanas para guardar cambios.
  6. Presiona la tecla Windows y en la barra de búsqueda digita cmd y selecciona la Command Prompt o Símbolo del sistema.
  7. Digita el comando flutter doctor y presiona Enter.
  8. Notarás que te falta aceptar las licencias de Android, así que digita el siguiente comando y presiona Enter:
  9. Ahora te preguntará si aceptas cada licencia, en la cual debes digitar Y y presionar Enter para cada licencia.
  10. Cuando hallas aceptado todas las licencias te saldrá All SDK package licenses accepted y cierras la ventana.

Crear App de Flutter usando Android Studio

  1. En la ventana de Welcome to Android Studio da click en Start a new Flutter Project.
  2. Selecciona Flutter Application y da click en Next, se abrirá Configure the new Flutter application.
  3. En Project name ingresa el nombre del proyecto, el cual debe ir en lowercase_with_underscores.
  4. En Flutter SDK path ingresa C:\flutter.
  5. En Project location ingresa la ubicación donde quieres crear el proyecto.
  6. En Description ingresa ****una breve descripción del proyecto.
  7. Ahora de click en Next, y se abrirá Set the package name.
  8. En Company domain ingresa un dominio tuyo o cualquier identificador único que quieras, el cual se usara para generar el Package name.
  9. El Package name se auto-generara con el Project name y el Company domain, el cual se usara para identificar tu app en la Play Store, aunque si no te gusta como se auto-genero puedes editarlo.
  10. En Platform channel language elije si quieres que tu app de Flutter soporte Kotlin para el código de Android y Swift para el código de iOS, en caso de que quieras también codificar código nativo para cada plataforma.
  11. Da click en Finish y se crearan todas las carpetas y archivos de tu proyecto de Flutter.

Crear Emulador de Android en Android Studio

  1. En Android Studio da click en Tools > AVD Manager.
  2. Ahora click en Create Virtual Device.
  3. Selecciona un Nexus 5X y da click en Next.
  4. Selecciona la imagen del sistema que descargaste con tu SDK de Android, en mi caso fue Pie – 28 – x86 – Android 9.0, y luego click en Next.
  5. Da click en Finish.
  6. Ahora de click en el botón de Run ▶ para ejecutar el Emulador de Android y cierra las ventana.

Ejecutar App de Flutter en un Emulador de Android desde Android Studio

  1. En la barra de herramientas al lado de main.dart da click el botón de Run ▶ para ejecutar la app en el emulador. La primera vez que se ejecuta se demorara un poco.
  2. Se mostrara la App de Flutter en el emulador, la cual muestra cuantas veces pulsas un botón.
  3. Ahora cierra Android Studio y sigue con el próximo paso.

Android Studio gasta muchos recursos de tu computadora, por lo que algunos desarrolladores prefieren usar Visual Studio Code para crear Apps con Flutter.

Instalar Visual Studio Code

  1. Descarga el Instalador de Visual Studio Code.
  2. Instálalo, la configuración por defecto es más que suficiente.

Instalar la extensión de Flutter en Visual Studio Code

  1. Abre Visual Studio Code.
  2. Da click en Extensions o Ctrl+Shift+X.
  3. En la barra de búsqueda digita flutter.
  4. Selecciona Flutter por el Autor Dart Code.
  5. Da click en Install.
  6. Da click en Reload.

Crear App de Flutter usando Visual Studio Code

  1. Abre la paleta de comandos en View > Command Palette o F1 o Ctrl+Shift+P.
  2. En la barra de búsqueda digita flutter.
  3. Selecciona con las flechas del teclado Flutter: New Project y presiona Enter.
  4. Ingresa el nombre del proyecto de Flutter.
  5. Selecciona la carpeta para crear el proyecto de Flutter.
  6. Se abrirá la carpeta del proyecto y se crearan todos los archivos y carpetas necesarios.

Ejecutar App de Flutter en un Emulador de Android desde Visual Studio Code

  1. En VS Code en el Explorer (Ctrl+Shift+E) abre con doble click el archivo main.dart que está en la carpeta lib (lib > main.dart).
  2. Ahora en la barra de herramientas da click en View > Debug > Start Debugging o F5.
  3. Selecciona el Emulador que creamos en Android Studio (En mi caso es Nexus_5X_API_28) y presiona Enter.
  4. Finalmente se ejecutará la App de muestra.

Ahora que ya sabes Cómo instalar Flutter en Windows 10 en Android Studio y Visual Studio Code puedes empezar a crear esa increíble app que tienes en mente.