¿Cómo instalar Flutter en Windows?

Flutter es básicamente el kit de herramientas de interfaz de usuario (UI) portátil de Google, que se utiliza para crear y desarrollar aplicaciones llamativas y nativas para dispositivos móviles, de escritorio y web, a partir de una base de código única. Flutter es gratuito, de código abierto y compatible con el código existente. Es utilizado por empresas y desarrolladores de todo el mundo, debido a su interfaz fácil de usar y sus comandos bastante simples pero directos.

En este artículo, analizaremos el proceso de instalación de Flutter en Windows.

Instalación de Flutter en Windows:

Siga los pasos a continuación para instalar Flutter en Windows:

Paso 1:   navega a flutter.dev en tu página web. En la barra de menú superior, seleccione Documentos > Comenzar > Instalar > Windows .

flutter getting started pageselect your operating system

Paso 2: verifique los requisitos del sistema . De ahora en adelante, puede comenzar la instalación.

system requirements for flutter as per official docs\

Puede obtener un procedimiento detallado para instalar las últimas versiones de Windows PowerShell 5.0 y Git para Windows , si aún no están instaladas.

Paso 3:  reinicie el sistema después de instalar Git en sus ventanas. Una vez hecho esto, pasemos a la instalación del kit de desarrollo de software de Flutter (SDK de Flutter). Haga clic en el enlace de descarga para obtener la última versión (a partir de hoy).

flutter download page

Flutter SDK es la herramienta que no solo nos permite crear proyectos flutter, sino también construir esos proyectos y transformarlos en aplicaciones móviles nativas. En palabras más simples, Flutter SDK es la herramienta central para crear una interfaz de usuario de Flutter.

Una vez que se descargue el archivo zip, extraiga la carpeta ‘flutter’ (arrastrar y soltar) a cualquier ruta/directorio del sistema donde obtenga acceso de lectura y escritura . Por lo general, es mejor crear una nueva carpeta en un directorio separado aparte de la unidad del sistema debido a problemas de permisos (en mi caso, el destino de destino es D: > desarrollo > aleteo ).

unziping flutter folder

Ahora haga doble clic en la carpeta ‘flutter’ . Vaya al archivo ‘flutter_console.bat’ y haga doble clic para abrir una ventana del símbolo del sistema. Debería verse algo como esto:

flutter console

Esta consola es en realidad una terminal de Windows disponible para que el desarrollador ejecute comandos flutter. Escriba ‘flutter’ para obtener una lista de todos los comandos de flutter que se pueden ejecutar.

list flutter commands in flutter console

Si bien es bastante bueno tener una terminal para ejecutar comandos flutter y crear proyectos, aún sería mejor y más conveniente almacenar todos nuestros proyectos flutter en otro lugar de nuestro sistema para facilitar el acceso. ¡Dirigámonos al siguiente paso de nuestro viaje!

Paso 4: verifique y edite las variables de entorno para acceder al sistema global. Para esto, desplácese hacia abajo hasta ‘Actualizar su ruta’ en la página oficial de Documentos de la página de instalación de flutter. Para ello, vaya a Panel de control > Sistema y seguridad > Sistema > Configuración avanzada del sistema > Variables de entorno… . Aparecerá en su pantalla un cuadro de diálogo que muestra una lista de las variables de entorno disponibles.

Las variables de entorno son variables del sistema global presentes en el nivel raíz, lo que ayuda a configurar varios aspectos de Windows. Ahora agregaremos la herramienta flutter como una variable de entorno para el acceso directo (en lugar de ejecutar el ejecutable .bat) y la desbloquearemos en todo el PowerShell y el símbolo del sistema de su sistema.

Para hacer esto, eche un vistazo a los siguientes pasos:

  • Verifique la variable ‘Ruta’ en la lista de Variables de usuario . Si aún no está presente, crea una nueva variable (‘Nuevo…’) y asigna el directorio ‘ flutter\bin ‘ como su valor.
  • Ahora haga doble clic en la variable ‘Ruta’ y agregue una nueva entrada haciendo doble clic en una columna a continuación. Debería verse algo como esto:

