Tutorial Flutter y Dart - Instalación y Configuración

¿Qué son Flutter y Dart?

Flutter es un SDK de código abierto desarrollado por Google para crear aplicaciones nativas compiladas para móvil, web y escritorio desde una única base de código.

Dart es el lenguaje de programación utilizado por Flutter, optimizado para aplicaciones UI de alto rendimiento.

Instalación de Flutter SDK

Paso 1: Descargar Flutter SDK

Visita la página oficial de Flutter y descarga el SDK para tu sistema operativo.

Windows: flutter_windows_3.x.x-stable.zip
macOS: flutter_macos_3.x.x-stable.zip
Linux: flutter_linux_3.x.x-stable.tar.xz

Paso 2: Extraer el archivo

Extrae el contenido del archivo descargado en una ubicación permanente:

C:\flutter\  (Windows)

/Users/tu_usuario/flutter/  (macOS)

/home/tu_usuario/flutter/  (Linux)

Paso 3: Configurar variables de entorno

Agrega la ruta del directorio bin de Flutter a tu PATH del sistema.

Paso 4: Verificar instalación

Ejecuta flutter doctor en la terminal para verificar que todo esté correcto.

Instalación de Dart SDK

Método 1: Con Flutter (Recomendado)

El Dart SDK viene incluido con Flutter. No necesitas instalarlo por separado.

flutter/bin/cache/dart-sdk/

Método 2: Instalación independiente

Si necesitas Dart sin Flutter, descárgalo desde dart.dev.

Verificar versión de Dart

# Verificar versión de Dart incluida con Flutter
flutter --version

# O directamente con dart
dart --version

Configuración de Variables de Entorno

¿Por qué configurar el PATH?

Al agregar el directorio bin al PATH, puedes ejecutar los comandos flutter y dart desde cualquier ubicación en la terminal.

Rutas importantes a agregar:

Flutter: [ruta_donde_extraiste_flutter]/flutter/bin
Dart: [ruta_donde_extraiste_flutter]/flutter/bin/cache/dart-sdk/bin

Configuración en Windows

Paso 1: Abrir variables de entorno

Presiona Windows + R, escribe sysdm.cpl y presiona Enter
Haz clic en "Variables de entorno"
En "Variables del sistema", busca "Path" y haz clic en "Editar"

Paso 2: Agregar rutas de Flutter

Haz clic en "Nuevo" y agrega las siguientes rutas:

Rutas para Windows:

C:\flutter\bin
C:\flutter\bin\cache\dart-sdk\bin

Paso 3: Verificar instalación

Abre una nueva terminal y ejecuta:

flutter --version
dart --version

Configuración en macOS

Paso 1: Editar el archivo de perfil

Abre Terminal y edita tu archivo de perfil según tu shell:

Para bash (macOS anterior a Catalina):

nano ~/.bash_profile

Para zsh (macOS Catalina y posteriores):

nano ~/.zshrc

Paso 2: Agregar rutas al PATH

Agrega estas líneas al final del archivo:

export PATH="$PATH:/Users/tu_usuario/flutter/bin"
export PATH="$PATH:/Users/tu_usuario/flutter/bin/cache/dart-sdk/bin"

Paso 3: Aplicar cambios

# Para bash
source ~/.bash_profile

# Para zsh
source ~/.zshrc

Configuración en Linux

Paso 1: Editar el archivo de perfil

Abre Terminal y edita tu archivo de perfil:

Para la mayoría de distribuciones:

nano ~/.bashrc

Paso 2: Agregar rutas al PATH

Agrega estas líneas al final del archivo:

export PATH="$PATH:/home/tu_usuario/flutter/bin"
export PATH="$PATH:/home/tu_usuario/flutter/bin/cache/dart-sdk/bin"

Paso 3: Aplicar cambios

source ~/.bashrc

Verificación de la Instalación

Comando flutter doctor

Ejecuta flutter doctor para verificar que todo esté configurado correctamente:

flutter doctor

Salida esperada:

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.x.x, on macOS 13.0 22A380 darwin-x64, locale es-ES)
[✓] Android toolchain - develop for Android devices
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio
[✓] VS Code
[✓] Connected device
[✓] Network resources

