Introducción e instalación - Flutter Tutorial

Flutter es un framework desarrollado por Google, basado en el lenguaje propio de la empresa, Dart. Permite crear aplicaciones para web, iOS, Android, Linux, Windows e incluso dispositivos embebidos con una única base de código. Frameworks similares son MAUI de Microsoft y NativePHP para PHP.

Flutter es además de código abierto y sirve para crear aplicaciones multiplataforma elegantes compiladas de forma nativa desde una única base de código. Actualmente muchos desarrolladores lo utilizan para crear aplicaciones Android.

Flutter genera código nativo, por lo que los programas desarrollados con él son difíciles de descompilar. Compila a código máquina ARM o Intel, además de JavaScript, para ofrecer un rendimiento rápido en cualquier dispositivo.

Es compatible con aplicaciones móviles, web, de escritorio y embebidas.

Google ha integrado sus propios servicios en Flutter, para usarlos sin fricciones

Se conecta al ecosistema de desarrollo de aplicaciones de Google. Gracias a la integración perfecta con Firebase, Google Ads, Google Play, Google Pay, Google Wallet, Google Maps y otros servicios, simplifica el flujo de desarrollo y permite llegar a una audiencia más amplia.

Flutter utiliza el lenguaje Dart, un lenguaje optimizado para crear aplicaciones rápidas en cualquier plataforma.

Aquí está el sitio web oficial de Flutter: Flutter – Crea aplicaciones para cualquier pantalla

Instalación

Flutter se puede ejecutar en múltiples sistemas operativos, todos los que se muestran a continuación admiten el desarrollo con Flutter.

Este curso usa Windows.

Para instalar el entorno de desarrollo de Flutter, primero debes instalar algunas herramientas prerequisito.

Instalar Git para Windows

Puedes descargarlo desde el sitio oficial de Git: Git – Instalar para Windows

Mi equipo es un Intel de 64 bits, así que instalo esta versión: Git for Windows/x64 Setup.

La instalación de Git es sencilla, casi igual a la de cualquier otro programa. Básicamente solo tienes que pulsar «Siguiente» en todos los pasos.

Descargar e instalar Visual Studio Code

Flutter es compatible con VS Code y también con Android Studio; elige la herramienta de desarrollo según tus preferencias. Yo suelo usar Android Studio, así que este curso se basa en él. Puedes descargar la última versión desde el sitio oficial de Android Studio: https://developer.android.com/studio

Instalación de Flutter

Hasta ahora solo hemos instalado las herramientas prerequisito. Ahora toca instalar Flutter propiamente dicho. Flutter es un framework, y debes instalarlo primero para desarrollar sobre él. Si usas VS Code para programar, consulta otros tutoriales: VS Code incluye una función para instalar Flutter directamente, puedes instalar Flutter desde VS Code.

Instalar Flutter y Dart en VS Code es similar a instalar cualquier otra extensión: busca Flutter y Dart en el panel de extensiones.

Para añadir las extensiones Dart y Flutter en VS Code, visita la página de la extensión Flutter en el Marketplace y pulsa Instalar. Si el navegador lo solicita, permite que abra VS Code. Consulta también la guía oficial: Configurar y probar Flutter

Sin embargo, como yo no uso VS Code en este curso, realizaremos la instalación manual.

Instalación manual de Flutter

La instalación manual se basa en este artículo oficial: https://docs.flutter.dev/install/manual

Abre el enlace anterior y selecciona la versión correspondiente a tu sistema; yo uso Windows.

Luego pulsa el botón de descarga para obtener el archivo.

Después de descargar, descomprime el archivo en un directorio cuya ruta no contenga espacios ni caracteres especiales. Se recomienda una ruta sencilla como C:\flutter

El contenido del directorio será similar a esto:

A continuación copia la ruta del directorio bin: C:\flutter\bin y agrégala a la variable de entorno Path.

En el menú Inicio, busca «variables de entorno».

Luego añade la ruta del directorio bin a Path.

Instalar Dart

Después de instalar Flutter, debes instalar Dart. Abre la terminal y ejecuta el siguiente comando:

flutter doctor

Al ejecutarlo, descargará automáticamente el SDK de Dart.

C:\Users\Jack>flutter doctor
Checking Dart SDK version...
Downloading Dart SDK from Flutter engine ...
Expanding downloaded archive with PowerShell...Lenguaje del código: JavaScript (javascript)

Luego verifica que la instalación sea correcta. Abre CMD y ejecuta el comando siguiente.

Nota: En algunos países la descarga puede fallar, por lo que debes configurar un proxy o espejo. Abre CMD/PowerShell y ejecuta estos comandos en orden:

set PUB_HOSTED_URL=https://pub.flutter-io.cn
set FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
flutter doctorLenguaje del código: JavaScript (javascript)

El último comando flutter doctor revisa todo el entorno de Flutter. La palabra «doctor» significa médico, es como un chequeo completo de tu instalación de Flutter.

Por ejemplo, este es el resultado de mi comprobación:

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.44.2, on Microsoft Windows [ 10.0.19044.7417], locale zh-CN)
[√] Windows Version (10 IoT LTSC 64 bits, 21H2, 2009)
[X] Android toolchain - develop for Android devices
    X Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/to/windows-android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.

[X] Chrome - develop for the web (Cannot find Chrome executable at .\Google\Chrome\Application\chrome.exe)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.9.1)
[√] Connected device (2 available)
[!] Network resources
    X An HTTP error occurred while checking "https://github.com/": tiempo de espera agotado

! Doctor found issues in 3 categorías.Lenguaje del código: JavaScript (javascript)

Las marcas X indican componentes no instalados correctamente. Por ejemplo, si no tienes la herramienta de Android instalada, no podrás compilar aplicaciones para Android; si no tienes Chrome, no podrás depurar la versión web. En el siguiente paso instalaremos Android Studio. En cuanto a Chrome, puedes descargarlo e instalarlo. Si solo vas a desarrollar aplicaciones de escritorio para Windows, no necesitas instalar ninguno de los dos.

Falta el SDK de Android (no se puede compilar para Android)

No se detecta Chrome (no se puede ejecutar la versión web)

Enlace de descarga de Chrome: Google Chrome – Descarga el navegador rápido y seguro de Google

Instalar Android Studio

La última versión que descargué es android-studio-quail1-patch1-windows.exe, solo tienes que hacer doble clic para instalarla.

Básicamente, solo tienes que pulsar «Siguiente» en todos los pasos.

Después de instalarlo, al abrirlo también solo hay que pulsar «Siguiente» en todo el asistente.

Una vez terminada la instalación, ya puedes crear proyectos con Android Studio.

Ahora abre CMD otra vez y ejecuta flutter doctor para volver a comprobar el entorno.

[!] Android toolchain - develop for Android devices (Android SDK version 36.1.0)
    X cmdline-tools component is missing.
      Try installing or updating Android Studio.
      Alternatively, download the tools from https://developer.android.com/studio#command-line-tools-only and make sure
      to set the ANDROID_HOME environment variable.
      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.
      See https://flutter.dev/to/windows-android-setup for more details.Lenguaje del código: PHP (php)

Abre Android Studio → Archivo → Configuración → Apariencia y Comportamiento → Configuración del Sistema → Android SDK

Cambia a la pestaña SDK Tools y marca:

Android SDK Command-line Tools (latest)

Luego pulsa Aplicar y espera a que se descarguen e instalen los componentes.

Vuelve a ejecutar flutter doctor

[!] Android toolchain - develop for Android devices (Android SDK version 36.1.0)
    ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licensesLenguaje del código: CSS (css)

Este error indica que no has aceptado las licencias de Android.

Licencias de Android no aceptadas (Some Android licenses not accepted)

Ejecuta el siguiente comando en CMD:

flutter doctor --android-licenses

Luego escribe y en todas las preguntas para aceptar.

Después vuelve a ejecutar flutter doctor en la consola.

C:\Users\Jack>flutter doctor
Flutter assets will be downloaded from https://storage.flutter-io.cn. Make sure you trust this source!
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.44.2, on Microsoft Windows [versión 10.0.19044.7417], locale zh-CN)
[√] Windows Version (10 IoT Empresarial LTSC 64 bits, 21H2, 2009)
[√] Android toolchain - develop for Android devices (Android SDK version 36.1.0)
[√] Chrome - develop for the web
[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.9.1)
[√] Connected device (3 available)
[√] Network resources

• No issues found!Lenguaje del código: JavaScript (javascript)

Muy bien, hasta aquí hemos terminado la instalación básica de Flutter. En la próxima clase crearemos nuestro primer proyecto de ejemplo.