Configurá tu Entorno Flutter: De Cero a Tu Primera App Multiplataforma (Android Studio o VS Code)

Introducción: ¡Despegando con Flutter!

¡Che, qué bueno que te sumás a la movida de Flutter! Si llegaste hasta acá, seguramente tenés ganas de meterle mano a una de las tecnologías más calientes para el desarrollo móvil y web (y de escritorio, ¡eh!). Flutter, el framework de UI de Google, te permite construir aplicaciones nativas y visualmente atractivas desde una única base de código. Olvidate de programar por separado para Android y para iOS; con Flutter, escribís el código una vez y lo desplegás en múltiples plataformas. ¿No es genial?

Este tutorial está pensado para vos, seas un desarrollador con experiencia en otras plataformas o alguien que recién arranca en el mundo de la programación y quiere sumergirse de cabeza en el desarrollo de aplicaciones. Vas a encontrar una guía paso a paso para configurar tu entorno de desarrollo, ya sea que prefieras la potencia de Android Studio o la ligereza de Visual Studio Code. Al final de este recorrido, no solo vas a tener Flutter listo para rockear en tu máquina, sino que también vas a poder crear y ejecutar tu primera aplicación.

Preparate para aprender a:

• Instalar y configurar el SDK de Flutter en tu sistema operativo.
• Usar flutter doctor para verificar que todo esté en orden.
• Configurar el entorno de desarrollo de Android (incluyendo el SDK y emuladores).
• Integrar Flutter en tu IDE preferido: Android Studio o Visual Studio Code.
• Crear y correr tu primera aplicación de Flutter.

Así que, sin más preámbulos, ¡ponete cómodo y arranquemos a armar tu taller de desarrollo Flutter!

Preparativos: Requisitos y Herramientas Necesarias

Antes de zambullirnos en la instalación, asegurate de tener cubiertos estos puntos. No te preocupes, la mayoría son cosas básicas:

• Sistema Operativo: Flutter es compatible con Windows, macOS y Linux. Este tutorial cubrirá las configuraciones más comunes para cada uno.
• Conexión a Internet: Vas a necesitarla para descargar el SDK de Flutter, Android Studio, las dependencias y los plugins.
• Espacio en Disco: Asegurate de tener al menos unos 10-15 GB libres. El SDK de Android y Flutter, junto con tu IDE, pueden ocupar bastante espacio.
• Git: Es probable que ya lo tengas instalado, pero si no, Flutter lo necesita. Podés descargarlo de git-scm.com.

Paso 1: Instalando el SDK de Flutter

Lo primero es lo primero: necesitamos el corazón de Flutter, su SDK (Software Development Kit). Este kit contiene todas las herramientas que vas a necesitar para compilar tus apps.

1.1. Descargá el SDK de Flutter

Andá a la página oficial de Flutter y descargá la versión más reciente del SDK para tu sistema operativo. Buscá la sección de instalación y elegí el archivo .zip (Windows) o .tar.xz (macOS/Linux).

1.2. Extraé el Archivo

Una vez descargado, extraé el contenido del archivo comprimido en una ubicación de tu preferencia. Importante: Evitá rutas con caracteres especiales o espacios si estás en Windows (ej. C:\Program Files\Flutter). Una buena práctica es crear una carpeta src o development en la raíz de tu disco y ponerlo ahí, por ejemplo:

• Windows: C:\src\flutter
• macOS/Linux: ~/development/flutter o /opt/flutter

Después de extraer, la estructura de la carpeta flutter debería contener subcarpetas como bin, packages, examples, etc.

1.3. Configurá la Variable de Entorno PATH

Este es un paso crucial. Necesitamos que tu sistema operativo sepa dónde encontrar los comandos de Flutter (flutter, dart, etc.) sin importar desde qué directorio estés trabajando en la terminal. Esto se hace añadiendo la ruta de la carpeta bin del SDK de Flutter a tu variable de entorno PATH.

