¿Cómo construir una plataforma de caridad o crowdfunding con FlutterFlow?

Configura un nuevo proyecto en FlutterFlow

Primero, visita FlutterFlow e inscríbete o inicia sesión. Una vez que estés en tu panel de control, haz clic en 'Nuevo Proyecto'. Proporciona a tu proyecto un nombre adecuado como 'Plataforma de Caridad' y elige Flutter para el Constructor de UI.

Paso 1: Crear Autenticación de Usuario

Una plataforma de crowdfunding requiere un sistema de autenticación de usuarios para gestionar a los donantes y recaudadores de fondos. Puedes agregar autenticación de usuario a tu aplicación haciendo clic en 'Auth' en la barra lateral izquierda. FlutterFlow admite varios sistemas de autenticación, incluyendo la Autenticación de Firebase.

Haz clic en 'Agregar Firebase' e ingresa los detalles de tu proyecto Firebase. Esto debería incluir tu clave API web, dominio de autenticación y ID del proyecto. Estos se pueden encontrar en la configuración de tu proyecto Firebase. Guarda estas configuraciones.

En la sección 'Auth', elige iniciar sesión con Email/Contraseña. También puedes habilitar el inicio de sesión con Google y Apple si lo prefieres. Después de esto, se generará automáticamente una página de inicio de sesión y registro.

Paso 2: Diseñar la Página Principal

La página principal mostrará todas las campañas de crowdfunding activas. Haz clic en el botón 'Añadir una nueva página' y llámala 'Página Principal'.

Comienza agregando un widget 'Top Bar' desde el menú 'Añadir widget'. Escribe un título adecuado para tu plataforma, como 'Plataforma de Caridad'. También puedes agregar un icono de 'Añadir' y un icono de 'Perfil'. El icono 'Añadir' lleva a la página 'Crear Campaña' y el icono 'Perfil' lleva al perfil del usuario.

A continuación, agrega un widget 'StreamBuilder'. Esto actualizará automáticamente tu lista de campañas cuando se cree una nueva campaña. Elige Firebase Firestore como tu base de datos e ingresa los detalles relevantes.

Como hijos del 'StreamBuilder', agrega un widget 'ListView.builder'. El 'ListView.builder' creará una lista desplazable de campañas.

Paso 3: Diseña cada Tarjeta en el ListView

Las campañas se representarán mediante tarjetas en el ListView. Cada tarjeta debe mostrar la financiación actual, el objetivo, el título de la campaña y el nombre del recaudador de fondos.

Como hijo del 'ListView.builder', agrega un widget 'Card'. Esto te proporcionará un cuadro redondeado para trabajar.

Dentro del widget 'Card', agrega un widget 'Column'. Esto te permite agregar varios widgets verticalmente.

Agrega un widget 'Text' como hijo de la columna. El texto debe presentar el nombre de la campaña.

A continuación, debajo del widget de texto, agrega un widget 'ProgressBar'. Elige 'fondos actuales' como el valor actual y 'objetivo' como el valor máximo.

Por último, agrega otro widget de 'Text' para mostrar el nombre del recaudador de fondos.

Paso 4: Crear la Página 'Crear Campaña'

Necesitamos una página para crear nuevas campañas de crowdfunding. Crea una nueva página y llámala 'Crear Campaña'. Añade un formulario donde los usuarios puedan ingresar detalles sobre la campaña.

Esta página debe tener widgets 'TextFormField' para el título, descripción, objetivo y una URL de imagen opcional de la campaña.

Agrega un 'SubmitButton' que guarde los datos del formulario en Firestore cuando se haga clic.

Paso 5: Crear Página de Perfil de Usuario

También debes crear una página de perfil de usuario simple. Esta página debe mostrar el nombre del usuario, el correo electrónico y una lista de las campañas que ha creado.

Paso 6: Implementar Navegación

Para hacer que tu aplicación sea navegable, ve a la pestaña 'Navegación' y configura tus rutas. La página principal debe ser la ruta inicial.

Paso 7: Lanza Tu Aplicación

Una vez que estés satisfecho con tu diseño, haz clic en 'Lanzar Aplicación' en la parte superior derecha. FlutterFlow ahora generará y compilará tu código. Este paso puede tardar unos minutos. Una vez que se haya hecho, puedes previsualizar tu aplicación en la vista previa web.

Paso 8: Despliega Tu Aplicación

Cuando estés satisfecho con tu aplicación, ¡es hora de desplegarla! Haz clic en 'Exportar' y selecciona tu método preferido de exportación. Puedes exportar tu código a GitHub o descargarlo como un archivo zip.

¡Comienza tu viaje para tener un impacto positivo en el mundo con tu plataforma de caridad o crowdfunding construida con FlutterFlow!