¿Cómo usar el inspector de DevTools con Flutter?

A continuación sigue la guía de uso sobre las herramientas de desarrollo para Flutter, en este caso vamos a conocer el inspector de las DevTools de Flutter.

¿Qué es el inspector de DevTools?

El inspector de widgets de Flutter es una herramienta poderosa para visualizar y explorar árboles de widgets de Flutter.

El framework Flutter usa widgets como el bloque de construcción central para cualquier cosa, desde controles (como texto, botones y conmutadores) hasta diseño (como centrado, relleno, filas y columnas). El inspector lo ayuda a visualizar y explorar árboles de widgets de Flutter y puede usarse para lo siguiente:

  • Comprender los diseños existentes
  • Diagnosticar problemas de diseño

Empezar con el Inspector de DevTools

Para depurar un problema de diseño, ejecute la aplicación en modo de depuración y abra el inspector haciendo clic en la pestaña Inspector Flutter en la barra de herramientas de DevTools.

Nota: Todavía puede acceder al inspector de Flutter directamente desde Android Studio / IntelliJ, pero es posible que prefiera la vista más espaciosa cuando lo ejecuta desde DevTools en un navegador. También tenga en cuenta que la interfaz de usuario para el inspector varía ligeramente entre estos entornos. Esta página describe la interfaz de usuario para la versión DevTools del inspector.

Depuración visual de problemas de diseño

La siguiente es una guía de las funciones disponibles en la barra de herramientas del inspector. Cuando el espacio es limitado, el icono se usa como la versión visual de la etiqueta.

  • Seleccionar modo de widget Seleccionar icono de modo de widget

Active este botón para seleccionar un widget en el dispositivo para inspeccionarlo. Para obtener más información, consulte Inspección de un widget.

  • Actualizar árbol Actualizar icono de árbol

Vuelva a cargar la información del widget actual.

  • Superposición de rendimiento Icono de superposición de rendimiento

Alternar la visualización de gráficos de rendimiento para los hilos de GPU y CPU. Para obtener más información sobre la interpretación de estos gráficos, consulte La superposición de rendimiento en el perfil de rendimiento de Flutter.

  • iOS Alternar icono de plataforma

Alternar los comportamientos de representación y gestos entre Android e iOS.

  • Pintura de depuración Icono de modo de pintura de depuración

Agregue sugerencias de depuración visual a la representación que muestre bordes, relleno, alineación y espaciadores.

  • Pintar líneas de base Icono de pintura de referencia

Haga que cada RenderBox dibuje una línea en cada una de sus líneas de base de texto.

  • Animaciones lentas Icono de animaciones lentas

Reduzca la velocidad de las animaciones para permitir la inspección visual.

  • Repintar Rainbow Repintar el icono del arco iris

Muestra colores rotativos en las capas al repintar.

  • Banner de modo de depuración Icono de banner de modo de depuración

Alterna la visualización del banner de depuración incluso cuando se ejecuta una compilación de depuración.

Inspeccionar un widget

Puede explorar el árbol de widgets interactivos para ver widgets cercanos y ver sus valores de campo.

Para ubicar elementos de IU individuales en el árbol de widgets, haga clic en el botón Seleccionar modo de widget en la barra de herramientas. Esto pone la aplicación en el dispositivo en un modo de “selección de widget”. Haga clic en cualquier widget en la interfaz de usuario de la aplicación; esto selecciona el widget en la pantalla de la aplicación y desplaza el árbol de widgets al nodo correspondiente. Mueva el botón Seleccionar modo de widget nuevamente para salir del modo de selección de widget.

Al depurar problemas de diseño, los campos clave a tener en cuenta son los campos size y constraints . Las restricciones fluyen hacia abajo del árbol, y los tamaños vuelven a subir.

Explorador de diseño de aleteo

Nota:

Esta función solo está disponible en la versión alfa de DevTools escrita en Flutter.

El explorador de diseño de Flutter le ayuda a comprender mejor los diseños de Flutter. Actualmente, el explorador de diseño solo admite la exploración de diseños flexibles, pero puede extenderse a otros tipos de diseños en el futuro.

Usar el Explorador de diseño

Desde el Inspector Flutter, seleccione un widget flexible (por ejemplo, Fila , Columna, Flex, etc.) o un hijo directo de un widget flexible. Si está utilizando Flutter 1.12.16 o posterior, verá una pestaña adicional “Explorador de diseño” junto a “Árbol de detalles”. Al seleccionar esta pestaña, se mostrará la nueva función Explorador de diseño.

La pestaña Explorador de diseño

El Explorador de diseño visualiza cómo se presentan los widgets Flex y sus hijos. El explorador identifica el eje principal y el eje transversal, así como la alineación actual para cada uno (por ejemplo, inicio, final, espacio entre, etc.). También muestra detalles como factor flexible y restricciones de diseño.

