Adaptive UI – Rugburn https://rugburn.dev Software Development Wed, 22 Oct 2025 01:23:10 +0000 en-US hourly 1 https://wordpress.org/?v=6.9.1 https://i0.wp.com/rugburn.dev/wp-content/uploads/2025/07/20250729_2055_Software-Developer-Logo_remix_01k1cghcbzfzy8hv45v6gsykj2.webp?fit=32%2C32&ssl=1 Adaptive UI – Rugburn https://rugburn.dev 32 32 244879875 Flutter Expense Tracking App https://rugburn.dev/flutter-expense-tracking-app/ Sat, 11 Oct 2025 15:28:56 +0000 https://rugburn.dev/?p=638 .flutter-embed-container { display: flex; justify-content: center; align-items: center; padding: 20px; background: #f5f5f5; } .mobile-frame { width: 375px; height: 667px; border-radius: 30px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.3); border: 10px solid #1a1a1a; position: relative; } .mobile-frame iframe { width: 100%; height: 100%; border: none; } /* Responsive - full width on mobile */ @media (max-width: 768px) { .mobile-frame { width: 100%; height: 800px; border-radius: 0; border: none; } }

Developed with Flutter 3.35 / Dart 3.9

This project is a cross-platform expense tracking app. Users can add and delete expenses, and quickly compare total expenses visually on the included chart. Check out the live Expense Tracker web app.

Theming

This app offers two unique UIs for Dark and Light theme user preferences.

Android Light/Dark Theme

Responsive

The app also support responsive UI adjustments, reorganizing elements for portrait and landscape orientations.

Adaptive

This app also demonstrates Adaptive UI adjustments, to give a more native experience if the user is viewing on Android or iOS.

Android v iOS

Testing

This project includes more expansive Widget Testing (component testing) to ensure elements continue to render and function properly with future updates.

Skills

  • Theming to support dark and light mode UIs
  • Modal Views for adding new expenses and alerting user of invalid input
  • Dismissible list items, to allow user to swipe an expense to remove it
  • Snackbar notifications to allow user to ‘undo’ when deleting an expense
  • Custom Chart Widget to visually display total expenses
  • Responsive UI to adjust UI elements for different screen sizes and rotations.
  • Adaptive UI to fine tune look for iOS vs Android
  • More in-depth Widget Testing (component testing) to test UI element functionality in both portrait and landscape renderings.
]]> 638