Comandos de verificación adicionales

# Verificar Flutter
flutter --version

# Verificar Dart
dart --version

# Verificar ubicación de Flutter
which flutter

# Verificar ubicación de Dart
which dart

Configuración en VS Code

Extensiones esenciales para Flutter

Flutter - Soporte oficial para desarrollo con Flutter
Dart - Soporte para el lenguaje Dart
Awesome Flutter Snippets - Snippets útiles
Flutter Widget Snippets - Snippets para widgets

Configuración de settings.json

Configuración recomendada:

{
    "dart.flutterSdkPath": "/Users/tu_usuario/flutter",
    "dart.checkForSdkUpdates": true,
    "dart.lineLength": 80,
    "flutter.createOrganization": "com.tudominio",
    "dart.debugExternalLibraries": true
}

Solución de Problemas Comunes

Comando no encontrado

Si al ejecutar flutter o dart obtienes "command not found":

Verifica que las rutas en el PATH sean correctas
Asegúrate de haber reiniciado la terminal
En Windows, verifica que no haya espacios en las rutas

Problemas de permisos

En macOS y Linux, puede que necesites dar permisos de ejecución:

chmod +x flutter/bin/flutter
chmod +x flutter/bin/cache/dart-sdk/bin/dart

flutter doctor muestra errores

Problemas comunes y soluciones

Android Studio no detectado

Si flutter doctor no detecta Android Studio:

# Especificar la ruta de Android Studio
flutter config --android-studio-dir="/Applications/Android Studio.app/Contents"

Licencias de Android no aceptadas

Para aceptar las licencias de Android:

flutter doctor --android-licenses

Xcode no configurado (macOS)

Para configurar Xcode:

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

Problemas de conexión

Si hay problemas para descargar recursos:

# Usar mirror en China (si es necesario)
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

# O forzar la descarga
flutter precache

Primera Aplicación Flutter

1. Crear nuevo proyecto

flutter create mi_primer_app
cd mi_primer_app

2. Ejecutar la aplicación

flutter run

3. Abrir en VS Code

code .

4. Construir para release

flutter build apk          # Android
flutter build ios          # iOS
flutter build web          # Web
flutter build windows      # Windows

Iniciar Sesión

Recuperar contraseña

Crear Cuenta

¿Qué son Flutter y Dart?

Instalación de Flutter SDK

Paso 1: Descargar Flutter SDK

Paso 2: Extraer el archivo

Paso 3: Configurar variables de entorno

Paso 4: Verificar instalación

Instalación de Dart SDK

Método 1: Con Flutter (Recomendado)

Método 2: Instalación independiente

Verificar versión de Dart

Configuración de Variables de Entorno

¿Por qué configurar el PATH?

Rutas importantes a agregar:

Configuración en Windows

Paso 1: Abrir variables de entorno

Paso 2: Agregar rutas de Flutter

Rutas para Windows:

Paso 3: Verificar instalación

Configuración en macOS

Paso 1: Editar el archivo de perfil

Para bash (macOS anterior a Catalina):

Para zsh (macOS Catalina y posteriores):

Paso 2: Agregar rutas al PATH

Paso 3: Aplicar cambios

Configuración en Linux

Paso 1: Editar el archivo de perfil

Para la mayoría de distribuciones:

Paso 2: Agregar rutas al PATH

Paso 3: Aplicar cambios

Verificación de la Instalación

Comando flutter doctor

Salida esperada:

Comandos de verificación adicionales

Configuración en VS Code

Extensiones esenciales para Flutter

Configuración de settings.json

Configuración recomendada:

Solución de Problemas Comunes

Comando no encontrado

Problemas de permisos

flutter doctor muestra errores

Problemas comunes y soluciones

Android Studio no detectado

Licencias de Android no aceptadas

Xcode no configurado (macOS)

Problemas de conexión

Primera Aplicación Flutter

1. Crear nuevo proyecto

2. Ejecutar la aplicación

3. Abrir en VS Code

4. Construir para release

Recursos Adicionales

📚 Documentación Oficial

🎓 Tutoriales

👨‍💻 Comunidad