En Windows:

1. Buscá "Editar las variables de entorno del sistema" en el menú de inicio.
2. Hacé clic en el botón "Variables de entorno...".
3. En la sección "Variables del sistema", buscá la variable Path y seleccionala.
4. Hacé clic en "Editar...".
5. Hacé clic en "Nueva" y agregá la ruta completa a la carpeta bin dentro de tu instalación de Flutter (ej. C:\src\flutter\bin).
6. Hacé clic en "Aceptar" en todas las ventanas para guardar los cambios.

Alternativa (línea de comandos) para la sesión actual:

set PATH=%PATH%;C:\src\flutter\bin

Para que sea persistente (similar a la interfaz gráfica):

setx PATH "%PATH%;C:\src\flutter\bin"

Tené en cuenta que setx puede truncar el PATH si es demasiado largo. La opción de la interfaz gráfica es más segura si no estás familiarizado con las longitudes de las variables de entorno.

En macOS o Linux:

1. Abrí tu terminal preferida.
2. Editá tu archivo de configuración de shell. Dependiendo de tu shell, puede ser ~/.bashrc, ~/.bash_profile o ~/.zshrc (si usás Zsh, que es el predeterminado en macOS Catalina y posteriores).

   nano ~/.zshrc # o ~/.bashrc

3. Agregá la siguiente línea al final del archivo, reemplazando /path/to/flutter con la ruta real donde extrajiste Flutter:

   export PATH="$PATH:/path/to/flutter/bin"

   Por ejemplo, si lo pusiste en ~/development/flutter:

   export PATH="$PATH:$HOME/development/flutter/bin"

4. Guardá el archivo (Ctrl+X, Y, Enter en nano).
5. Aplicá los cambios reiniciando tu terminal o ejecutando:

   source ~/.zshrc # o source ~/.bashrc

1.4. Verificá la Instalación de Flutter

Ahora que la variable PATH está configurada, abrí una nueva terminal (¡es importante que sea una nueva para que reconozca los cambios!) y ejecutá el siguiente comando:

flutter --version

Deberías ver una salida similar a esta (los números de versión pueden variar):

Flutter 3.X.X • channel stable • https://github.com/flutter/flutter.git
Framework • revision XXXXXXXXXX (X weeks ago) • 202X-XX-XX XX:XX:XX -XXXX
Engine • revision XXXXXXXXXX
Tools • Dart 2.X.X • DevTools 2.X.X

Si ves esto, ¡felicitaciones! Flutter está instalado y tu sistema lo puede encontrar. Si tenés un error como "flutter no se reconoce como un comando interno o externo", revisá la configuración de tu PATH.

Paso 2: La Primera Verificación con flutter doctor

flutter doctor es tu mejor amigo en el mundo Flutter. Es una herramienta de línea de comandos que examina tu sistema y te informa sobre cualquier dependencia faltante o configuración incorrecta que pueda impedir que desarrolles tus apps. Ejecutalo justo después de instalar el SDK:

flutter doctor

La salida inicial probablemente se vea así (no te asustes si ves [X] o [!], ¡para eso estamos acá!):

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.X.X, on Microsoft Windows [Version 10.0.19045.3930], locale es-AR)
[X] Android toolchain - develop for Android devices
    X cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    X Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
[X] Chrome - develop for the web
    X Chrome not installed; download at https://www.google.com/chrome/
[X] Visual Studio - develop Windows apps
    X Visual Studio not installed; download at https://visualstudio.microsoft.com/downloads/
[!] Android Studio (version 2023.1.1.28)
    X Flutter plugin not installed; install from Android Studio
    X Dart plugin not installed; install from Android Studio
[!] VS Code (version 1.86.1)
    X Flutter extension not installed; install from VS Code marketplace
[!] Connected device
    ! No devices available

! Doctor found issues in 7 categories.

