Expense Tracker

Cross-platform expense tracking application built with Flutter ❤️, featuring responsive design, and intuitive user experience.

Features

Core Functionality

• Add Expenses: Create new expense entries with title, amount, date, and category
• Expense Categories: Organize expenses into Food, Travel, Leisure, and Work categories
• Visual Analytics: Chart visualization showing expense distribution by category
• Delete with Undo: Remove expenses with snackbar undo functionality
• Date Selection: Built-in date picker with validation

User Experience

• Responsive Design: Adaptive layouts for mobile and desktop screens
• Material 3: Modern Material Design 3 components and theming
• Input Validation: Comprehensive form validation with user-friendly error messages
• Keyboard Handling: Optimized input handling with proper keyboard awareness

Technical Highlights

• State Management: Efficient StatefulWidget-based state management

Screenshots

Adding a expense	Expenses list	Dismissing expenses

Architecture

Project Structure

lib/
├── main.dart                    # App entry point and theme configuration
├── models/
│   └── expense.dart            # Data models (Expense, ExpenseBucket, Category)
└── widgets/
    ├── expenses.dart           # Main expense management screen
    ├── new_expense.dart        # Expense creation modal
    ├── chart/
    │   ├── chart.dart         # Expense visualization chart
    │   └── chart_bar.dart     # Chart bar component
    └── expenses_list/
        ├── expenses_list.dart  # Expense list container
        └── expense_item.dart   # Individual expense item

Simple architecture

┌─────────────────────────────────────────────────────────────┐
│                        main.dart                            │
│                   (App Entry Point)                         │
│                Theme & Color Schemes                        │
└─────────────────────┬───────────────────────────────────────┘
                      │
┌─────────────────────▼───────────────────────────────────────┐
│                   Expenses Widget                           │
│                 (Main Screen)                               │
│   ┌─────────────────────────┐  ┌─────────────────────────┐  │
│   │       Chart Widget      │  │    ExpensesList Widget  │  │
│   │   (Visual Analytics)    │  │   (Expense Display)     │  │
│   └─────────────────────────┘  └─────────────────────────┘  │
│              │                            │                 │
│   ┌──────────▼──────────┐      ┌──────────▼──────────┐      │
│   │    ChartBar Widget  │      │  ExpenseItem Widget │      │
│   └─────────────────────┘      └─────────────────────┘      │
└─────────────────────┬───────────────────────────────────────┘
                      │
┌─────────────────────▼───────────────────────────────────────┐
│                 NewExpense Widget                           │
│               (Modal Bottom Sheet)                          │
│            Form Input & Validation                          │
└─────────────────────┬───────────────────────────────────────┘
                      │
┌─────────────────────▼───────────────────────────────────────┐
│                   models/expense.dart                       │
│                                                             │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐          │
│  │   Expense   │  │  Category   │  │ExpenseBucket│          │
│  │   Model     │  │    Enum     │  │   Model     │          │
│  └─────────────┘  └─────────────┘  └─────────────┘          │
└─────────────────────────────────────────────────────────────┘

Technology Stack

• Framework: Flutter 3.x
• State Management: Simple StatefulWidgets
• Date Formatting: intl package

Key Implementation Details

Responsive Design

The application adapts its layout based on screen width:

• Mobile Layout (width < 600px): Vertical stack with chart on top
• Desktop Layout (width >= 600px): Horizontal layout with side-by-side chart and list

Getting Started

Prerequisites

• Flutter SDK 3.0.6 or higher
• Dart SDK compatible with Flutter version

Installation

# Clone the repository
git clone https://github.com/yohanangulo/expense-tracker.git
cd expense-tracker

# Install dependencies
flutter pub get

# Run the application
flutter run

---

Built with Flutter | Developed by Yohan Angulo