How to build a charity or crowdfunding platform with FlutterFlow?

Set up a new project in FlutterFlow

Firstly, head over to FlutterFlow and sign up or log in. Once you are in your dashboard, click on ‘New Project’. Provide your project with a suitable name like ‘Charity Platform’ and choose Flutter for the UI Builder.

Step 1: Create User Authentication

A crowdfunding platform requires a user authentication system to manage donors and fundraisers. You can add user authentication to your app by clicking on ‘Auth’ in the left sidebar. FlutterFlow supports several authentication systems, including Firebase Authentication.

Click on 'Add Firebase' and enter the details of your Firebase project. This should include your web API key, auth domain, and project ID. They can be found in your Firebase project settings. Save these settings.

In the 'Auth' section, choose Email/Password login. You can also enable Google and Apple login if you prefer. After this, a login and signup page will be automatically generated.

Step 2: Design the Main Page

The main page will show all active crowdfunding campaigns. Click on the 'Add a new page' button and call it 'Main Page'.

Start by adding a 'Top Bar' widget from the 'Add widget' menu. Write a fitting title for your platform, like 'Charity Platform'. You can also add an 'Add' and a 'Profile' icon. The 'Add' icon leads to the 'Create Campaign' page and the 'Profile' icon leads to the user's profile.

Next, add a 'StreamBuilder' widget. This will automatically update your list of campaigns when a new campaign is created. Choose Firebase Firestore as your database and enter the relevant details.

As children of the 'StreamBuilder', add a 'ListView.builder' widget. The 'ListView.builder' will create a scrollable list of campaigns.

Step 3: Design each Card in the ListView

Campaigns will be represented by cards in the ListView. Each card should show the current funding, the goal, the title of the campaign, and the name of the fundraiser.

As a child of the 'ListView.builder', add a 'Card' widget. This will give you a rounded box to work with.

Inside the 'Card' widget, add a 'Column' widget. This allows you to add multiple widgets vertically.

Add a 'Text' widget as a child of the column. The text should present the campaign's name.

Next, beneath the text widget, add a 'ProgressBar' widget. Choose 'current funds' as the current value and 'goal' as the maximum value.

Lastly, add another 'Text' widget to show the name of the fundraiser.

Step 4: Create the 'Create Campaign' Page

We need a page to create new crowdfunding campaigns. Create a new page and call it 'Create Campaign'. Add a form where users can enter details about the campaign.

This page should have 'TextFormField' widgets for the title, description, goal, and an optional image URL of the campaign.

Add a 'SubmitButton' that saves the form data to Firestore when clicked.

Step 5: Create User Profile Page

You should also create a simple user profile page. This page should show the user's name, email, and a list of campaigns they've created.

Step 6: Implement Navigation

To make your app navigable, go to the 'Navigation' tab and set up your routes. The main page should be the initial route.

Step 7: Launch Your App

Once you are satisfied with your design, click on 'Launch App' at the top right. FlutterFlow will now generate and compile your code. This step may take a few minutes. Once it's done, you can preview your app in the web preview.

Step 8: Deploy Your App

When you are happy with your app, it's time to deploy it! Click on 'Export' and select your preferred method of exporting. You can export your code to GitHub or download it as a zip file.

Start your journey into making a positive impact on the world with your charity or crowdfunding platform built with FlutterFlow!