Cada línea marcada con [X] indica un problema que necesitás resolver, y [!] indica una advertencia o una configuración opcional que podrías querer revisar. Nuestro objetivo es tener la mayor cantidad posible de [√] (tildes verdes) para lo que vamos a usar (Flutter, Android toolchain, y tu IDE).

Vamos a enfocarnos en resolver los problemas relacionados con la "Android toolchain" y tu IDE.

Paso 3: Configurando el Entorno de Desarrollo Android

Para desarrollar aplicaciones Android, Flutter necesita acceder al SDK de Android, que a su vez requiere Java y otras herramientas. La forma más fácil de obtener todo esto es instalando Android Studio.

3.1. Instalación de Android Studio

1. Andá a la página oficial de Android Studio y descargá la versión más reciente para tu sistema operativo.
2. Ejecutá el instalador. La mayoría de las veces, podés aceptar las opciones predeterminadas.
3. Durante la instalación, asegurate de que las opciones "Android SDK" y "Android Virtual Device" estén seleccionadas (suelen estarlo por defecto).
4. Una vez instalado, abrilo por primera vez. Puede que te pida importar configuraciones anteriores o hacer una configuración inicial. Seguí los pasos del "Setup Wizard" para descargar los componentes iniciales del SDK.

3.2. Componentes del SDK de Android

Aunque Android Studio instala algunos componentes, es posible que flutter doctor te pida otros específicos.

1. Dentro de Android Studio, andá a File > Settings (Windows/Linux) o Android Studio > Preferences (macOS).
2. En el panel izquierdo, navegá a Appearance & Behavior > System Settings > Android SDK.
3. En la pestaña "SDK Platforms", asegurate de tener al menos una versión del "Android SDK Platform" instalada (ej. Android API 34 o la más reciente).
4. Andá a la pestaña "SDK Tools". Asegurate de que los siguientes componentes estén marcados para su instalación:
   • Android SDK Build-Tools (la última versión).
   • Android SDK Command-line Tools (latest).
   • Android SDK Platform-Tools.
   • Google USB Driver (solo en Windows, si pensás usar dispositivos físicos).
5. Hacé clic en "Apply" o "OK" para que Android Studio descargue e instale los componentes que seleccionaste.

3.3. Variables de Entorno de Android

Flutter necesita saber dónde está instalado tu SDK de Android. Aunque Android Studio suele configurarlo automáticamente, a veces es necesario hacerlo manualmente, especialmente si flutter doctor sigue quejándose.

1. Encontrá la Ruta del SDK: Dentro de Android Studio, en la misma sección Android SDK de Settings/Preferences, vas a ver "Android SDK Location". Copiá esa ruta (ej. C:\Users\TuUsuario\AppData\Local\Android\sdk o ~/Library/Android/sdk).

2. Configurá ANDROID_HOME o ANDROID_SDK_ROOT:

   • Windows: Creá una nueva variable de entorno de sistema llamada ANDROID_HOME (o ANDROID_SDK_ROOT) y pegá la ruta que copiaste. También, agregá %ANDROID_HOME%\platform-tools a la variable Path existente.
   • macOS/Linux: Abrí tu archivo ~/.zshrc o ~/.bashrc y agregá las siguientes líneas (reemplazando la ruta si es diferente):

     export ANDROID_HOME=$HOME/Library/Android/sdk # Para macOS
     # export ANDROID_HOME=/opt/android-sdk # O tu ruta en Linux
     export PATH=$PATH:$ANDROID_HOME/cmdline-tools/latest/bin
     export PATH=$PATH:$ANDROID_HOME/platform-tools

     No olvides ejecutar source ~/.zshrc (o el archivo que editaste) después de guardar.

3.4. Aceptá las Licencias de Android

Este es un error común que flutter doctor suele señalar. Tenés que aceptar las licencias del SDK de Android para poder desarrollar.

Abrí tu terminal y ejecutá:

