馃殌 驴C贸mo usar el inspector de DevTools con Flutter?

6 minuto(s) de lectura

驴Qu茅 es el inspector de Flutter?

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

Captura de pantalla de la ventana del inspector Flutter

Empezar

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 鈥渟elecci贸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 sizey 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 鈥淓xplorador de dise帽o鈥 junto a 鈥溍乺bol 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 鈥渃inta 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. 鈥淪eleccionar modo de widget鈥 debe estar habilitado para esto. Para habilitarlo, haga clic en el bot贸n 鈥淪eleccionar 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-creationbandera:

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? 馃憠 驴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帽ol

Fuente: 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