How to Create a Time Tracking Tool in FlutterFlow

In the Firebase Console, open Firestore Database and create two collections. The first collection is named projects with fields: name (String), color (String), userId (String). The second collection is named time_entries with fields: projectId (String), projectName (String), startTime (Timestamp), endTime (Timestamp), durationSeconds (Integer), userId (String), date (String — store as YYYY-MM-DD for easy grouping). Back in FlutterFlow, open the Firestore panel, click the refresh icon to import your schema, and create matching Document Types. Set up a Collection Group query for time_entries filtered by userId equals currentUser.uid so each user only sees their own data.

Open your main Timer page and click the gear icon to open Page State. Add three variables: isRunning (Boolean, default false), startTime (DateTime, no default), and elapsedSeconds (Integer, default 0). Add a Text widget at the top of the page and bind its value to a Custom Function called formatElapsed that accepts elapsedSeconds as an Integer and returns a formatted String like 02:34:17. Below the timer display, add a DropDown widget bound to a Backend Query that streams your projects collection filtered by userId. Store the selected project in a fourth Page State variable selectedProjectId (String). Add two buttons — Start and Stop — side by side at the bottom of the timer section.

1// Custom Function: formatElapsed
2// Argument: elapsedSeconds (int)
3// Return type: String
4String formatElapsed(int elapsedSeconds) {
5  final hours = elapsedSeconds ~/ 3600;
6  final minutes = (elapsedSeconds % 3600) ~/ 60;
7  final seconds = elapsedSeconds % 60;
8  return '${hours.toString().padLeft(2, '0')}:'
9      '${minutes.toString().padLeft(2, '0')}:'
10      '${seconds.toString().padLeft(2, '0')}'
11;}

Select the Start button and open its On Tap action chain. Add three actions in order: first, Update Page State — set isRunning to true and set startTime to Current Time. Second, add a Timer action (found under Utilities) — set it to repeat every 1000 milliseconds (1 second) and choose Do Not Stop Automatically. Inside the Timer's action, add Update Page State to increment elapsedSeconds by 1. Third, conditionally show/hide the Start and Stop buttons based on the isRunning Page State variable using Conditional Visibility on each button. Select the Stop button and add its On Tap action chain: Update Page State — set isRunning to false. Then add a Firestore Create Document action targeting the time_entries collection. Map the fields: projectId from selectedProjectId, startTime from the startTime Page State, endTime to Current Time, durationSeconds from elapsedSeconds, date formatted as YYYY-MM-DD using a Custom Function, userId from currentUser.uid. Finally, reset elapsedSeconds to 0.

Create a new page called History. Add a Backend Query at the page level: query the time_entries collection, filter by userId equals currentUser.uid, and order by date descending. Add a ListView widget on the page bound to this query. Inside the ListView, add a Column with two sections: a date header Text widget bound to the entry's date field, and an entry row showing the projectName, formatted duration (reuse your formatElapsed Custom Function), and start/end times. To visually group by date, use a Conditional Visibility condition on the date header Text widget — show it only when the current item's date differs from the previous item's date. You can achieve this by comparing the current index's date field with the previous index using a Custom Function called isNewDate that returns true when dates differ.

In the Firebase Console, create a Cloud Function (Node.js) named generateTimeReport. The function accepts a userId and optional dateRange, queries time_entries for that user, formats the data as CSV, uploads the file to Firebase Storage under reports/{userId}/time_report.csv, generates a signed download URL, and returns the URL in the response. Back in FlutterFlow, open the API Calls panel and create a new API call — Cloud Function type — pointing to your function's HTTPS endpoint. Pass currentUser.uid as the userId parameter. On the Reports page, add a button labeled Download CSV. In its On Tap action, call the API, then use the Launch URL action with the returned download URL. A file manager or browser will open for the user to save the file.

1// Cloud Function: generateTimeReport (index.js)
2const functions = require('firebase-functions');
3const admin = require('firebase-admin');
4admin.initializeApp();
5
6exports.generateTimeReport = functions.https.onCall(async (data, context) => {
7  if (!context.auth) throw new functions.https.HttpsError('unauthenticated', 'Login required');
8  const userId = context.auth.uid;
9  const db = admin.firestore();
10  const snapshot = await db.collection('time_entries')
11    .where('userId', '==', userId)
12    .orderBy('date', 'desc')
13    .limit(1000)
14    .get();
15
16  const rows = ['Date,Project,Start,End,Duration (min)'];
17  snapshot.forEach(doc => {
18    const d = doc.data();
19    const dur = Math.round((d.durationSeconds || 0) / 60);
20    rows.push(`${d.date},${d.projectName},${d.startTime.toDate().toISOString()},${d.endTime.toDate().toISOString()},${dur}`);
21  });
22
23  const csv = rows.join('\n');
24  const bucket = admin.storage().bucket();
25  const file = bucket.file(`reports/${userId}/time_report.csv`);
26  await file.save(csv, { contentType: 'text/csv' });
27  const [url] = await file.getSignedUrl({ action: 'read', expires: Date.now() + 15 * 60 * 1000 });
28  return { url };
29});