Android Studio e IntelliJ

• Android Studio e IntelliJ
• Visual Studio Code

Android Studio e IntelliJ IDEA ofrecen una experiencia completa de IDE una vez que instalas el plugin de Flutter.

Para instalar la versión más reciente de los siguientes IDEs, sigue sus instrucciones:

• Android Studio
• IntelliJ IDEA Community
• IntelliJ IDEA Ultimate

Las actualizaciones de los plugins se envían de forma regular. Se te debería avisar en el IDE cuando haya una actualización disponible.

Para buscar actualizaciones manualmente:

1. Abre las preferencias (Android Studio > Check for Updates en macOS, Help > Check for Updates en Linux).
2. Si dart o flutter aparecen listados, actualízalos.

Puedes crear un nuevo proyecto de varias formas.

Crear un nuevo proyecto de Flutter a partir de la plantilla de app inicial de Flutter difiere entre Android Studio e IntelliJ.

In Android Studio:

1. En el IDE, haz clic en New Flutter Project desde la ventana de Welcome o File > New > New Flutter Project desde la ventana principal del IDE.
2. Especifica la ruta del SDK de Flutter y haz clic en Next.
3. Ingresa el Project name, la Description y la Project location deseados.
4. Si es posible que publiques esta app, establece el dominio de la empresa.
5. Haz clic en Finish.

In IntelliJ:

1. En el IDE, haz clic en New Project desde la ventana de Welcome o File > New > Project desde la ventana principal del IDE.
2. Selecciona Flutter de la lista de Generators en el panel izquierdo
3. Especifica la ruta del SDK de Flutter y haz clic en Next.
4. Ingresa el Project name, la Description y la Project location deseados.
5. Si es posible que publiques esta app, establece el dominio de la empresa.
6. Haz clic en Finish.

Al crear una nueva aplicación, algunos plugins de IDE para Flutter solicitan un nombre de organización en orden de dominio inverso, algo como com.example. Junto con el nombre de la app, esto se utiliza como el nombre del paquete para Android y el Bundle ID para iOS cuando se lanza la aplicación. Si crees que alguna vez podrías lanzar esta app, es mejor especificarlos ahora. No se pueden cambiar una vez que la app está lanzada. El nombre de tu organización debe ser único.

Para abrir un proyecto de Flutter existente:

1. En el IDE, haz clic en Open desde la ventana de Welcome, o File > Open desde la ventana principal del IDE.

2. Navega hasta el directorio que contiene los archivos de código fuente de Flutter existentes.

3. Haz clic en Open.

El plugin de Flutter realiza un análisis de código que permite lo siguiente:

• Resaltado de sintaxis.
• Autocompletado de código basado en un análisis de tipos enriquecido.
• Navegar a declaraciones de tipos (Navigate > Declaration), y encontrar usos de tipos (Edit > Find > Find Usages).
• Ver todos los problemas actuales del código fuente (View > Tool Windows > Dart Analysis). Cualquier problema de análisis se muestra en el panel de Dart Analysis:
  

La ejecución y la depuración se controlan desde la barra de herramientas principal:

Cuando un proyecto de Flutter está abierto en el IDE, deberías ver un conjunto de botones específicos de Flutter en el lado derecho de la barra de herramientas.

1. Localiza el botón desplegable Flutter Target Selector. Esto muestra una lista de objetivos disponibles.
2. Selecciona el objetivo en el que deseas que se inicie tu app. A medida que conectas dispositivos o inicias simuladores, aparecerán entradas adicionales.

1. Haz clic en el icono de reproducción en la barra de herramientas, o invoca Run > Run. El panel inferior de Run muestra la salida de logs.

1. Si lo deseas, establece puntos de interrupción en tu código fuente.
2. Click the Debug icon in the toolbar, or invoke Run > Debug.
   • El panel inferior de Debugger muestra Stack Frames y Variables.
   • El panel inferior de Console muestra la salida detallada de logs.
   • La depuración se basa en una configuración de inicio predeterminada. Para personalizarla, haz clic en el botón desplegable a la derecha del selector de dispositivos y selecciona Edit configuration.

Flutter ofrece el mejor ciclo de desarrollo de su clase que te permite ver el efecto de tus cambios casi al instante con la función Stateful Hot Reload. Para obtener más información, consulta Hot reload.

Para ver los datos de rendimiento, incluida la información sobre la reconstrucción de widgets, inicia la app en modo Debug y luego abre la ventana de la herramienta Performance usando View > Tool Windows > Flutter Performance.

