¿Cómo agregar componentes a tus pantallas de FlutterFlow?

Paso 1: Abre Tu Proyecto FlutterFlow

Comienza iniciando sesión en tu cuenta FlutterFlow. Si no tienes una, considera crear una nueva cuenta. Una vez que inicies sesión, navega hasta el tablero del proyecto y selecciona el proyecto al que deseas agregar componentes. Esto te llevará al menú principal de tu aplicación.

Paso 2: Selecciona Tu Pantalla

En el lado izquierdo de tu editor de proyectos, verás un esquema de tu proyecto. Esto incluye tanto los detalles de backend como los de frontend de tu proyecto. Haz clic en el nombre de la pantalla a la que deseas agregar componentes. Una vez seleccionado, deberías ver el diseño de tu pantalla en la parte central de tu pantalla.

Paso 3: Navega hasta el botón '+'

Para agregar un nuevo componente a tu pantalla, mira hacia la parte superior derecha de tu pantalla. Aquí, verás un botón "+", que se utiliza para agregar componentes a tu pantalla.

Paso 4: Busca o desplázate hasta tu componente deseado

Al hacer clic en el botón "+", debería aparecer una lista de todos los componentes disponibles. Esto incluye componentes básicos como texto, imágenes y botones, así como componentes más avanzados como mapas, tablas y casillas de verificación. Puedes desplazarte por esta lista hasta que encuentres el que necesitas, o puedes usar la herramienta de búsqueda en la parte superior de este panel para encontrar el componente rápidamente.

Paso 5: Agrega el componente a tu pantalla

Pasa el cursor sobre el componente que deseas agregar a tu pantalla. Verás un botón "Agregar" o "+" aparecer. Al hacer clic en este botón añadirás el componente seleccionado a tu pantalla. Puede que necesites regresar al editor principal del proyecto para ver este cambio.

Paso 6: Edita el componente añadido

En el editor principal del proyecto, deberías ver el nuevo componente añadido en lo que FlutterFlow determina es la siguiente posición lógica. Si ya tienes otros componentes en tu pantalla, esto podría ser debajo o a la derecha de estos componentes. En el lado derecho del editor, verás un panel que te permite editar las propiedades del componente seleccionado.

Paso 7: Guarda y publica tus cambios

Una vez que hayas agregado y editado tu componente a tu satisfacción, haz clic en "Guardar" o en el icono de disco flexible en la parte superior derecha del editor para guardar tus cambios. Luego, haz clic en "Publicar" o en el icono de reproducción para hacer que tus cambios estén disponibles en tu aplicación.

Paso 8: Prueba tus cambios

Finalmente, ejecuta tu aplicación para ver si el nuevo componente se ha agregado correctamente. Para probar tus cambios, usa el emulador disponible dentro de la interfaz FlutterFlow, o despliega la aplicación a un dispositivo compatible. Si la adición del componente ha funcionado correctamente, deberías poder interactuar con él como esperas.

Felicidades, has agregado exitosamente un nuevo componente a tu pantalla FlutterFlow. Recuerda, el proceso es casi el mismo para cada componente que puedas querer agregar, así que no dudes en experimentar y agregar más componentes para mejorar tu aplicación.