flutter doctor --android-licenses

Te va a preguntar si querés aceptar varias licencias. Escribí y y presioná Enter para cada una hasta que termine. Deberías ver un mensaje como "All SDK package licenses accepted".

3.5. Configurá un Emulador Android (AVD)

Para probar tus aplicaciones sin un dispositivo físico, vas a necesitar un emulador. Android Studio te facilita la creación de uno.

1. Abrí Android Studio.
2. Andá a Tools > Device Manager (o AVD Manager en versiones anteriores).
3. Hacé clic en "Create device".
4. Elegí una definición de hardware (ej. "Pixel 8"). Hacé clic en "Next".
5. Seleccioná una imagen de sistema (ej. la última versión "API Level 34 (Upside Down Cake)"). Si no la tenés descargada, hacé clic en "Download" primero.
6. Hacé clic en "Next", dale un nombre a tu AVD si querés y finalizá la configuración.
7. Una vez creado, podés iniciarlo haciendo clic en el botón de "Play" (triángulo verde) al lado de tu AVD en el Device Manager.

Volvé a ejecutar flutter doctor después de todos estos pasos. Deberías ver muchas más tildes verdes, ¡especialmente en la parte de Android toolchain y Android Studio!

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.X.X, on Microsoft Windows [Version 10.0.19045.3930], locale es-AR)
[√] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[√] Chrome - develop for the web (version 12X.0.XXXX.XXX)
[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.X.X)
[√] Android Studio (version 2023.1.1.28)
[!] VS Code (version 1.86.1)
    X Flutter extension not installed; install from VS Code marketplace
[√] Connected device (1 available)
    • sdk gphone64 x86 64 (mobile) • emulator-5554 • android-x64 • Android 14 (API 34)

! Doctor found issues in 1 category.

¡Genial! Ya casi estamos. Ahora, a configurar tu IDE.

Paso 4: Preparando tu IDE Preferido

Flutter se lleva de maravilla tanto con Android Studio como con Visual Studio Code. Elegí el que más te guste o te resulte más cómodo.

Opción A: Configurar Android Studio para Flutter

Si elegís Android Studio, el proceso es muy sencillo:

1. Abrí Android Studio.
2. Andá a File > Settings (Windows/Linux) o Android Studio > Preferences (macOS).
3. En el panel izquierdo, navegá a Plugins.
4. En la pestaña "Marketplace", buscá "Flutter".
5. Hacé clic en "Install". Te va a preguntar si también querés instalar el plugin de Dart; aceptá, ya que Flutter lo necesita.
6. Reiniciá Android Studio cuando te lo pida.

Una vez reiniciado, vas a ver nuevas opciones en la pantalla de inicio, como "New Flutter Project". ¡Eso significa que los plugins se instalaron correctamente!

Opción B: Configurar Visual Studio Code para Flutter

Si preferís la ligereza y versatilidad de VS Code, seguí estos pasos:

1. Abrí Visual Studio Code.
2. Andá a la vista de "Extensions" (el icono de los cuadrados en la barra lateral izquierda o presioná Ctrl+Shift+X / Cmd+Shift+X).
3. Buscá "Flutter".
4. Hacé clic en "Install" en la extensión de Flutter de "Dart Code". Esto instalará automáticamente la extensión de Dart también, ya que es una dependencia.

Una vez instaladas, podés verificar abriendo la paleta de comandos (Ctrl+Shift+P / Cmd+Shift+P) y escribiendo "Flutter: New Project". Si ves esa opción, ¡estás listo!

Paso 5: ¡Tu Primera App de Flutter!

¡Llegó el momento de la verdad! Vamos a crear un proyecto de prueba para asegurarnos de que todo funcione como debe ser.

5.1. Creando un Nuevo Proyecto Flutter

Podés hacerlo desde la terminal o desde tu IDE.

Desde la Terminal:

1. Abrí tu terminal en el directorio donde quieras guardar tus proyectos.
2. Ejecutá el siguiente comando:

   flutter create my_first_app

   Esto creará una carpeta my_first_app con una plantilla de proyecto básico de Flutter.
3. Navegá al directorio del proyecto:

   cd my_first_app

Desde Android Studio:

1. En la pantalla de bienvenida, seleccioná "New Flutter Project".
2. Asegurate de que "Flutter" esté seleccionado en el panel izquierdo.
3. Verificá que la "Flutter SDK path" sea correcta.
4. Hacé clic en "Next".
5. Ingresá un nombre para tu proyecto (ej. my_first_app) y verificá la "Project location".
6. Hacé clic en "Finish".

Desde Visual Studio Code:

1. Abrí la paleta de comandos (Ctrl+Shift+P / Cmd+Shift+P).
2. Escribí "Flutter: New Project" y seleccioná la opción.
3. Elegí "Application".
4. Seleccioná la carpeta donde querés crear el proyecto.
5. Ingresá un nombre para el proyecto (ej. my_first_app) y presioná Enter.

5.2. Ejecutando tu Aplicación

Ahora, con el proyecto creado, vamos a ejecutarlo. Necesitás tener un dispositivo conectado o un emulador/simulador corriendo.

1. Iniciá un Emulador/Simulador: Si no tenés un dispositivo físico, asegurate de que tu emulador de Android esté iniciado (desde Android Studio, Device Manager) o que tu simulador de iOS esté listo (solo macOS, desde Xcode).

2. Verificá los Dispositivos: En tu terminal (dentro del directorio del proyecto), ejecutá:

   flutter devices

   Deberías ver tu emulador o dispositivo físico listado. Si no, revisá tu conexión USB o la configuración del emulador.

3. Ejecutá la App:

   Desde la Terminal:

   flutter run

   Esto compilará y desplegará la app en el dispositivo detectado. Si tenés varios, podés especificar uno con flutter run -d <device_id>.

   Desde Android Studio:

   • En la barra de herramientas superior, seleccioná tu emulador o dispositivo de la lista desplegable de dispositivos.
   • Hacé clic en el botón "Run" (el triángulo verde).

   Desde Visual Studio Code:

   • En la barra de estado inferior derecha, hacé clic en "No Device Selected" (o el nombre de tu dispositivo actual) para elegir el emulador/dispositivo.
   • Andá a Run > Start Debugging (o presioná F5).

Después de unos momentos (la primera compilación puede tardar), deberías ver una aplicación de contador simple en tu emulador o dispositivo. ¡Felicitaciones! ¡Acabás de correr tu primera aplicación Flutter!

# Ejemplo de cómo se vería un bloque de código ejecutable si tuvieras uno aquí.
# En este caso, simplemente muestra un mensaje para ilustrar el punto.
print("¡Tu app Flutter está corriendo!")
print("Presioná 'r' en la consola para Hot Reload, 'R' para Hot Restart.")

Hot Reload y Hot Restart

Una de las mejores características de Flutter es su desarrollo rápido con Hot Reload. Hacé un cambio en el archivo lib/main.dart (por ejemplo, cambiá el texto de un Text widget) y guardá el archivo. En la terminal donde flutter run está ejecutándose, presioná r.

¡Magia! Los cambios aparecen casi instantáneamente en tu app sin perder el estado. Si presionás R (mayúscula), se hará un Hot Restart, que reinicia la aplicación completamente.

Buenas Prácticas y Resolución de Problemas Comunes

Acá te dejo algunos tips y soluciones a problemas que suelen aparecer:

1. Mantené Flutter Actualizado

Flutter evoluciona rápidamente. Es una buena práctica mantener tu SDK actualizado:

flutter upgrade

Este comando descargará la última versión estable del SDK de Flutter y sus dependencias de Dart. Después de un upgrade, siempre es recomendable ejecutar flutter doctor de nuevo.

