Flutter Property Editor

El Flutter Property Editor es una potente herramienta para IDE que te permite ver y modificar propiedades de Widgets directamente desde una interfaz visual.

Te permite descubrir y modificar rápidamente los argumentos del constructor existentes y disponibles de tus Widgets, eliminando la necesidad de ir a la definición o editar manualmente el código fuente. Además, su integración con el Flutter inspector y hot reload te permite ver los cambios en tiempo real, acelerando el desarrollo y la iteración de la UI.

1. Abre el Flutter Property Editor en tu IDE compatible (VS Code, Android Studio/IntelliJ).

2. Ubica una invocación del constructor de un Widget en tu código Flutter.

3. Mueve el cursor a cualquier lugar dentro de la invocación del constructor del Widget.

   Por ejemplo, en el siguiente método build, coloca tu cursor en cualquier lugar entre la T de Text y el paréntesis de cierre ) después de TextOverflow.clip:

   dart

   @override
   Widget build(BuildContext context) {
       return Text(
           'Hello World!',
           overflow: TextOverflow.clip,
       );
   }
   

   content_copy

4. El panel del Flutter Property Editor se actualiza automáticamente para mostrar las propiedades del Widget en la ubicación de tu cursor.

El Flutter Property Editor se puede usar junto con el Flutter inspector para inspeccionar tus Widgets simultáneamente en ambas herramientas.

1. Desde tu IDE preferido, ejecuta y depura tu aplicación Flutter.

   • Instrucciones para VS Code
   • Instrucciones para Android Studio/IntelliJ

2. Abre el Flutter inspector en tu IDE.

Luego puedes usar el Flutter inspector para cargar un Widget en el Flutter Property Editor haciendo cualquiera de las dos cosas:

1. Seleccionar un Widget en el árbol:

   • Haz clic en un Widget en el árbol de Widgets del inspector.

2. Seleccionar un Widget en tu app:

   • Habilita "Select Widget Mode" en el inspector.
   • Haz clic en un Widget en tu aplicación en ejecución.

Ambas acciones harán automáticamente lo siguiente:

• Saltar a la declaración del Widget en tu código fuente.
• Cargar el Widget seleccionado en el Flutter Property Editor.

El Flutter Property Editor se puede utilizar junto con hot reload para ver los cambios en tiempo real.

1. Desde tu IDE preferido, habilita el guardado automático y los hot reloads al guardar.

   VS Code

   Add the following to your .vscode/settings.json file:

   json

   "files.autoSave": "afterDelay",
   "dart.flutterHotReloadOnSave": "all",
   

   content_copy

   Android Studio and IntelliJ

   • Abre Settings > Tools > Actions on Save y selecciona Configure autosave options.

     • Marca la opción Save files if the IDE is idle for X seconds.
     • Recomendado: Establece una duración de retardo pequeña. Por ejemplo, 2 segundos.

   • Abre Settings > Languages & Frameworks > Flutter.

     • Marca la opción Perform hot reload on save.

2. Ejecuta y depura tu aplicación Flutter.

   • Instrucciones para VS Code
   • Instrucciones para Android Studio/IntelliJ

3. Cualquier cambio que realices desde el Flutter Property Editor se refleja automáticamente en tu app en ejecución.

El Flutter Property Editor viene equipado con varias funciones diseñadas para acelerar el proceso de desarrollo.

Cuando se selecciona un Widget en el Flutter Property Editor, su documentación se muestra en la parte superior. Esto te permite leer rápidamente la documentación del Widget, sin necesidad de ir a la definición o buscar en línea.

Por defecto, la documentación del Widget está truncada. Haz clic en "Show more" para expandir la documentación del Widget.

El Flutter Property Editor contiene campos de entrada adaptados al tipo de cada argumento del constructor.

• string, double, and int properties:

  • Estos están representados por campos de entrada de texto.
  • Simplemente escribe el nuevo valor en el campo.
  • Presiona ••Tab•• o ••Enter•• para aplicar la edición directamente a tu código fuente.

• boolean and enum properties:

  • Estos están representados por menús desplegables.
  • Haz clic en el menú desplegable para ver las opciones disponibles (true/false para booleanos, o los varios valores de enum).
  • Selecciona el valor deseado de la lista para aplicarlo a tu código.

• object properties (for example, TextStyle, EdgeInsets, Color):

  • Actualmente no soportado. El Flutter Property Editor aún no permite la edición directa de propiedades de objetos complejos. Tendrás que editarlas directamente en tu código fuente.

Cada input de propiedad en el Flutter Property Editor va acompañado de información para ayudarte a comprender su uso.

• Tipo y nombre: El tipo (por ejemplo, StackFit) y el nombre (por ejemplo, fit) del parámetro del constructor se muestran como una etiqueta para cada campo de entrada.

  

• Info tooltip (ⓘ):

  • Al pasar el cursor sobre el ícono de información junto a un input de propiedad, se muestra un tooltip.
  • The information in the tooltip includes:
    • El valor por defecto de la propiedad, si se define uno en el constructor del Widget.
    • Cualquier documentación para esa propiedad.

  

• "Set" and "default" labels:

  • La etiqueta "set" aparece junto a un input si la propiedad se ha establecido explícitamente en tu código fuente. Esto significa que hay un argumento correspondiente proporcionado en la llamada al constructor del Widget.
  • La etiqueta "default" aparece junto a un input si el valor actual de la propiedad coincide con el valor por defecto del parámetro definido en el Widget.

  :::tip Si un input de propiedad tiene tanto una etiqueta "set" como "default", significa que has proporcionado explícitamente un valor en tu código, pero este valor es el mismo que el valor por defecto del Widget para esa propiedad. En tales casos, puedes eliminar de forma segura este argumento de tu código para hacerlo más conciso, ya que el Widget usará el valor por defecto de todos modos. :::

  

Para Widgets con muchas propiedades, la barra de filtro puede ayudar a ubicar rápidamente propiedades de interés.

• Filter by text:

  • Simplemente escribe en la barra de filtro. La lista de propiedades se actualizará dinámicamente para mostrar solo aquellas que coincidan con tu entrada.
  • You can filter by a property's name, its current value, or its type. For example:
    • Escribir "main" filtraría a mainAxisAlignment, mainAxisSize u otras propiedades con "main" en su nombre.
    • Escribir "true" filtraría a todas las propiedades booleanas actualmente establecidas en true.
    • Escribir "double" filtraría a todas las propiedades de tipo double.

  

• Filter by "set" properties:

  • Usa el botón de menú de filtro para abrir las opciones de filtrado. Marca "Only include properties that are set in the code."
  • Esto oculta todas las propiedades que no se han establecido explícitamente en tu código, lo que te permite concentrarte solo en las propiedades que has establecido explícitamente.

  

• Filter with a regex:

  • El conmutador de regex (un botón con ícono *) te permite activar el modo de expresiones regulares para el input de filtro.
  • Cuando está habilitado, el texto del filtro se interpretará como una expresión regular.

  

• Clear the current filter:

  • El botón de borrar (un botón con ícono X) borra cualquier filtro activo, mostrando todas las propiedades del Widget nuevamente.