Guía completa para instalar Flutter en Mac y Windows

Instalar Flutter

El primer paso de esta guía será la instalación del SDK de Flutter. De hecho, gracias a él podrás programar en Dart, proporcionándote todas las funciones y clases que necesitas para crear tu aplicación.

Pasos a seguir para instalar Flutter en Mac

A continuación, te indico los pasos a seguir para instalar Flutter si estás en un Mac:

Lo primero que debes hacer es ir al sitio web de Flutter.dev para descargar el archivo de instalación.
Una vez en la página principal, desplázate hacia abajo y haz clic en “Get started”.
Se te pedirá que elijas la plataforma que estás utilizando (en nuestro caso, MacOS). Luego también te preguntarán el tipo de aplicación que deseas programar. Puedes seleccionar iOS, que es la versión recomendada (elegir otra versión no cambia nada en los pasos siguientes).
Deberías llegar a una página de presentación de Flutter. Al bajar un poco, encontrarás una sección llamada «Install the Flutter SDK» con una subsección «Download and install».
Instala la versión de Flutter que sea compatible con tu Mac.

No descomprimas el archivo de instalación inmediatamente después de descargarlo. Primero, se recomienda crear una carpeta llamada «development» en tus documentos. Ahí es donde colocarás tus recursos de Flutter, así como las aplicaciones que crearás. Solo entonces puedes descomprimir el archivo, ya sea haciendo doble clic sobre él o a través de la terminal con el comando “unzip flutter_macos_xxx-stable.zip”. Reemplaza xxx por la versión de Flutter que descargaste.

Agregar Rosetta

Para un uso óptimo de Flutter en Mac, se recomienda instalar Rosetta 2. Para ello, simplemente abre la terminal de comandos: Finder > Aplicaciones > Utilidades > Terminal, luego ingresa el siguiente comando:

sudo softwareupdate --install-rosetta --agree-to-license

El término sudo indica que deberás ingresar la contraseña de tu Mac para poder ejecutar el comando. Al presionar Enter, debería aparecer una línea que dice «Password». Solo tienes que escribir tu contraseña, que permanecerá invisible mientras la ingresas.

Agregar los comandos de Flutter

Para poder utilizar ciertos comandos de Flutter en la terminal de tu Mac (por ejemplo, para crear una aplicación), deberás agregar Flutter a tu PATH. Aquí están los pasos a seguir:

Abre la terminal de comandos: Finder > Aplicaciones > Utilidades > Terminal.
Accede a la carpeta development ingresando el comando:
cd development
Luego ingresa el siguiente comando:
export PATH=$HOME/development/flutter/bin:$PATH

Atención: si no colocaste tu carpeta de Flutter dentro de una carpeta llamada «development», debes modificar el PATH en consecuencia. Por ejemplo, si la pusiste en una carpeta llamada «Coding», la ruta será $HOME/coding/flutter/bin

Los comandos de Flutter ahora estarán disponibles para esa sesión de terminal, pero tendrás que repetir este proceso si cierras la terminal. El objetivo será importarlos de manera permanente para no tener que hacer este paso cada vez.

Para hacerlo permanente, necesitas recuperar la ruta donde se encuentra tu SDK ingresando el comando echo $PATH y copiando lo que se muestra. Luego, ingresa el siguiente comando:
vim $HOME/.zshrc.
Debería aparecer un gran espacio en blanco con tildes (~) a la izquierda. Es en este lugar donde podrás insertar la ruta de tu SDK presionando la tecla i (para Insertar) e ingresando la siguiente línea:

export PATH = “tu_ruta”

Para guardar, presiona Ctrl + C, ingresa :wq! (el texto debería aparecer en la parte inferior), luego presiona Enter. Tu archivo zsh debería haberse exportado y guardado, lo que te permitirá utilizar los comandos de Flutter en la terminal de manera permanente.

El último paso es cerrar la terminal, abrirla de nuevo, y luego ingresar flutter doctor para asegurarte de que todo funcione correctamente. Si aparece un informe de diagnóstico, significa que los comandos de Flutter se integraron correctamente en la terminal. ¡La instalación de Flutter en tu Mac ya está completa!

Pasos a seguir para instalar Flutter en Windows

A continuación, te indico los pasos a seguir para instalar Flutter en una computadora con Windows:

Lo primero que debes hacer es ir al sitio web de Flutter.dev para descargar el archivo de instalación.
Una vez en la página principal, desplázate hacia abajo y haz clic en “Get started”.
Se te pedirá que elijas la plataforma que estás utilizando (en nuestro caso, Windows). Luego también te preguntarán el tipo de aplicación que deseas programar. Puedes seleccionar Android, que es la versión recomendada (elegir otra versión no cambia nada en los pasos siguientes).
Llegarás a una página de presentación de Flutter. Al desplazarte hacia abajo, deberías encontrar una sección llamada «Install the Flutter SDK» con una subsección «Download and install», donde se encuentra el archivo de instalación.

No descomprimas el archivo de instalación inmediatamente después de descargarlo. Primero, se recomienda crear una carpeta llamada «development» en tus documentos. Es allí donde colocarás tu carpeta de Flutter, así como las aplicaciones que vas a crear. Solo entonces puedes descomprimir el archivo, ya sea haciendo doble clic sobre él o usando la terminal con el comando:
unzip flutter_macos_xxx-stable.zip.
Reemplaza xxx con la versión de Flutter que descargaste.

Este directorio puede ser creado abriendo la terminal (o consola de comandos) y escribiendo el comando:
mkdir “nombre_del_archivo”.
Luego puedes escribir:
nombre_del_archivo start
para abrir la nueva carpeta y mover allí el archivo de instalación de Flutter.

Una vez hecho esto, puedes ingresar la siguiente secuencia de comandos para asegurarte de que todo funcione correctamente:

cd "nombre_del_archivo_de_desarrollo"

cd "flutter"

cd "bin"

flutter doctor

Si estás usando Windows PowerShell, deberás agregar la sintaxis .\ antes de flutter doctor.

Importar los comandos de Flutter

Actualmente, puedes acceder a los comandos de Flutter solo si estás en la carpeta bin. El siguiente paso será importar estos comandos para que sean accesibles desde cualquier lugar en la terminal. Aquí están los pasos a seguir:

En la barra de búsqueda de Windows, empieza a buscar el término “entorno”. Debería aparecer un resultado como “Modificar las variables de entorno del sistema”.
En la parte inferior del cuadro de diálogo, haz clic en el botón “Variables de entorno”.
Ya habrá varias variables configuradas en la sección “Usuario”, y podrás hacer clic en “Nueva” y ingresar los siguientes valores:
- Nombre de la variable: PATH
- Valor de la variable: La ruta de tu carpeta bin, que puedes encontrar haciendo clic en “Examinar directorio”.
Haz clic en “Aceptar” para validar los cambios y cierra la ventana.
Cierra la terminal si aún no lo has hecho, luego ábrela de nuevo e ingresa el comando flutter doctor. Si el mensaje se muestra correctamente, significa que tu variable ha sido exportada correctamente.

No te preocupes si no todas las casillas están marcadas en verde, aún quedan varias cosas por configurar para empezar a programar tu aplicación. Pero la buena noticia es que Flutter ya está instalado correctamente en tu máquina.

Instalar el entorno de iOS

Si estás en una PC con Windows, no podrás instalar Xcode a menos que lo hagas en un emulador.

Xcode es la herramienta que te permitirá desarrollar tus aplicaciones para iOS. De hecho, es esta plataforma la que convertirá tu código escrito en Dart en un código nativo comprensible para los iPhones.

El primer paso es instalar Xcode desde la App Store. Una vez hecho esto, solo queda configurarlo para poder usarlo con Flutter. El objetivo de este paso es que no tengas que usar Xcode directamente para programar en iOS y puedas hacerlo todo desde Visual Studio.

Configurar Xcode

La configuración de Xcode con Flutter es muy sencilla, ya que solo necesitas ingresar estas dos líneas en la terminal:

sudo sh -c 'xcode-select -s /Applications/Xcode.app/Contents/Developer && xcodebuild -runFirstLaunch'

sudo xcodebuild -license

Configurar el simulador de iOS

Es totalmente posible probar tus aplicaciones para iOS en un dispositivo físico. Sin embargo, la forma más sencilla y rápida es hacerlo en una máquina virtual que imita el comportamiento de un dispositivo físico.

El simulador se puede instalar fácilmente ingresando este comando en la terminal:

xcodebuild -downloadPlatform iOS

Luego puedes lanzar un simulador, ya sea desde Xcode, o usando el siguiente comando:

open -a Simulator

Este comando te permite abrir cualquier teléfono que ejecute iOS, así como iPads y Macs. Esto te permitirá probar tu aplicación en diferentes tamaños de pantalla y versiones del sistema operativo.

Descargar Cocoapods

Para que tu aplicación Flutter funcione en iOS, es muy importante descargar Cocoapods, que es un gestor de dependencias. Sirve para sincronizar las diferentes librerías que hayas utilizado en tu aplicación y asegurarse de que todo funcione correctamente.

Puedes descargarlo muy fácilmente ingresando este comando en la terminal:

sudo gem install cocoapods

Una vez hecho esto, habrás terminado de configurar el entorno de iOS y podrás crear una aplicación Flutter y lanzarla en un simulador de iPhone.

Instalar el entorno de Android

Al igual que iOS con Xcode, Android tiene su propia plataforma de desarrollo, Android Studio. Para instalar este SDK, puedes ir directamente al sitio web de Android y descargar la última versión disponible.

¿Cómo saber si mi Mac tiene un chip Intel o un chip Apple?

Para saber qué tipo de chip utiliza tu Mac, simplemente ve a «Acerca de este Mac». El tipo de chip que usas estará indicado en la configuración.

Una vez que el archivo esté descargado, puedes hacer clic sobre él para abrirlo e iniciar la instalación de Android Studio siguiendo las indicaciones en pantalla.

Configurar los simuladores de Android

Para crear simuladores de Android y probar tus aplicaciones, dirígete a la página de inicio de Android Studio, donde podrás hacer clic en More Actions.

Primero, haz clic en “SDK Manager” para terminar de configurar tu simulador y poder usarlo sin tener que pasar siempre por Android Studio:

Selecciona una versión del sistema operativo (idealmente la última).
En SDK Tools, asegúrate de que los siguientes elementos estén marcados:
- Android SDK Build-Tools
- Android SDK Command-line Tools
- Android Emulator
- Android SDK Platform Tools
Haz clic en «OK» para instalar.

Crear simuladores de Android

Para probar el funcionamiento de nuestra aplicación, será necesario crear una máquina virtual (VM) que reproduzca el comportamiento de nuestro teléfono o computadora. Esta máquina compilará nuestro código y lo hará funcionar como en un dispositivo real, lo que nos permitirá observar el resultado en tiempo real.

Para crear un simulador, regresa al menú More Actions y haz clic en “Virtual Device Manager”. Solo tendrás que elegir el tipo de dispositivo que deseas crear, así como la versión de Android en la que funcionará. Una vez hecho esto, el dispositivo se instalará y podrás usarlo desde tu editor de código para probar tu aplicación.

Instalar Visual Studio

Si has llegado a este paso, ya has instalado los diferentes SDK de Flutter, iOS y Android, por lo que ya puedes empezar a codificar tu aplicación en Xcode y Android Studio.

Pero uno de los beneficios de Flutter es poder codificar para múltiples plataformas con un solo código. Por esta razón, nos queda descargar el editor de texto Visual Studio, donde reuniremos todos nuestros archivos y escribiremos el código de nuestra aplicación.

Configurar para Mac

Una vez descargada la versión para Mac de Visual Studio, abre la aplicación para instalar los módulos propuestos y aplicar tus preferencias. Luego, en el menú de extensiones (ícono con 4 cuadros), busca la extensión Flutter e instálala. Flutter ya está listo para funcionar en tu Mac y podrás empezar a codificar tu aplicación.

Configurar para PC

Si no lo has hecho aún, comienza por instalar Google Chrome, ya que será necesario para el correcto funcionamiento de Flutter en PC. Luego, ve al sitio de Visual Studio Code para instalar la aplicación.

Una vez instalada, abre la aplicación para instalar los módulos propuestos y aplicar tus preferencias. Luego, en el menú de extensiones (ícono con 4 cuadros), busca la extensión Flutter e instálala. Flutter ya está listo para funcionar en tu PC y podrás comenzar a codificar tu aplicación.

Conclusión

Ahora que el SDK de Flutter está instalado y tienes todo lo que necesitas para comenzar a codificar una aplicación, es hora de entrar en materia. En el siguiente artículo, te presentaré los conceptos:

De variables;
De operadores;
De condiciones;
Y de bucles.

Estos conceptos son importantes de entender, ya que son la base de todos los lenguajes de programación, no solo de Flutter. También nos serán útiles para crear los diferentes elementos de nuestra aplicación (widgets) y las interacciones.

Las bases de Flutter: Introducción a las variables →