Expense Tracker - Flutterflow Typing CST Test

Expense Tracker — Flutterflow Code

Tracks expenses with visual input fields and lists in FlutterFlow, enhanced with custom Dart code for managing total sums.

import 'package:flutter/material.dart';

class ExpenseTracker extends StatefulWidget {
	@override
	_ExpenseTrackerState createState() => _ExpenseTrackerState();
}

class _ExpenseTrackerState extends State<ExpenseTracker> {
	final List<Map<String, dynamic>> expenses = [];
	final TextEditingController desc = TextEditingController();
	final TextEditingController amount = TextEditingController();
	double get total => expenses.fold(0, (sum, e) => sum + e['amount']);

	void addExpense() {
		if(desc.text.isNotEmpty && amount.text.isNotEmpty) {
		setState(() {
		expenses.add({'desc': desc.text, 'amount': double.parse(amount.text)});
		desc.clear();
		amount.clear();
		});
		}
	}

	@override
	Widget build(BuildContext context) {
		return Scaffold(
		appBar: AppBar(title: Text('Expense Tracker')),
		body: Column(
		children: [
		TextField(controller: desc, decoration: InputDecoration(hintText: 'Description')),
		TextField(controller: amount, keyboardType: TextInputType.number, decoration: InputDecoration(hintText: 'Amount')),
		ElevatedButton(onPressed: addExpense, child: Text('Add Expense')),
		Text('Total: $' + total.toStringAsFixed(2)),
		Expanded(
		child: ListView.builder(
		itemCount: expenses.length,
		itemBuilder: (context, index) => ListTile(title: Text(expenses[index]['desc']), trailing: Text('$' + expenses[index]['amount'].toString())),
		),
		),
		],
		),
		);
	}
}

Flutterflow Language Guide

FlutterFlow is a low-code visual app builder that enables users to create native iOS, Android, and web applications using a drag-and-drop interface, powered by Google’s Flutter framework.

More Flutterflow Typing Exercises

Practice Other Languages