Además, el explorador muestra violaciones de restricciones de diseño y errores de desbordamiento de representación. Las restricciones de diseño violadas son de color rojo, y los errores de desbordamiento se presentan en el patrón estándar de “cinta amarilla”, como vería en un dispositivo en ejecución. Estas visualizaciones tienen como objetivo mejorar la comprensión de por qué se producen errores de desbordamiento y cómo solucionarlos.

El Explorador de diseño que muestra los errores y el inspector de dispositivos

Al hacer clic en un widget en el explorador de diseño, se reflejará la selección en el inspector del dispositivo. “Seleccionar modo de widget” debe estar habilitado para esto. Para habilitarlo, haga clic en el botón “Seleccionar modo de widget” en el inspector.

El botón Seleccionar modo de widget en el inspector

Para algunas propiedades, como el factor flexible y la alineación, puede modificar el valor mediante listas desplegables en el explorador. Al modificar una propiedad de widget, verá el nuevo valor reflejado no solo en el Explorador de diseño, sino también en el dispositivo que ejecuta su aplicación Flutter. El explorador anima los cambios de propiedad para que el efecto del cambio sea claro. Los cambios de propiedad del widget realizados desde el explorador de diseño no modifican su código fuente y se revierten en la recarga en caliente.

Propiedades interactivas

Layout Explorer admite la modificación de mainAxisAlignment , crossAxisAlignment y FlexParentData.flex . En el futuro, podemos agregar soporte para propiedades adicionales como mainAxisSize , textDirection y FlexParentData.fit .

mainAxisAlignment

El Explorador de diseño cambia la alineación del eje principal

Valores soportados:

  • MainAxisAlignment.start
  • MainAxisAlignment.end
  • MainAxisAlignment.center
  • MainAxisAlignment.spaceBetween
  • MainAxisAlignment.spaceAround
  • MainAxisAlignment.spaceEvenly

crossAxisAlignment

El Explorador de diseño cambia la alineación del eje transversal

Valores soportados:

  • CrossAxisAlignment.start
  • CrossAxisAlignment.center
  • CrossAxisAlignment.end
  • CrossAxisAlignment.stretch

FlexParentData.flex

El Explorador de diseño cambia el factor flexible

El Explorador de diseño admite 7 opciones flexibles en la interfaz de usuario (nulo, 0, 1, 2, 3, 4, 5), pero técnicamente el factor flexible del elemento secundario de un widget flexible puede ser cualquier int.

Seguimiento de la creación de widgets

Parte de la funcionalidad del inspector Flutter se basa en instrumentar el código de la aplicación para comprender mejor las ubicaciones de origen donde se crean los widgets. La instrumentación de origen permite que el inspector de Flutter presente el árbol de widgets de manera similar a cómo se definió la IU en su código fuente. Sin él, el árbol de nodos en el árbol de widgets es mucho más profundo, y puede ser más difícil entender cómo la jerarquía de widgets de tiempo de ejecución corresponde a la IU de su aplicación.

Al iniciar una aplicación desde un IDE, la instrumentación de origen ocurre de manera predeterminada. Para los lanzamientos de línea de comandos, debe optar por la instrumentación de origen. Para hacer esto, ejecute la aplicación con la --track-widget-creation bandera:

flutter run --track-widget-creation

Si inicia sin la bandera, aún puede usar el inspector; verá un mensaje recordatorio en línea y descartable sobre el uso de la bandera de instrumentación de origen.

Estos son ejemplos de cómo se vería su árbol de widgets con y sin la creación de widgets de seguimiento habilitada.

Seguimiento de creación de widgets habilitado ( recomendado ):

El árbol de widgets con la creación de widgets de seguimiento habilitada

Seguimiento de creación de widgets deshabilitado ( no recomendado):

El árbol de widgets con creación de widgets de pista deshabilitado

Otros recursos

Para una demostración de lo que generalmente es posible con el inspector, vea la charla DartConf 2018 que demuestra la versión IntelliJ del inspector Flutter.

Guía DevTools

? ¿Qué es DevTools?? ¿Cómo instalar DevTools?? ¿Cómo usar el inspector de DevTools?

{: .btn .btn–light-outline .btn–large} ? ¿Cómo usar la línea de tiempo de DevTools? ? ¿Cómo usar la vista de memoria de DevTools? ? ¿Cómo usar la vista de rendimiento de DevTools? ? ¿Cómo usar el depurador de DevTools? ? ¿Cómo usar la vista de registro de DevTools? ? Guía Flutter?

Relacionados

? Cursos en Español? Ejemplos de Aplicaciones⚓ Documentación en EspañolFuente

: Salvo que se indique lo contrario, este trabajo está licenciado bajo una licencia internacional Creative Commons Attribution 4.0 y los ejemplos de código están licenciados bajo la licencia BSD. Creado por Flutter Oficial

Relacionados

Deja un comentario