Flutter Developer Technical Assessment

App Navigation & User Flow

Detailed User Journey

• App Launch: Opens to Dashboard screen showing total balance, income/expense summary, and recent transactions list.
• From Dashboard:
  • Tap transaction item → View/Edit/Delete transaction details (modal or new screen)
  • Use bottom nav to switch to any other screen
  • Pull to refresh data
• From Add Transaction:
  • Fill form → Save button → Show success message → Auto-navigate back to Dashboard
  • Cancel button → Return to previous screen
  • Form validation errors displayed inline
• From Analytics:
  • Change time period filter → Chart updates automatically
  • Tap category → Show detailed transaction list for that category
  • Use bottom nav to switch screens
• From Currency Converter:
  • Select currency from dropdown → Shows converted amount instantly
  • Refresh button → Fetches latest exchange rates
  • Use bottom nav to switch screens
• Android Back Button: Should exit app from Dashboard, otherwise navigate to previous screen or Dashboard.

Task Overview: Expense Tracker App

Build a fully functional Expense Tracker Mobile Application using Flutter with the following features and requirements. This task will test your UI/UX design skills, state management, API integration, local data persistence, and problem-solving abilities.

Required Features

1. 🎨 UI/UX Design Skills (25 points)

• Bottom Navigation Bar: Implement a bottom navigation bar with 4 tabs: Dashboard (🏠), Add Transaction (➕), Analytics (📊), and Currency Converter (💱). Each tab should navigate to its respective screen.
• Dashboard Screen (Default/Home): Display total balance, income, expenses with cards/widgets. Show recent transactions list with smooth scrolling. Tapping a transaction should show details or allow edit/delete.
• Add Transaction Screen: Form with amount input, category dropdown, transaction type (income/expense), date picker, and optional note field. After saving, navigate back to Dashboard with success message.
• Analytics Screen: Visual representation of spending by category (pie chart, bar chart, or custom visualization). Filter options by week/month/year. Tapping a category shows detailed breakdown.
• Currency Converter Screen: Display current balance in BDT with a dropdown to select target currency (USD, EUR, GBP, etc.). Show live exchange rate and converted amount with proper formatting. Include refresh button for latest rates.
• Navigation Flow: All screens accessible via bottom navigation. Smooth page transitions. Back button should work correctly on Android.
• Clean UI: Professional color scheme, proper spacing, readable typography, and smooth transitions/animations between screens.
• Responsive Design: Should work well on different Android screen sizes.

2. 🔌 REST API Integration (25 points)

• API Requirement: Integrate with a public Currency Exchange Rate API (e.g., https://api.exchangerate-api.com or similar free API)
• Feature: Add a "Currency Converter" section/screen that fetches live exchange rates and allows users to convert their BDT expenses to USD, EUR, or other currencies.
• Implementation: Use http or dio package for network calls. Handle loading states, success states, and error states properly.
• Error Handling: Show appropriate error messages when API fails (network error, timeout, invalid response, etc.)
• Data Parsing: Parse JSON response correctly and extract relevant currency data.
• Caching: Consider implementing rate caching to reduce