How to Create a Voting System in FlutterFlow

In Firestore, create a polls collection with fields: question (String), options (List of Maps, each with text and voteCount integer), totalVotes (Integer, default 0), endTime (Timestamp), createdBy (String), and isActive (Boolean). Under each poll document, create a votes subcollection with documents keyed by userId, containing optionIndex (Integer) and timestamp (Timestamp). The subcollection approach ensures you can quickly check whether a user has already voted with a single document read.

Create a PollDetail page that receives a pollId as a Page Parameter. Add a Backend Query for the poll document with Single Time Query set to OFF for real-time updates. Display the question in a Text widget with headlineMedium styling. Below it, add a ListView bound to the options array. For each option, create a Container with a Stack: the bottom layer is a colored Container whose width is set to (voteCount / totalVotes * parentWidth) via a Custom Function, creating a percentage fill bar. On top, add a Row with the option text and the vote count or percentage. Use Conditional Visibility to show vote counts only after the user has voted.

On each option Container, add an On Tap action. First, perform a Backend Query to check if a document exists at polls/{pollId}/votes/{currentUserId}. If it exists, show a SnackBar saying 'You have already voted'. If not, proceed with the vote. Also check if the poll's endTime is in the past or isActive is false, and show 'This poll has ended' if so. This prevents both duplicate votes and votes on expired polls before the write attempt.

Create a Cloud Function called castVote that accepts pollId and optionIndex. Inside, run a Firestore transaction that reads the poll document, verifies the vote subcollection document does not exist for this user, increments the selected option's voteCount by 1, increments totalVotes by 1, and creates the vote document with the userId, optionIndex, and timestamp. The transaction ensures two simultaneous votes do not both succeed for the same user. In FlutterFlow, call this Cloud Function from the On Tap action after the duplicate check passes.

1// Cloud Function: castVote
2const functions = require('firebase-functions');
3const admin = require('firebase-admin');
4admin.initializeApp();
5
6exports.castVote = functions.https.onCall(async (data, context) => {
7  if (!context.auth) throw new functions.https.HttpsError('unauthenticated', 'Login required');
8  const { pollId, optionIndex } = data;
9  const uid = context.auth.uid;
10  const db = admin.firestore();
11  const pollRef = db.collection('polls').doc(pollId);
12  const voteRef = pollRef.collection('votes').doc(uid);
13
14  await db.runTransaction(async (tx) => {
15    const pollDoc = await tx.get(pollRef);
16    const voteDoc = await tx.get(voteRef);
17    if (voteDoc.exists) throw new functions.https.HttpsError('already-exists', 'Already voted');
18    if (!pollDoc.data().isActive) throw new functions.https.HttpsError('failed-precondition', 'Poll ended');
19
20    const options = pollDoc.data().options;
21    options[optionIndex].voteCount += 1;
22    tx.update(pollRef, { options, totalVotes: admin.firestore.FieldValue.increment(1) });
23    tx.set(voteRef, { optionIndex, timestamp: admin.firestore.FieldValue.serverTimestamp() });
24  });
25  return { success: true };
26});

Create a CreatePoll page with a TextField for the question, a dynamic list of option TextFields (start with 2, Add Option button appends to Page State list, minimum 2 maximum 6), and a DateTimePicker for the poll end time. On submit, create the poll document with each option having voteCount: 0 and the selected endTime. Back on the PollDetail page, add a countdown Text widget that displays time remaining using a Custom Function calculating the difference between endTime and now. When the countdown reaches zero, update isActive to false via a Cloud Function scheduled trigger.

Create a PollsList page with a Backend Query on a ListView that fetches all polls ordered by endTime descending. Add ChoiceChips at the top to filter by Active and Ended polls. Each poll card shows the question, total vote count, a status badge (green for active, red for ended using Conditional Styling), and the time remaining or 'Ended' label. Tap navigates to the PollDetail page passing the pollId. Add a FloatingActionButton that navigates to CreatePoll.