How to Create a Personal Finance Management Tool in FlutterFlow

Create three Firestore collections in FlutterFlow's Firestore panel. The accounts collection holds documents with fields: userId (String), name (String), type (String — checking/savings/credit), currency (String), and createdAt (Timestamp). The transactions collection holds: userId, accountId, amount (Double — positive for income, negative for expense), category (String), description (String), date (Timestamp), isRecurring (Boolean), and recurringId (String, optional). The budgets collection holds: userId, category (String), limitAmount (Double), periodStart (Timestamp), and periodEnd (Timestamp). Set Firestore security rules so users can only read and write documents where userId == request.auth.uid.

Add a new page called AddTransaction. Place a Column containing: a DropdownButton bound to your categories option set, a TextField for description, a NumberTextField for amount, a DatePicker for date, a DropdownButton for accountId (populated from a Firestore query of the user's accounts), and a Toggle for expense vs income. On the Save button's action: set amount to negative if expense is selected, then call Create Document on the transactions collection with all fields. After saving, navigate back to the transactions list. Add form validation: amount must be greater than zero, category and account must be selected.

On your Dashboard page add a PieChart widget from FlutterFlow's chart library. The PieChart requires a list of values and a list of labels. Create a Custom Function called getCategoryTotals that accepts a list of transaction documents and returns a map of category to total absolute amount. Query transactions for the current user filtered by the current month using a date range filter. Pass the query results to your custom function, then map the output to the PieChart's value series. Style each slice with a distinct color from your theme. Add a legend Row below the chart that shows category name and total.

1// Custom Function: getCategoryTotals.dart
2import 'package:cloud_firestore/cloud_firestore.dart';
3
4Map<String, double> getCategoryTotals(
5    List<DocumentSnapshot> transactions) {
6  final Map<String, double> totals = {};
7  for (final doc in transactions) {
8    final data = doc.data() as Map<String, dynamic>;
9    final category = data['category'] as String? ?? 'Other';
10    final amount = (data['amount'] as num?)?.toDouble() ?? 0.0;
11    if (amount < 0) {
12      totals[category] = (totals[category] ?? 0) + amount.abs();
13    }
14  }
15  return totals;
16}

Create a BudgetProgress page that shows a list of budget documents for the current user. For each budget, display a Card containing the category name, a LinearProgressIndicator, and spent vs limit text. The progress value requires a Custom Function called getBudgetProgress that queries transactions matching the budget's category and current period, sums the amounts, and divides by the limit. Set the indicator color to green below 80%, amber from 80-99%, and red at 100%+. Add a conditional visible Container with a warning icon and text that only shows when spent exceeds limit. Trigger a push notification from a Cloud Function when the ratio crosses 90% — query budgets nightly and send per-user alerts.

1// Custom Function: getBudgetProgress.dart
2double getBudgetProgress(
3    double spent, double limit) {
4  if (limit <= 0) return 0.0;
5  return (spent / limit).clamp(0.0, 1.0);
6}
7
8// Color helper
9import 'package:flutter/material.dart';
10Color progressColor(double ratio) {
11  if (ratio >= 1.0) return Colors.red;
12  if (ratio >= 0.8) return Colors.amber;
13  return Colors.green;
14}

For monthly rent, weekly subscriptions, or daily coffee budgets, create a recurringTemplates Firestore collection with fields matching transactions plus a nextRunDate (Timestamp) and frequencyDays (Integer). Deploy a Firebase Cloud Function scheduled to run daily. The function queries recurringTemplates where nextRunDate is less than or equal to today, creates a transaction document for each result, then updates nextRunDate by adding frequencyDays. In FlutterFlow add a Create Recurring option on your AddTransaction form that writes to recurringTemplates instead of transactions. Show active recurring templates on a separate Recurring tab so users can pause or delete them.

1// functions/processRecurring.js
2const { onSchedule } = require('firebase-functions/v2/scheduler');
3const { getFirestore, Timestamp, FieldValue } = require('firebase-admin/firestore');
4
5exports.processRecurring = onSchedule('every day 06:00', async () => {
6  const db = getFirestore();
7  const now = Timestamp.now();
8  const snap = await db.collection('recurringTemplates')
9    .where('nextRunDate', '<=', now)
10    .where('active', '==', true)
11    .get();
12  const batch = db.batch();
13  snap.docs.forEach(doc => {
14    const data = doc.data();
15    const txRef = db.collection('transactions').doc();
16    batch.set(txRef, {
17      userId: data.userId,
18      accountId: data.accountId,
19      amount: data.amount,
20      category: data.category,
21      description: data.description,
22      date: now,
23      isRecurring: true,
24      recurringId: doc.id,
25    });
26    const nextRun = new Date(data.nextRunDate.toDate());
27    nextRun.setDate(nextRun.getDate() + data.frequencyDays);
28    batch.update(doc.ref, { nextRunDate: Timestamp.fromDate(nextRun) });
29  });
30  await batch.commit();
31});