En esta sección, aprenderás a configurar tu entorno de desarrollo para comenzar a trabajar con Flutter. Este proceso incluye la instalación de Flutter SDK, la configuración de un editor de código y la verificación de que todo esté funcionando correctamente.

Requisitos Previos

Antes de comenzar, asegúrate de tener lo siguiente:

  • Una computadora con Windows, macOS o Linux.
  • Conexión a Internet.
  • Conocimientos básicos de programación (recomendado).

Paso 1: Instalación de Flutter SDK

1.1 Descarga de Flutter SDK

  1. Visita la página oficial de Flutter: flutter.dev.
  2. Navega a la sección de descargas y selecciona el sistema operativo de tu computadora (Windows, macOS, Linux).
  3. Descarga el archivo comprimido del SDK de Flutter.

1.2 Instalación en Windows

  1. Extrae el archivo comprimido en una ubicación de tu elección (por ejemplo, C:\src\flutter).
  2. Añade Flutter a la variable de entorno PATH:
    • Abre el Panel de Control y navega a Sistema y Seguridad > Sistema > Configuración avanzada del sistema.
    • Haz clic en Variables de entorno.
    • En la sección Variables del sistema, encuentra la variable Path y haz clic en Editar.
    • Añade la ruta donde extrajiste Flutter (por ejemplo, C:\src\flutter\bin).

1.3 Instalación en macOS

  1. Extrae el archivo comprimido en una ubicación de tu elección (por ejemplo, ~/development/flutter).
  2. Añade Flutter a la variable de entorno PATH:
    • Abre la Terminal.
    • Abre el archivo de configuración del shell (.bashrc, .zshrc, etc.) en un editor de texto.
    • Añade la siguiente línea al final del archivo:
      export PATH="$PATH:`pwd`/flutter/bin"
      
    • Guarda el archivo y ejecuta source ~/.bashrc o source ~/.zshrc para aplicar los cambios.

1.4 Instalación en Linux

  1. Extrae el archivo comprimido en una ubicación de tu elección (por ejemplo, ~/development/flutter).
  2. Añade Flutter a la variable de entorno PATH:
    • Abre la Terminal.
    • Abre el archivo de configuración del shell (.bashrc, .zshrc, etc.) en un editor de texto.
    • Añade la siguiente línea al final del archivo:
      export PATH="$PATH:`pwd`/flutter/bin"
      
    • Guarda el archivo y ejecuta source ~/.bashrc o source ~/.zshrc para aplicar los cambios.

Paso 2: Instalación de un Editor de Código

2.1 Visual Studio Code (VS Code)

  1. Descarga e instala Visual Studio Code desde code.visualstudio.com.
  2. Abre VS Code y navega a la sección de extensiones (icono de cuadrados en la barra lateral izquierda).
  3. Busca e instala las siguientes extensiones:
    • Flutter: Proporciona soporte para Flutter.
    • Dart: Proporciona soporte para el lenguaje Dart.

2.2 Android Studio

  1. Descarga e instala Android Studio desde developer.android.com/studio.
  2. Abre Android Studio y sigue las instrucciones para instalar el SDK de Android.
  3. Navega a File > Settings > Plugins y busca e instala los plugins de Flutter y Dart.

Paso 3: Verificación de la Instalación

  1. Abre una terminal o línea de comandos.
  2. Ejecuta el siguiente comando para verificar la instalación de Flutter:
    flutter doctor
    
  3. Este comando verificará la instalación de Flutter y mostrará un informe del estado de tu entorno de desarrollo. Asegúrate de que todos los elementos estén marcados como [✓].

Ejemplo de Salida de flutter doctor

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.5.3, on macOS 11.6 20G165 darwin-x64, locale en-US)
[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 13.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2020.3)
[✓] VS Code (version 1.61.2)
[✓] Connected device (2 available)

Ejercicio Práctico

Ejercicio 1: Verificación de la Instalación

  1. Abre una terminal o línea de comandos.
  2. Ejecuta el comando flutter doctor.
  3. Asegúrate de que todos los elementos estén marcados como [✓].

Solución

Si encuentras algún problema, el comando flutter doctor te proporcionará sugerencias para resolverlo. Por ejemplo, si falta el SDK de Android, el comando te indicará cómo instalarlo.

Conclusión

En esta sección, has aprendido a configurar tu entorno de desarrollo para trabajar con Flutter. Has instalado el SDK de Flutter, configurado un editor de código y verificado que todo esté funcionando correctamente. Ahora estás listo para crear tu primera aplicación con Flutter en la siguiente sección.

Curso de Desarrollo con Flutter

Módulo 1: Introducción a Flutter

Módulo 2: Conceptos Básicos de Programación en Dart

Módulo 3: Widgets en Flutter

Módulo 4: Gestión de Estado

Módulo 5: Navegación y Enrutamiento

Módulo 6: Redes y APIs

Módulo 7: Persistencia y Almacenamiento

Módulo 8: Conceptos Avanzados de Flutter

Módulo 9: Pruebas y Depuración

Módulo 10: Despliegue y Mantenimiento

Módulo 11: Flutter para Web y Escritorio

© Copyright 2024. Todos los derechos reservados