Flutter Instalación

Software necesario

• El software mínimo para poder desarrollar aplicaciones en FLUTTER sería:

• Android SDK
• Flutter SDK (ya incluye DART)
• Algún IDE con la posibilidad de instalar el plugin Flutter/Dart (como VSCode, Eclipse, Android Studio,...)
• Algún emulador para probar las aplicaciones (como Genymotion,Android Studio,...)

• Flutter puede instalarse en cualquier S.O.

Imagen obtenida de este enlace

Podéis elegir el S.O. sobre el cual vais a realizar la instalación en este enlace:https://flutter.dev/docs/get-started/install

Este curso va a emplearse Windows 11, necesitaremos el Android Studio para la creación de dispositivos virtuales empleando el SDK Manager y como IDE vamos a emplear VS Code, pero se puede emplear cualquiera de los IDE's disponibles. De todas formas, si hacéis uso de otro IDE necesitáis descargar igual el Android Studio para poder ejecutar las aplicaciones Android en emuladores.

• Indicar que DART no es necesario instalarlo separadamente ya que viene dentro del FLUTTER SDK.

Si lo tuvierais instalado previamente, debéis comprobar que sea compatible con la versión de FLUTTER descargada. En caso de que no lo sea, debéis poner en el PATH primero la ruta al bin de DART en FLUTTER y después la ruta a vuestro DART (viene explicado a continuación como cambiar la variable de entorno PATH).

• Lo que se va a instalar:

• Android Studio

• Android SDK
• Emuladores

• Flutter

• Flutter SDK
• Dart SDK

• VS Code

• Complemento de Flutter
• Complemento de Flutter snipets

Android Studio

Imagen obtenido de este sitio

• No tenéis más que descargar el Android Studio e instalarlo con las opciones por defecto.

Podéis seguir el proceso de instalación de forma detallada en este enlace (lenguaje Gallego).

Ejecuta el Android Studio una vez instalado.

Al hacerlo ejecutará un asistente con el que se descargará:

• Android SDK
• Android SDK Command-line Tools
• Android SDK Build-Tools

Flutter SDK

• Como está indicado en el enlace anterior, previamente tiene que estar instalado:

• Windows PowerShell 5.0: Viene preinstalado con el Windows 10.
• Git para Windows: Necesario si se quieren instalar actualizaciones o cambiar de canal, que viene a ser diferentes 'ramas' de donde se obtienen nuevas versiones de Flutter. También lo va a usar VS Code para crear un proyecto de Flutter basaso en una plantilla.

• Como comenté anteriormente, dentro del SDK de Flutter también se descarga el Dart SDK.

• Instalación Flutter SDK
• 

  Descargamos la versión estable más reciente desde este enlace: https://flutter.dev/docs/development/tools/sdk/releases

• 

  Una vez descargado descomprimimos el archivo en cualquier directorio que no requiera privilegios elevados (como C:\Program files), es decir, que Windows pida permisos para descomprimirlo en el directorio. Yo aconsejo descomprimirlo en 'C:\aplicaciones\flutter' por ejemplo, o si el ordenador va a estar compartido por diferentes usuarios y no se quiere que el resto de usuarios tenga acceso a flutter, se podría instalar en C:\users\usuario_windows\flutter (por ejemplo).

• 

  Ahora necesitamos cambiar la variable de entorno PATH. Podemos hacelro a nivel de sistema (para todos los usuarios) o a nivel de usuario (sólo se aplica al usuario actual). Podéis consultar en este enlace cómo cambiar dicha variable. En mi caso, he descomprimido el SDK en un directorio creado previamente por mí, en C:\Aplicaciones y he cambiado la variable PATH a nivel de sistema. Tenemos que añadir la ruta: C:\directorio descomprimido SDK\flutter\bin.

• 

  Una vez hecho esto debemos de cerrar la consola MS-DOS si la tenemos abierta y volver a abrirla. Para ello tecleamos CMD en la caja de búsqueda de windows 10.

• 

  Ya en la consola, ejecutamos la orde flutter doctor. Al hacerlo chequeará si todo el software necesario está descargado. Si no fuera el caso, aparecerán en la parte baja los problemas (issues) encontrados y como solucionarlos.

• 

  Si al instalar el Android Studio cambiasteis la ruta de instalación del SDK, flutter no lo encontrará y tendréis que indicárselo con la orden: flutter config --android-sdk ruta_SDK. Por ejemplo, en clase, el SDK está instalado en la ruta C:\SDK para que no se instale por cada uno de los alumnos que hagan uso de los ordenadores. Por lo tanto, tendría que indicarlo: flutter config --android-sdk C:\SDK. Si aparece cualquier otro error, flutter suele mostrar la sentencia a ejecutar para arreglarlo.

Errores de Flutter Doctor

Al ajecutar el comando flutter doctor pueden aparecer diferentes errores. La mayoría se solucionan siguiendo los pasos indicados, pero indico aquí los más comunes:

• Unable to locate Android SDK: Este error es debido a que el SDK de Android no está instalado en el path por defecto. Para saber cual es el path (lo debimos especificar al instalar el Android Studio) podéis consultar este enlace. Una vez sabemos donde se encuentra, debemos ejecutar desde consola la orden flutter config --android-sdk C:\SDK (suponiendo que el SDK esté instalado en el path C:\SDK). Si tuviéramos abierto el Android Studio (o cualquier otro editor) tendríamos que cerralo para que cogiera el cambio de path.

• java not found: JDK de Java no instalado: Probar a poner en la variable de entorno PATH, la ruta al jdk que se instala con el AndroidStudio (C:\Program Files\Android\Android Studio\jre\bin). Sino funciona, instalar el JDK => https://www.oracle.com/es/java/technologies/javase-downloads.html

• cmdline-tools component is missing: Iniciar el Android Studio, [acceder al SDK Manager y en la pestaña SDK Tools marcar la opción Android SDK Command Line.

• Android license status unknown: A partir del 2026 se cambió la forma de aceptar las licencias de Android dependiendo de la versión de la Android SDK Command-line Tools de Android SDK descargada (lo podéis comprobar en el SDK Manager del Android Studio).

• Si la versión es 22 o 20: Ejecutar desde consola => flutter doctor --android-licenses
• Si tenéis una versión superior, podéis desinstalarla y descargar la version anterior (la 22) o aceptar las licencias desde una herramienta que se encuentra en el Android SDK: Ruta el ANDROID_SDK\cmdline-tools\latest\bin\android sdk licenses

• Visual Studio is missing necessary components: Acceder al Visual Studio Installer (programa de Windows), modificar el Visual Studio instalado (aparece en una lista desplegable al lado del nombre y versión del visual studio) e instalar los componentes indicados. Un ejemplo:

Upgrade Version

• Más información en: https://docs.flutter.dev/development/tools/sdk/upgrading

• Para actualizar la versión de Flutter y la versión del Dart SDK, sólo tenemos que abrir una ventana de consola y escribir la orden:

flutter upgrade

Plugin Flutter-Dart en ANDROID STUDIO

• Una vez instalado el Android Studio, debemos de instalar el plugin que nos va a permitir desarrollar aplicaciones Flutter dentro de este IDE (y también el plugin Dart). A partir del curso 2024-2025 vamos a usar VS Code para el desarrollo de aplicaciones, pero quien quiera usar este IDE puede hacerlo.

Podéis consultar en este enlace como hacerlo en los diferentes S.O.

• Instalación plugin Flutter-Dart
• 

  Iniciamos Android Studio y presionamos en la parte baja la opción Configure. Si tenéis un proyecto abierto podéis acceder a través del menú superior: File > Settings > Plugins

• 

  En el parte izquierda escogemos la opción Plugins.

• 

  En los primeros puestos debería estar el plugin FLUTTER. En caso de que no aparezca podréis buscarlo en la caja de texto superior.

• 

  Presionamos una vez Aceptar y aparecerá una ventana en la que se nos informa que se va a instalar el plugin DART. Aceptaremos nuevamente.

• 

  Será necesario reiniciar el IDE.

• 

  Cuando empecemos a programar veremos que el código 'base' de cada pantalla y ciertas funciones, va a ser el mismo. Para no tener que teclearlo todo, podemos hacer uso de los snippets (trozos de código que se añaden a nuestro programa). Instalamos algún plugin que nos permite emplearlos, como el que se encuentra en la imagen. Será necesario reiniciar o IDE una vez instalado. Podéis consultar en este enlace lo que tenéis que teclear para que aparezca el snippet.

Plugin Flutter-Dart en VSCode

NOTA IMPORTANTE: VSCode hace uso de git para crear nuevos proyectos Flutter usando plantillas de proyectos.

Para que funcione git es necesario desde una consola de git (previamente instalado) ejecutar este código:

setx GIT_CONFIG_GLOBAL "%USERPROFILE%\.gitconfig"
git config --global --add safe.directory C:/FlutterSDK/flutter
git var -l

Siendo C:/FlutterSDK/flutter el path donde se tiene instalado el FlutterSDK

Nota: La segunda línea solo es necesario si estáis en clase con la unidad de red al servidor.

• El proceso para instalar lo necesario para crear proyectos Flutter es el siguiente:

• Instalación Flutter en VSCode
• 

  Una vez iniciado VSCode nos situamos en las extensiones, buscamos por Flutter e instalamos el plugin indicado en la imagen.

• 

  Una vez instalado podemos instalar (no es obligatorio para que funcione) el plugin de snippets. Un snippet nos permite asociar una palabra a un bloque de código predefinido (plantilla). De esta forma nos ahorra el teclear código. UNA VEZ INSTALADOS, CERRAR EL VSCODE Y VOLVER A ABRIRLO.

• 

  Si ahora abrís la paleta (Control+Shift+P) y escribís flutter os aparecerá la opción de crear un nuevo proyecto Flutter. Al hacerlo os aparecerá en la parte baja una botón para localizar el Flutter SDK si no es capaz de encontrarlo. Podéis presionar Locate y escoger el directorio donde tengáis instalado el Flutter SDK. Otra forma de hacer lo mismo es ir a Settings.

• 

  Buscáis por Flutter SDK y presionamos en settings.json

• 

  Escribimos la ruta al Flutter SDK. PONER DOBLE BARRA SI ESTÁIS EN WINDOWS COMO SEPARACIÓN DE DIRECTORIOS

Actualización de Flutter en VS Code

• Flutter está en constante desarrollo.

Cada poco tiempo actualizan la versión incorporando nuevas funcionalidades.

Para actualizar la versión debemos de ejecutar la orden flutter upgrade desde la consola o terminal estando situados en el directorio raíz del proyecto.

• Actualización Flutter en Android Studio
• 

  Pulsamos en el menú superior Terminal => New Terminal y en la parte inferior y escribimos la orden flutter upgrade. Se nos informará que versión de flutter se va a instalar.

• 

  Una vez descargada debemos de instalar los paquetes con la orden flutter pub get la cual podemos escribirla en la consola o pulsar directamente en la opción que aparece en la parte superior que pone 'Get dependencies'.

Actualización del nombre del paquete

• Cuando se crea un proyecto nuevo en VSCode, sólo podemos dar el nombre de la aplicación. VSCode establece como nombre del paquete de la misma: 'com.example.nombre_aplicación'.

Si queremos cambiar dicho nombre, podemos hacerlo de dos forma:

• Manualmente

• Manualmente en Android:

Abre android/app/build.gradle.

Busca la sección defaultConfig y pon el identificador:

defaultConfig {
    applicationId "es.cifprodolfo.miapp"
    minSdkVersion 21
    targetSdkVersion 34
    versionCode 1
    versionName "1.0"
}

Tienes que cambiar el nombre de los directorios android/app/src/main/kotlin/com/example/miapp/MainActivity.kt => android/app/src/main/kotlin/es/cifprodolfo/miapp/MainActivity.kt

Dentro del archivo MainActivity.kt tienes que cambiar la definición del paquete: package es.cifprodolfo.miapp

• Manualmente en IOS:

Abre ios/Runner.xcodeproj o ios/Runner.xcworkspace en Xcode.

Cambia el Bundle Identifier: Selecciona el target Runner → pestaña General → Bundle Identifier → es.cifprodo.miapp.

Guarda los cambios. Flutter sincronizará automáticamente al compilar.

• En VSCode, empleando el paquete: https://pub.dev/packages/change_app_package_name

Actualización de Flutter en Android Studio

• Flutter está en constante desarrollo.

Cada poco tiempo actualizan la versión incorporando nuevas funcionalidades.

Para actualizar la versión debemos de ejecutar la orden flutter upgrade desde la consola o terminal estando situados en el directorio raíz del proyecto.

• Actualización Flutter en Android Studio
• 

  Pulsamos en la pestaña terminal en la parte inferior y escribimos la orden flutter upgrade. Se nos informará que versión de flutter se va a instalar.

• 

  Una vez descargada debemos de instalar los paquetes con la orden flutter pub get la cual podemos escribirla en la consola o pulsar directamente en la opción que aparece en la parte superior que pone 'Get dependencies'.

• 

  Podemos conseguir lo mismo desde la opción de menú Tools => Flutter.

Habilitando plataformas

• Cuando creamos un proyecto en VS Code nos pregunta para que plataformas se va a crear.

Podemos habilitar a nivel global (no de proyecto) que plataformas están disponibles:

# Ver qué plataformas tienes habilitadas globalmente
flutter doctor

# Habilitar una plataforma específica (ejemplos)
flutter config --enable-web
flutter config --enable-windows-desktop
flutter config --enable-macos-desktop
flutter config --enable-linux-desktop

Recreando las carpetas de las diferentes plataformas

• En un proyecto Flutter podéis observar como tenéis una carpeta por cada una de las plataformas de destino:

• android
• ios
• web
• linux
• windows

Si alguna vez las borráis por cualquier razón, podéis volver a crearla desde un Terminal, estando situados en el directorio del proyecto y tecleáis: flutter create .

Si queréis agregar una carpeta de una plataforma en concreto: flutter create --platforms=web .

Enlace a la página principal de la UD1

Enlace a la página principal del curso

-- Ángel D. Fernández González -- (2021).