2. Problemas con flutter doctor

• Android SDK is missing o cmdline-tools component is missing: Revisa el Paso 3.2 y 3.3. Asegurate de que el Android SDK Command-line Tools (latest) esté instalado en Android Studio y que la variable ANDROID_HOME apunte a la ruta correcta del SDK.
• Android license status unknown: Volvé al Paso 3.4 y ejecutá flutter doctor --android-licenses.
• No devices available: Asegurate de que tu emulador esté corriendo. Si usás un dispositivo físico, activá la depuración USB en las "Opciones de desarrollador" de tu teléfono y verificá que los drivers USB estén instalados (especialmente en Windows).
• Plugins de IDE faltantes (Flutter plugin not installed): Andá a la sección de plugins/extensiones de tu IDE (Paso 4) e instalá los de Flutter y Dart.
• Problemas con JDK/Java Home: Android Studio instala su propia versión de JDK, así que si lo instalaste correctamente, no deberías tener problemas. Si aun así te los marca, asegurate de que ninguna variable de entorno JAVA_HOME esté apuntando a una instalación antigua o incorrecta. A veces, desinstalar Java completamente y dejar que Android Studio se encargue es la mejor opción.

3. Emuladores vs. Dispositivos Físicos

• Emuladores: Son excelentes para la mayoría de las tareas de desarrollo y depuración. Podés simular diferentes tamaños de pantalla y versiones de Android/iOS. Sin embargo, pueden ser lentos si tu máquina no tiene muchos recursos o no tenés virtualización habilitada.
• Dispositivos Físicos: Ofrecen el rendimiento más realista y te permiten probar características del hardware (cámara, GPS) que un emulador no siempre simula bien. Para conectar un Android, activá "Opciones de desarrollador" y "Depuración USB". Para iOS, necesitarás Xcode y una cuenta de desarrollador.

4. Desarrollo iOS (Solo para macOS)

Si estás en una Mac y querés apuntar a iOS, estos son los pasos adicionales:

1. Instalá Xcode: Descargalo desde la App Store. Es una descarga grande y tarda bastante. Una vez instalado, abrilo y aceptá las licencias.

   sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
   sudo xcodebuild -runFirstLaunch

2. Instalá las herramientas de línea de comandos de Xcode:

   sudo xcode-select --install

3. Instalá CocoaPods: Es un gestor de dependencias para proyectos iOS. Flutter lo necesita.

   sudo gem install cocoapods

4. Configurá un simulador iOS: Abrí Xcode, andá a Xcode > Open Developer Tool > Simulator.

Después de esto, flutter doctor debería mostrar tildes verdes para iOS también.

Conclusión: ¡Felicitaciones, Sos un Flutternauta!

¡Llegamos al final! Si seguiste todos los pasos, ahora tenés tu entorno de desarrollo Flutter completamente configurado y listo para crear aplicaciones espectaculares. Recorrimos desde la descarga del SDK hasta la ejecución de tu primera app, pasando por la configuración de Android Studio o Visual Studio Code y la resolución de problemas comunes. No fue un camino corto, pero la recompensa es grande: una base sólida para empezar a programar con Flutter.

Recordá que este es solo el primer paso. El mundo de Flutter es inmenso y fascinante. Te recomiendo que ahora sigas explorando:

• La documentación oficial de Flutter: Es excelente y está llena de ejemplos y guías.
• Cursos online: Hay muchísimos recursos para aprender Dart y Flutter a fondo.
• Proyectos pequeños: Empezá con proyectos simples para practicar los widgets, la gestión de estado y el consumo de APIs.
• La comunidad: ¡No dudes en buscar ayuda en foros, grupos de Telegram o Stack Overflow! La comunidad de Flutter es muy activa y amigable.

¡Así que ponete los auriculares, preparate unos mates y empezá a programar! ¡El límite es tu imaginación. ¡A darle con todo!