Para ver las estadísticas sobre qué widgets se están reconstruyendo y con qué frecuencia, haz clic en Show widget rebuild information en el panel de Performance. El recuento exacto de reconstrucciones para este frame se muestra en la segunda columna desde la derecha. Para un número elevado de reconstrucciones, se muestra un círculo giratorio amarillo. La columna de la extrema derecha muestra cuántas veces se reconstruyó un widget desde que se ingresó a la pantalla actual. Para los widgets que no se reconstruyen, se muestra un círculo gris sólido. De lo contrario, se muestra un círculo gris giratorio.

El propósito de esta función es hacerte consciente de cuándo se están reconstruyendo los widgets; es posible que no te des cuenta de que esto sucede simplemente mirando el código. Si los widgets se están reconstruyendo y no lo esperabas, probablemente sea una señal de que deberías refactorizar tu código dividiendo los métodos de construcción grandes en múltiples widgets.

Esta herramienta puede ayudarte a depurar al menos cuatro problemas comunes de rendimiento:

1. Toda la pantalla (o gran parte de ella) es construida por un solo StatefulWidget, lo que provoca la construcción innecesaria de la UI. Divide la UI en widgets más pequeños con funciones build() más pequeñas.

2. Los widgets fuera de pantalla se están reconstruyendo. Esto puede suceder, por ejemplo, cuando un ListView está anidado en una Column alta que se extiende fuera de la pantalla. O cuando el RepaintBoundary no está configurado para una lista que se extiende fuera de la pantalla, lo que hace que toda la lista se vuelva a dibujar.

3. La función build() para un AnimatedBuilder dibuja un subárbol que no necesita ser animado, lo que provoca reconstrucciones innecesarias de objetos estáticos.

4. Un widget Opacity se coloca innecesariamente alto en el árbol de widgets. O bien, se crea una animación Opacity manipulando directamente la propiedad opacity del widget Opacity, lo que hace que el widget en sí y su subárbol se reconstruyan.

Puedes hacer clic en una línea de la tabla para navegar a la línea del código fuente donde se crea el widget. A medida que se ejecuta el código, los iconos giratorios también se muestran en el panel de código para ayudarte a visualizar qué reconstrucciones están ocurriendo.

Ten en cuenta que numerosas reconstrucciones no indican necesariamente un problema. Por lo general, solo deberías preocuparte por reconstrucciones excesivas si ya ejecutaste la app en modo profile y verificaste que el rendimiento no es el que deseas.

Y recuerda, la información sobre la reconstrucción de widgets solo está disponible en una compilación de debug. Prueba el rendimiento de la app en un dispositivo real en una compilación de profile, pero depura los problemas de rendimiento en una compilación de debug.

Si tienes consejos adicionales que debamos compartir, ¡haznoslo saber!

Las asistencias son cambios de código relacionados con un determinado identificador de código. Varias de ellas están disponibles cuando el cursor se coloca sobre un identificador de widget de Flutter, como lo indica el icono de la bombilla amarilla. La asistencia se puede invocar haciendo clic en la bombilla o utilizando el atajo de teclado (Alt+Enter en Linux y Windows, Option+Return en macOS), como se ilustra aquí:

Las Soluciones Rápidas (Quick Fixes) son similares, solo que se muestran cuando una pieza de código tiene un error y pueden ayudar a corregirlo. Se indican con una bombilla roja.

Esto se puede usar cuando tienes un widget que deseas envolver en un widget circundante, por ejemplo, si deseas envolver un widget en una Row o Column.

Similar a la asistencia anterior, pero para envolver una lista existente de widgets en lugar de un widget individual.

Cambia un argumento child a un argumento children, y envuelve el valor del argumento en una lista.

Las plantillas en vivo (Live templates) se pueden usar para acelerar la entrada de estructuras de código típicas. Se invocan escribiendo su prefijo y luego seleccionándolo en la ventana de autocompletado de código:

El plugin de Flutter incluye las siguientes plantillas:

• Prefijo stless: Crea una nueva subclase de StatelessWidget.
• Prefijo stful: Crea una nueva subclase de StatefulWidget y su subclase State asociada.
• Prefijo stanim: Crea una nueva subclase de StatefulWidget y su subclase State asociada, incluido un campo inicializado con un AnimationController.

También puedes definir plantillas personalizadas en Settings > Editor > Live Templates.

Hot reload

En Linux (mapa de teclado Default for XWin) y Windows, los atajos de teclado son Control+Alt+; y Control+Backslash.

En macOS (mapa de teclado Mac OS X 10.5+ copy), los atajos de teclado son Command+Option y Command+Backslash.

Las asignaciones de teclado se pueden cambiar en las Preferencias/Configuración del IDE: Selecciona Keymap, luego ingresa flutter en el cuadro de búsqueda en la esquina superior derecha. Haz clic con el botón derecho en la combinación que deseas cambiar y haz clic en Add Keyboard Shortcut.