setting up path for flutter

  • En la ruta, copie todo el directorio de la carpeta flutter\bin y péguelo. Haga clic en «Aceptar» dos veces para completar la configuración. Ahora, asegúrese de haber cerrado cualquier ventana del Símbolo del sistema/Windows PowerShell existente que esté abierta.

Ahora, verifique si se puede acceder a su marco flutter globalmente. Para hacer esto, abra cualquier terminal (digamos Símbolo del sistema) y escriba ‘ flutter ‘ y vea si obtiene la misma lista de comandos que obtuvo anteriormente desde la terminal .bat. En caso afirmativo, ha completado con éxito la configuración de flutter en el nivel raíz de su sistema. De lo contrario, también podría considerar volver a ejecutar la configuración nuevamente.

flutter cmd commands

Paso 5:  Ahora, debe analizar y verificar si falta algo o si debe instalarse más. Para hacer esto, en el terminal del símbolo del sistema, escriba ‘ Flutter Doctor ‘ para verificar otros requisitos.

flutter doctor

(Dado que ya se instaló una versión en mi computadora, a continuación se muestra una imagen de una versión anterior, para ayudarlo a comprender los «errores» que aparecen después del análisis de flutter doctor).

checking if android studio is installed

De acuerdo con la verificación médica de flutter, vemos que flutter se instaló correctamente en nuestro sistema, pero faltan las herramientas de Android, al igual que Android Studio. También vemos que no hay dispositivos conectados también. Eventualmente, el siguiente paso es configurar las herramientas de Android en su dispositivo para ejecutar las aplicaciones flutter creadas por usted.

Paso 6:  Configuración de herramientas y emuladores de Android para dispositivos Android.

El primer paso es descargar e instalar Android Studio. Para ello, navegue hasta la página oficial de Android Studio y haga clic en ‘ Descargar Android Studio ‘.

android studio homepage

Después de aceptar los acuerdos de licencia, ¡ya está listo! Haga clic en el botón Descargar final para comenzar a descargar.

terms of agreement for Android studio

Una vez completada la descarga, pasemos al siguiente paso, es decir, la instalación. 

En ‘ Componentes ‘, asegúrese de que tanto Android Studio como Android Virtual Device estén marcados y solo entonces continúe. El dispositivo virtual de Android es una herramienta esencial para ejecutar varios tipos y tamaños de emuladores de Android para probar su proyecto flutter. De ahora en adelante, haga clic en ‘ Siguiente ‘.

selecting components to install on Android studios

Seleccione el directorio en el que desea que se instale su archivo. Se recomienda seleccionar otra ruta además de la unidad del sistema. Una vez hecho esto, haga clic en ‘ Siguiente ‘.

select installation location for android studio

Finalmente, haga clic en ‘ Instalar ‘. Espere un par de segundos para que se complete la instalación. Marque la casilla junto a ‘ Iniciar Android Studio ‘. Haga clic en ‘ Finalizar ‘.

Espere a que Android Studio se inicie en su computadora. En la pantalla de inicio, haga clic en Siguiente > Personalizado > Siguiente .

welcome dashboard android studioAndroid studio installation type

Para la ubicación del kit de desarrollo de Java en el siguiente paso, se recomienda mantener la ruta predeterminada que requiere, para evitar molestias. En el siguiente paso, elija la apariencia de la interfaz de usuario que desea para Android Studio. Haga clic en ‘ Siguiente ‘.

Este siguiente paso es un poco importante. Recuerde marcar las casillas requeridas exactamente como se muestra a continuación. Si ya se han instalado kits, puede ignorarlos y continuar. Haga clic en ‘ Siguiente ‘. Configure su carpeta deseada para Android SDK.

setting up SDK

Con eso hecho, haga clic en ‘ Finalizar ‘. Android Studio ahora instalará todas las herramientas de Android necesarias para la ejecución de sus proyectos de aleteo. Esto puede llevar bastante tiempo, ¡es mejor esperar!

