RADIX — Premium Personal Finance Tracker

<p align="center"> <img src="assets/images/logo/LOGORADIX.png" alt="RADIX Logo" width="120" height="120" style="border-radius: 20%;" /> </p> <p align="center"> <strong>A premium, minimalist, and highly responsive personal finance application built with Flutter.</strong> </p> <p align="center"> <img src="https://img.shields.io/badge/Flutter-3.12.1+-02569B?style=for-the-badge&logo=flutter&logoColor=white" alt="Flutter" /> <img src="https://img.shields.io/badge/Dart-3.x-0175C2?style=for-the-badge&logo=dart&logoColor=white" alt="Dart" /> <img src="https://img.shields.io/badge/SQLite-Sqflite-003B57?style=for-the-badge&logo=sqlite&logoColor=white" alt="SQLite" /> <img src="https://img.shields.io/badge/Platform-Android%20%7C%20iOS%20%7C%20Web%20%7C%20Desktop-lightgrey?style=for-the-badge" alt="Platforms" /> </p>

---

Table of Contents

• 01. Introduction
• 02. The Motivation (Why I Built This)
• 03. Features & Engineering Highlights
• 04. Tech Stack & Key Libraries
• 05. Development Tools & AI Assistants
• 06. Project Architecture
• 07. Getting Started
• 08. Retrospective & Key Learning Points
• 09. Special Thanks
• 10. Contribution & Feedback

---

01. Introduction

RADIX is an independent, offline personal finance tracker developed as an educational and experimental project. Built with Flutter, it features a Crisp Apple Minimalist White light mode and a Luxury Dark Mode, utilizing custom typography (Monument Extended, Font Ultra) and offline database capabilities.

This is my very first programming project. It was developed over a 5-week period between June 8 and July 15 by a 16-year-old creator. While I co-piloted the development with AI (often called "vibe-coding"), I took complete ownership of the system design and architecture. I designed all layouts, conceptualized and implemented the animations, mapped the local SQLite database structures to the reactive UI layers (via ValueNotifiers/Providers), and implemented the mathematics for real-time currency conversions.

---

02. The Motivation (Why I Built This)

The development of RADIX was inspired by three main factors:

• Interest in Finance & AI: I have a deep curiosity for financial systems, artificial intelligence, and building products. This project serves as a learning step to understand how they intersect in real-world applications.

• Addressing the Youth "Money Leak" Problem: I observed a prevalent social pattern among my peers and youth: the phenomenon of "micro-spending creep" or the "money leak." Young people frequently spend small, seemingly insignificant amounts on daily comforts—such as bubble tea, subscription services, gaming micro-transactions, or impulse snacks. Individually, these purchases feel negligible, but cumulatively, they create a silent leakage that drains their monthly allowance, preventing them from saving or understanding their actual cash flow. Most traditional budgeting apps are dry, clinical, and complex, which discourages teens from using them consistently. RADIX was built as a response to this: by combining a premium, responsive visual design with smooth micro-animations, I wanted to lower the friction of tracking and make financial awareness engaging. The dynamic budgeting indicators and instant visual analytics are engineered specifically to help young users identify where their money is leaking, helping them take control of their finances and build long-term financial literacy.

• Childhood Dream & Business Mindset: Since I was young, I dreamed of building and launching functional products. Developing RADIX at 16 years old is my first step in learning product creation and business execution.

---

03. Features & Engineering Highlights

• Reactive Daily Transaction Logger

  • Instant logging of expenses and incomes.

  • Multi-attribute transactions including title, type, category, date, and currency mapping.

  • Flexible Income Strategies: Supports two distinct tracking logic strategies: add_to_budget (directly increases the monthly budget limit) and deduct_from_spent (cancels out or deducts from recorded spent amounts).

  • Quick-search filters and custom multi-sorting options (by Date, Amount, etc.) implemented on the database query layer.

• Dynamic Currency Exchange & Conversion Math

  • Supports switching active currencies (USD, EUR, CNY, VND, GBP, JPY, AUD, CAD) on-the-fly.
  • Atomic Database Transactions: Bulk conversion calculations for historical logs and monthly budgets run within a single, atomic SQLite transaction (db.transaction). This guarantees absolute database integrity and auto-rollback on failure.
  • Math formulation utilizes relative exchange rates to convert all database amounts dynamically and notify the UI layer reactively.