Hot reload funciona inyectando archivos de código fuente actualizados en la VM (Máquina Virtual) de Dart en ejecución. Esto incluye no solo agregar nuevas clases, sino también agregar métodos y campos a clases existentes, y cambiar funciones existentes. Sin embargo, algunos tipos de cambios de código no se pueden aplicar mediante Hot Reload:

• Inicializadores de variables globales
• Inicializadores de campos estáticos
• El método main() de la app

Para estos cambios, puedes reiniciar completamente tu aplicación, sin tener que finalizar tu sesión de depuración. Para realizar un Hot Restart, no hagas clic en el botón Stop, simplemente vuelve a hacer clic en el botón Run (si estás en una sesión de ejecución) o en el botón Debug (si estás en una sesión de depuración), o haz Shift+clic en el botón 'Hot Reload'.

Abrir el directorio raíz de un proyecto de Flutter no expone todos los archivos de Android al IDE. Las aplicaciones Flutter contienen un subdirectorio llamado android. Si abres este subdirectorio como su propio proyecto independiente en Android Studio, el IDE podrá admitir completamente la edición y refactorización de todos los archivos de Android (como los scripts de Gradle).

Si ya tienes todo el proyecto abierto como una aplicación Flutter en Android Studio, hay dos formas equivalentes de abrir los archivos de Android por su cuenta para editarlos en el IDE. Antes de intentar esto, asegúrate de estar en la última versión de Android Studio y los plugins de Flutter.

• En la "vista de proyecto", deberías ver un subdirectorio inmediatamente debajo de la raíz de tu aplicación flutter llamado android. Haz clic derecho en él, luego selecciona Flutter > Open Android module in Android Studio.
• O BIEN, puedes abrir cualquiera de los archivos debajo del subdirectorio android para editar. Deberías ver un banner de "Comandos de Flutter" en la parte superior del editor con un enlace etiquetado como Open for Editing in Android Studio. Haz clic en ese enlace.

Para ambas opciones, Android Studio te da la opción de usar ventanas separadas o reemplazar la ventana existente con el nuevo proyecto al abrir un segundo proyecto. Cualquiera de las dos opciones está bien.

Si aún no tienes el proyecto de Flutter abierto en Android Studio, puedes abrir los archivos de Android como su propio proyecto desde el principio:

1. Haz clic en Open an existing Android Studio Project en la pantalla de bienvenida, o en File > Open si Android Studio ya está abierto.
2. Abre el subdirectorio android inmediatamente debajo de la raíz de la app flutter. Por ejemplo, si el proyecto se llama flutter_app, abre flutter_app/android.

Si aún no has ejecutado tu app Flutter, es posible que veas que Android Studio informa un error de compilación cuando abres el proyecto android. Ejecuta flutter pub get en el directorio raíz de la app y vuelve a compilar el proyecto seleccionando Build > Make para solucionarlo.

Para habilitar la edición de código Android en IntelliJ IDEA, necesitas configurar la ubicación del SDK de Android:

1. En Preferences > Plugins, habilita Android Support si aún no lo has hecho.
2. Haz clic con el botón derecho en la carpeta android en la vista de Proyecto y selecciona Open Module Settings.
3. En la pestaña Sources, ubica el campo Language level y selecciona el nivel 8 o posterior.
4. En la pestaña Dependencies, ubica el campo Module SDK, y selecciona un SDK de Android. Si no aparece ningún SDK listado, haz clic en New y especifica la ubicación del SDK de Android. Asegúrate de seleccionar un SDK de Android que coincida con el utilizado por Flutter (según lo informado por flutter doctor).
5. Haz clic en OK.

El Flutter Property Editor es una potente herramienta proporcionada por el plugin de Flutter que te permite ver y modificar las propiedades de los widgets directamente desde su interfaz visual.

1. Haz clic en el icono del Flutter Property Editor en la barra lateral de Android Studio o IntelliJ.
2. El Flutter Property Editor se cargará en el panel lateral.
3. Consulta la documentación del Flutter Property Editor para obtener una guía detallada de uso.

Los problemas conocidos importantes que podrían afectar tu experiencia están documentados en el archivo README del plugin de Flutter.

Los errores conocidos y las solicitudes de funciones se rastrean en los rastreadores de problemas:

• Rastreador de problemas del plugin de Flutter
• Rastreador de problemas del plugin de Dart

Agradecemos los comentarios, tanto sobre errores/problemas como sobre solicitudes de funciones. Antes de presentar nuevos problemas:

• Haz una búsqueda rápida en los rastreadores de problemas para ver si el problema ya está siendo rastreado.
• Asegúrate de haber actualizado a la versión más reciente del plugin.

Al presentar nuevos problemas, incluye la salida de flutter doctor.