downloading components  for Android studions for windows

Ahora, estamos listos para crear y construir proyectos flutter en Android Studio y ejecutarlos en un dispositivo Android real o virtual (emulador).

Paso 6: establezca SDK como una variable de entorno, para acceso global.

Ahora, abra la terminal del símbolo del sistema y ejecute ‘flutter doctor’ nuevamente. Si ha instalado Android SDK en el directorio predeterminado sugerido por Android Studio, no aparecerá ningún problema. Sin embargo, si lo ha instalado en un directorio no predeterminado, flutter no podría detectarlo en su sistema. Para ayudarlo a hacer eso, lo adivinó… lo estaríamos asignando como una variable de entorno, dando acceso global .

Como se discutió anteriormente en el Paso 4, vaya a las variables de entorno y haga clic en ‘ Nuevo ‘, y haga lo siguiente (según lo recomendado por flutter doctor). Haga clic en ‘ Aceptar ‘.

Set SDK as an environment variable

Paso 7: Acepte las licencias de Android requeridas.

En el terminal del símbolo del sistema, escriba:

flutter doctor --android-licenses

según lo sugerido por flutter doctor. Presione enter. Para revisar las licencias, escriba ‘ y ‘ para Sí. 

Verá un par de indicaciones repetidas que se ven así:

Accept? (y/N):

Escriba ‘ y ‘ cuando se le solicite.

Finalmente, después de que se hayan aceptado todos los acuerdos de licencia, debería ver un mensaje similar a este:

All SDK package licenses accepted

Paso 7:   configura el emulador de Android.

Tiene la opción de elegir entre un dispositivo Android o un emulador de Android para desarrollar su aplicación. Depende totalmente de ti.

Para configurar el dispositivo Android, vaya a la página de documentos oficiales y siga los pasos exactos que se mencionan. Descargue el controlador USB de Google siguiendo el enlace e instálelo de acuerdo con las instrucciones proporcionadas. Esto también se puede instalar a través de Android Studio, que luego puede conectar a un dispositivo Android real para construir la aplicación.

 Setup Android Emulator.

Para configurar el emulador de Android, debe realizar los siguientes pasos:

  • Abra Android Studio.
  • En la barra de menú superior, haga clic en Herramientas > Administrador de SDK.
  • Verifique si tiene instalado el SDK más reciente. Recuerde instalar también la última versión estable marcando la casilla de la izquierda. 
    En mi caso, se trata de ‘ Android 9.0 (Pie) ‘. Incluso puede desmarcar la última versión (si no es estable), no solo para ahorrar espacio sino también para ejecutar todas sus aplicaciones en la versión estable.
  • En la pestaña ‘ Herramientas SDK ‘, no olvide verificar el controlador USB de Google para conectar más tarde un dispositivo Android real. Con eso, haga clic en ‘ Aplicar ‘. Haga clic en ‘ Aceptar ‘ para iniciar la instalación del SDK.
    Esto puede tardar un par de minutos en completarse. Una vez finalizada la configuración, haga clic en ‘ Finalizar ‘. ¡Su configuración ahora está completa!
  • Para echar un primer vistazo a su emulador de Android, abra Android Studio. Vaya a Herramientas > Administrador de AVD . Aparece un cuadro de diálogo.

creating virtual device on Android studio

  • Haga clic en ‘ Crear dispositivo virtual… ‘, seleccione un dispositivo y sus dimensiones según sus preferencias, seleccione una imagen del sistema y, por último, en todas las configuraciones predeterminadas, haga clic en ‘Finalizar’. Haga clic en el botón ‘▶’ para iniciar su emulador.

creating virtual device

¡Ahí tienes! Ahora tiene un marco flutter completamente funcional con dispositivos/emuladores para construir sus hermosas aplicaciones. ¡Volverse loco!

Publicación traducida automáticamente

Artículo escrito por soumyadeepdbsslg y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *