Tras la lección anterior, confío en que ya tienes configurado el entorno de desarrollo de Flutter. En esta clase, vamos a desarrollar Flutter usando Android Studio.
Instalar el complemento de Flutter
De forma predeterminada, Android Studio no soporta Flutter, así que debes instalar su complemento correspondiente.
Abre Android Studio y accede al menú superior File → Settings (atajo de teclado Ctrl+Alt+S)
Busca la sección Plugins en el panel izquierdo, busca «flutter», pulsa Instalar y reinicia Android Studio cuando termine la instalación.
Configurar la ruta del SDK de Flutter
No basta con instalar el complemento: también tienes que indicar la ruta del SDK de Flutter dentro de Android Studio.
File → Settings → Languages & Frameworks → Flutter
Archivo Configuración Idiomas y marcos flutter
Selecciona la carpeta raíz de Flutter, no la subcarpeta bin. Después pulsa el botón Apply.
Espera a que termine la instalación y la configuración completa.
Crear un proyecto
A partir de aquí, el procedimiento es igual al de crear un proyecto normal en Android Studio.
Selecciona Flutter, vuelve a indicar la carpeta de Flutter a la derecha y pulsa Next.
Ahora configura el nombre del proyecto, su ruta de almacenamiento, descripción y un identificador de organización único. Este identificador debe ser único si vas a publicar la app en Google Play Store, por eso se recomienda escribir tu dominio al revés. Por ejemplo, yo uso com.foxdevelop.nombreproyecto. Luego selecciona el lenguaje base de Android: no es el lenguaje de desarrollo, sino el lenguaje de la envoltura nativa de la app Android, el desarrollo real se hace en Dart. En el apartado Platforms elige los sistemas donde compilarás y publicarás tu código. En este ejemplo marqué Android, Web y Windows Desktop para lanzar el proyecto en esas versiones; si quieres publicar para iOS, Linux o macOS, marca las otras tres opciones. Finalmente pulsa Create.
Aviso: El nombre del proyecto solo debe usar minúsculas, sin espacios ni caracteres especiales.
Android Studio empezará a crear el proyecto, este proceso puede tardar unos minutos.
En mi caso me apareció este error.
Pulsa Run Flutter Doctor para ejecutar la herramienta de diagnóstico y revisar el entorno.
Después abre el proyecto normalmente.
Sin embargo, en la esquina superior derecha no se puede ejecutar el proyecto y aparece el siguiente aviso:
Cambié el tema de colores, por eso Android Studio está en modo claro ahora.
En la captura anterior verás una X roja, haz clic sobre ella.
Pulsa Editar Configuraciones (Edit Configurations).
Aparecerá un aviso indicando que el SDK de Dart no está configurado, pulsa Fix a la derecha.
Tienes que configurar la ruta del SDK de Dart: si instalaste Flutter, el SDK de Dart se encuentra dentro de la carpeta del SDK de Flutter.
Si tu ruta del SDK de Flutter es:
entonces la ruta del SDK de Dart será:
Configura la ruta de Dart como se ve en la imagen superior y recuerda reiniciar Android Studio.
Después verás el triángulo verde de ejecución en la parte superior. Si a la izquierda aparece Windows Desktop, podrás ejecutar el proyecto como aplicación de escritorio Windows; pulsa el triángulo verde para lanzarlo.
* Solución de errores comunes
Si no te aparecen los problemas que se muestran a continuación, puedes saltarte este apartado.
Estos errores aparecen cuando las dependencias no terminan de cargarse. Si el fallo se debe a problemas de red, puedes usar un proxy o configurar un servidor espejo.
Si te ocurren estos errores, sigue la captura anterior para configurar el espejo en la terminal de Android Studio.
$env:PUB_HOSTED_URL="https://pub.flutter-io.cn"
$env:FLUTTER_STORAGE_BASE_URL="https://storage.flutter-io.cn"
flutter pub cache repair
flutter pub getLenguaje del código: PHP (php)Al ejecutar estos comandos, todos los errores desaparecerán.
Ejecutar el proyecto
Pulsa el triángulo de la esquina superior izquierda para ejecutar el proyecto. Flutter soporta múltiples plataformas: puedes conectar tu móvil al PC, activar el modo desarrollador para depurar la app Android o usar Windows Desktop para probar sin dispositivo móvil.
Como se ve en la imagen, puedes elegir una de las tres plataformas que seleccionaste al crear el proyecto. Aquí elijo Windows Desktop y luego pulso el triángulo verde para ejecutar el proyecto.
La imagen superior muestra nuestra primera aplicación Flutter. Con esto finaliza la lección, puedes practicarlo por tu cuenta. Si tienes cualquier duda o error, deja un comentario abajo.
Crear un proyecto Flutter con Android Studio