How to Set Up a Financial or Budgeting App in FlutterFlow

In Firestore, create a transactions collection with fields: userId (String), amount (Double), type (String: 'income' or 'expense'), category (String from your Option Set: Food, Transport, Entertainment, Housing, Utilities, Shopping, Health, Other), date (Timestamp), and note (String, optional). Create a budgets collection with fields: userId (String), category (String), monthlyLimit (Double), currentSpent (Double, default 0), and month (String, format: '2026-03' for March 2026). Set Firestore rules so users can only read and write their own transactions and budgets (where userId == request.auth.uid). The month field on budgets allows querying the budget for the current month specifically.

Create an AddTransactionPage or BottomSheet with the following inputs: a ToggleButtons widget with two options (Income and Expense) bound to Page State transactionType. An amount TextField with number keyboard and currency prefix. A category DropDown populated from your Option Set (only shown when type is Expense, hidden for Income via Conditional Visibility). A DateTimePicker defaulting to today. An optional note TextField. The Save button's On Tap Action Flow: validate that amount is greater than 0, then Create Document in transactions with all fields plus userId set to current user's UID. After creation, if type is 'expense', query the budgets collection for this user + category + current month. If a budget doc exists, Update Document with FieldValue.increment(amount) on the currentSpent field. Show a SnackBar confirming the transaction and navigate back to the dashboard.

Create a DashboardPage as the main screen. At the top, add three summary cards in a Row: Total Balance (income minus expenses for the current month), Total Income (green), and Total Expenses (red). Bind these to Backend Queries on transactions for the current month with appropriate filters. Below, add a Custom Widget using the fl_chart package to render a PieChart of expense breakdown by category. The widget accepts a List of category-amount pairs as a Component Parameter. Create a Custom Function that groups the current month's expense transactions by category and sums the amounts. Pass the result to the PieChart widget. Each slice should use a distinct color per category and show the percentage label. Below the chart, add a legend Row mapping colors to category names.

1// Custom Widget: ExpensePieChart
2import 'package:fl_chart/fl_chart.dart';
3
4class ExpensePieChart extends StatelessWidget {
5  final List<CategoryAmount> data;
6  const ExpensePieChart({required this.data});
7
8  @override
9  Widget build(BuildContext context) {
10    final total = data.fold(0.0, (sum, item) => sum + item.amount);
11    return PieChart(
12      PieChartData(
13        sections: data.map((item) {
14          final pct = total > 0 ? (item.amount / total * 100) : 0;
15          return PieChartSectionData(
16            value: item.amount,
17            title: '${pct.toStringAsFixed(0)}%',
18            color: item.color,
19            radius: 60,
20            titleStyle: const TextStyle(fontSize: 12, color: Colors.white),
21          );
22        }).toList(),
23        sectionsSpace: 2,
24        centerSpaceRadius: 40,
25      ),
26    );
27  }
28}

Below the PieChart, add a section titled 'Budget Tracking'. Query the budgets collection where userId equals current user and month equals the current month string. Display results in a ListView. Each item is a Row containing: the category name Text, a LinearPercentIndicator with percent set to currentSpent / monthlyLimit (capped at 1.0 to avoid overflow), and a Text showing '$currentSpent / $monthlyLimit'. Set the progress bar color conditionally: green when under 75%, amber when 75-99%, red when at or over 100%. Add a Set Budget button that opens a BottomSheet with a category DropDown and monthlyLimit TextField. On save, create or update the budget doc for the selected category and current month.

Add a section below the budgets showing a 6-month spending trend. Create a Custom Widget using fl_chart's LineChart. Query transactions for the past 6 months grouped by month. Create a Custom Function that takes a list of transactions and returns monthly totals as a list of month-amount pairs. The LineChart shows months on the X axis and total spending on the Y axis. Use two lines: one for income (green) and one for expenses (red). Add touch interaction so tapping a data point shows a tooltip with the exact amount. This gives users a visual trend of their financial health over time.

Create a Cloud Function triggered onWrite to the budgets collection. When currentSpent is updated, check if currentSpent >= monthlyLimit. If so, create a notification document in users/{userId}/notifications with title 'Budget Alert', body 'You have exceeded your {category} budget of ${monthlyLimit} this month', and type 'budget_alert'. Also check at 80%: if currentSpent >= monthlyLimit * 0.8 AND a notification for 80% has not been sent yet (check a flag field notified80 on the budget doc), send a warning notification and set notified80 to true. Reset notified80 at the start of each month via a scheduled function that also resets currentSpent to 0 for all budgets.