Expense Tracker

Run flutter run on the terminal to view the application in web mode or connect to a Mobile device and click Run within your IDE

This app tracks day to day expenses and displays the output on a bar chart

Features

Home screen that displays all the expenses as a scrollable list
A bar chart to track and show which categories have the highest or lowest expenses
The expenses on the home screen are dismissable when slid to either the right or left side
Snackbar displayed at the bottom of the screen to confirm an expense has been deleted, the same Snackbar offers the option to undo this action
Action Button on top right of the the app bar to add a new expense
A Bottom sheet modal that contains a form to fill out all the new expense details
An alert dialog to communicate any invalid inputs to the user before submitting the form
User is navigated to the home screen upon submitting the form or cancelling action

Packages

uuid | Dart package

Installation

flutter pub add uuid

import 'package:uuid/uuid.dart';

const uuid = Uuid();

class Expense {
  // constructor function with named parameters
  Expense({required this.title, required this.amount, required this.date})
      : id = uuid.v4(); // initializer list generating unique ids
  final String id;
  final String title;
  final double amount;
  final DateTime date;
}

Flutter package for formatting dates

flutter pub add intl

Refactoring of the modal bottom sheet

The following class shows a simple example of a TextField Widget

To add a visible label, one needs to add the decoration parameter which has the InputDecoration() widget that gives way to the label attribute

import 'package:flutter/material.dart';

class NewExpense extends StatefulWidget {
  const NewExpense({super.key});

  @override
  State<NewExpense> createState() => _NewExpenseState();
}

class _NewExpenseState extends State<NewExpense> {
  @override
  Widget build(BuildContext context) {
    return const Padding(
      padding: EdgeInsets.all(16),
      child: Column(
        children: [
          TextField(
            maxLength: 60, // max length of characters to type
            decoration: InputDecoration(
              label: Text('Expense Title'),
            ),
          ),
        ],
      ),
    );
  }
}

Flutter Trees

Widget Tree - Combination of widgets

Element Tree - In-memory representation of widgets, used for determining necessary UI updates

Render Tree - The visible UI building blocks

Testing

Type the following command to run all integration tests

flutter test integration_test

To test on a real iOS / Android device, first, connect the device and run the following command from the root of the project

flutter test integration_test/app_test.dart

NSM722/Expense_Tracker