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
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
Vuelva a cargar la información del widget actual.
- 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 los comportamientos de representación y gestos entre Android e iOS.
- 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
Haga que cada RenderBox dibuje una línea en cada una de sus líneas de base de texto.
- Animaciones lentas
Reduzca la velocidad de las animaciones para permitir la inspección visual.
- Repintar Rainbow
Muestra colores rotativos en las capas al repintar.
- 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.
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.
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.
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
Valores soportados:
- MainAxisAlignment.start
- MainAxisAlignment.end
- MainAxisAlignment.center
- MainAxisAlignment.spaceBetween
- MainAxisAlignment.spaceAround
- MainAxisAlignment.spaceEvenly
crossAxisAlignment
Valores soportados:
- CrossAxisAlignment.start
- CrossAxisAlignment.center
- CrossAxisAlignment.end
- CrossAxisAlignment.stretch
FlexParentData.flex
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 ):
Seguimiento de creación de widgets deshabilitado ( no recomendado):
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