• State-to-Database Bridging: Synchronizes physical database records to the presentation layer reactively using a custom state structure powered by ValueNotifier and InheritedWidget wrappers (ThemeProvider and CurrencyProvider).

  • Real-time arithmetic tracking of:
    • Remaining Budget = Monthly Budget - Total Expenses
  • High-precision floating-point calculation to handle web and mobile platforms smoothly without rounding errors.

• Performance-Optimized Charts & Analytics

  • Visual financial analytics powered by fl_chart containing dynamic donut charts for category share distributions, premium category icons, featuring both total expense and specific expenses for categories.
  • Memoization Cache: Uses a custom transaction hashing algorithm to cache grouped transactions. It prevents redundant computation on every UI rebuild, achieving stable 60 FPS list scrolling.

• Premium Visual Themes & Fine-tuned Animations

  • Crisp Apple Minimalist White (Light) & Luxury Dark themes with centralized color schemes (AppColorLocker).
  • Clockwise Sequential Loop Dot Loader: A custom-designed, physics-tuned splash animation where money symbols move sequentially in a clockwise loop using sequential TweenSequences and curved animation controllers.
  • Hold-to-Confirm Gesture (Settings Reset): A 3-second continuous press gesture built with custom AnimationControllers that maps user duration to a circular scaling indicator, preventing accidental deletions.
  • Fluid Page Route Transitions: Custom slide and scale transitions for navigation, ensuring a polished, platform-native feel.

---

04. Tech Stack & Key Libraries

• Framework: Flutter (Dart)
• Database: sqflite (Native SQLite) & sqflite_common_ffi_web (IndexedDB + WebAssembly SQLite for Web compatibility).
• Data Visualization: fl_chart for smooth and interactive charting.
• Localization & Formatting: intl.
• Fonts: Custom typography with Google Fonts and Canva font assets (MonumentExtended, FontUltra).

  ⚠️ Font Note: It is recommended to use English for all input fields. Other languages (e.g., Vietnamese, Chinese, Arabic) may not render correctly due to limited character support in the custom fonts (MonumentExtended, FontUltra).

---

05. Development Tools & AI Assistants

The development of RADIX was supported by a suite of modern coding tools and AI pair programmers:

• VS Code: The primary Integrated Development Environment (IDE) used for building, testing, and formatting the application.
• Cline: The AI assistant framework that facilitated code modifications, search, and development coordination.
• Gemini: The LLM intelligence powering complex problem-solving, code suggestions, prompt writing, and analytical reasoning.
• Antigravity: The specialized agent system that performed pairs-programming, lint fixes, and static analysis verification.

---

06. Project Architecture

lib/
├── database/
│   └── database_helper.dart      # Singleton class managing local SQLite DB / Web IndexedDB
├── models/
│   └── transaction_model.dart    # Transaction schema and model helpers
├── screens/
│   ├── splash_screen.dart        # Splash screen featuring custom sequential loading loops
│   ├── nav_wrapper.dart          # Base navigation layout wrapper
│   ├── home_screen.dart          # Main dashboard, transaction log, and budgeting allocation dialogs
│   ├── graph_screen.dart         # fl_chart analytics containing custom category donuts and bar charts
│   ├── settings_screen.dart      # Theme selection, dynamic currency converter, and hold-to-reset data dialogs
│   └── instruction_screen.dart   # Features walkthrough guide page
├── theme/
│   ├── app_theme.dart            # Theme configurations for Crisp Light and Luxury Dark mode
│   ├── app_color_locker.dart     # Central color registries (AppColorLocker, LightColorLocker, DarkColorLocker)
│   ├── theme_provider.dart       # State notifier wrapping ThemeMode changes
│   └── currency_provider.dart    # State notifier wrapping active CurrencyInfo changes
├── widgets/
│   └── transaction_tile.dart     # Custom list tile widget representing a transaction item
└── main.dart                     # Entry point initializing database configurations and state providers

---

07. Getting Started

Try It Instantly

• Direct Download (Android): Download the pre-built RADIX Android APK directly from the Releases page and install it on your device.
• **Web Demo (Not rec