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
- Visita la página oficial de Flutter: flutter.dev.
- Navega a la sección de descargas y selecciona el sistema operativo de tu computadora (Windows, macOS, Linux).
- Descarga el archivo comprimido del SDK de Flutter.
1.2 Instalación en Windows
- Extrae el archivo comprimido en una ubicación de tu elección (por ejemplo,
C:\src\flutter
). - 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
- Extrae el archivo comprimido en una ubicación de tu elección (por ejemplo,
~/development/flutter
). - 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
osource ~/.zshrc
para aplicar los cambios.
1.4 Instalación en Linux
- Extrae el archivo comprimido en una ubicación de tu elección (por ejemplo,
~/development/flutter
). - 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
osource ~/.zshrc
para aplicar los cambios.
Paso 2: Instalación de un Editor de Código
2.1 Visual Studio Code (VS Code)
- Descarga e instala Visual Studio Code desde code.visualstudio.com.
- Abre VS Code y navega a la sección de extensiones (icono de cuadrados en la barra lateral izquierda).
- Busca e instala las siguientes extensiones:
- Flutter: Proporciona soporte para Flutter.
- Dart: Proporciona soporte para el lenguaje Dart.
2.2 Android Studio
- Descarga e instala Android Studio desde developer.android.com/studio.
- Abre Android Studio y sigue las instrucciones para instalar el SDK de Android.
- Navega a File > Settings > Plugins y busca e instala los plugins de Flutter y Dart.
Paso 3: Verificación de la Instalación
- Abre una terminal o línea de comandos.
- Ejecuta el siguiente comando para verificar la instalación de Flutter:
flutter doctor
- 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
- Abre una terminal o línea de comandos.
- Ejecuta el comando
flutter doctor
. - 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
- ¿Qué es Flutter?
- Configuración del Entorno de Desarrollo
- Entendiendo la Arquitectura de Flutter
- Creando Tu Primera App con Flutter
Módulo 2: Conceptos Básicos de Programación en Dart
- Introducción a Dart
- Variables y Tipos de Datos
- Sentencias de Control de Flujo
- Funciones y Métodos
- Programación Orientada a Objetos en Dart
Módulo 3: Widgets en Flutter
- Introducción a los Widgets
- Widgets Stateless vs Stateful
- Widgets Básicos
- Widgets de Diseño
- Widgets de Entrada y Formularios
Módulo 4: Gestión de Estado
Módulo 5: Navegación y Enrutamiento
- Introducción a la Navegación
- Navegación Básica
- Rutas Nombradas
- Pasando Datos Entre Pantallas
- Deep Linking
Módulo 6: Redes y APIs
- Obteniendo Datos de Internet
- Parseo de Datos JSON
- Manejo de Errores de Red
- Usando APIs REST
- Integración con GraphQL
Módulo 7: Persistencia y Almacenamiento
- Introducción a la Persistencia
- Preferencias Compartidas
- Almacenamiento de Archivos
- Base de Datos SQLite
- Usando Hive para Almacenamiento Local
Módulo 8: Conceptos Avanzados de Flutter
- Animaciones en Flutter
- Custom Paint y Canvas
- Canales de Plataforma
- Isolates y Concurrencia
- Optimización de Rendimiento
Módulo 9: Pruebas y Depuración
- Introducción a las Pruebas
- Pruebas Unitarias
- Pruebas de Widgets
- Pruebas de Integración
- Técnicas de Depuración
Módulo 10: Despliegue y Mantenimiento
- Preparación para el Lanzamiento
- Construcción para iOS
- Construcción para Android
- Integración Continua/Despliegue Continuo (CI/CD)
- Mantenimiento y Actualización de Tu App