Flutter – Usando el Inspector

Flutter se basa en Widgets y Widget Trees. Si eres nuevo en Flutter, imagina Widgets como estructuras de datos o clases de datos. Y para crear una aplicación flutter, anidamos estos Widgets uno dentro del otro.

Introducción a Flutter Inspector:

Al igual que en Android nativo, podemos ver el modelo de nuestra aplicación y sus propiedades con la ayuda del archivo .xml, Flutter proporciona una herramienta llamada Flutter Inspector que puede ayudarlo a visualizar el modelo y las propiedades de diferentes widgets en su aplicación Flutter. Junto con la visualización, la herramienta Inspector también ayuda a diagnosticar problemas de diseño de widgets.

Nota: Actualmente, la herramienta Flutter Inspector solo está disponible en Android Studio IntelliJ IDEA.

Herramientas incluidas en Flutter Inspector:

1. Seleccione el modo de widget:

Con la ayuda de este botón, puede seleccionar diferentes widgets de su aplicación e inspeccionarlos uno a la vez. 

Después de seleccionar cualquier widget del árbol de widgets, puede ver el diseño de ese widget con la ayuda de la pestaña Explorador de diseño, o puede verificar diferentes propiedades y widgets anidados del widget seleccionado con la ayuda de la pestaña Árbol de detalles.

Ejemplo:

Aquí hemos seleccionado el Icon Widget

Note: You can also select different Widgets with the help of the search icon which 
      will appear on your device screen when you activate the Select Widget Mode.

2. Actualizar árbol:

Cada vez que realiza cambios en su aplicación y recarga en caliente, esos cambios no se reflejan inmediatamente en su herramienta Flutter Inspector. Para visualizar los cambios tendrás que hacer clic en el botón Refresh Tree.

3. Animación lenta:

Reduce la velocidad de la animación entre diseños.

4. Pintura de depuración:

Cuando está activado, crea un borde alrededor de cada widget actualmente presente en su pantalla. En resumen, muestra un plano de todo el diseño.

5. Pinte las líneas de base:

Dibuja líneas de base para todos los textos e íconos actualmente presentes en la pantalla.

6. Vuelva a pintar el arcoíris:

Cuando está activado, crea un borde alrededor de los widgets que están cambiando. Por lo tanto, es una gran herramienta para verificar/depurar widgets que están cambiando.

Por ejemplo, aquí tenemos nuestra página de inicio, que es un widget con estado, por lo que cada vez que haya cambios dentro de este widget, todo el widget se volverá a pintar, lo que se indica con esos bordes de colores del arco iris.

7.Invertir imagen de gran tamaño: 

Esta herramienta ayuda a identificar imágenes de gran tamaño. Cada vez que los desarrolladores crean una aplicación, quieren que se ejecute lo más rápido posible, pero cuando se incluyen imágenes con alta resolución y mayor tamaño en la aplicación, el rendimiento de la aplicación se ve afectado (para ser más precisos, la velocidad y el tamaño de la aplicación se ven afectados). )

Ejemplo:

Aquí hemos agregado dos imágenes a la aplicación.

• Geeks para Geeks (tamaño 200 KB)
• Imagen del helicóptero (tamaño 7 MB)

Cuando se activa invertir imagen de gran tamaño, la segunda imagen se invierte (tanto los colores como la imagen) y la primera imagen no se ve afectada.

Para obtener más información sobre Flutter: Tutorial de Flutter