PFT
Design a mobile-first daily expense tracking application UI using Flutter (Material 3) principles. The app should be extremely easy to use, visually eye-pleasing, and suitable for both first-time and long-term users. Use modern UI trends (soft 3D / neumorphism / subtle depth, smooth shadows, rounded corners) while keeping performance and clarity in mind. 🎨 Visual Style & Theme Use a consistent, calming, eye-pleasing color palette across all screens (soft gradients, pastel or modern neutral tones with strong contrast for readability) Background should not be plain white — use subtle gradients or soft tones Add meaningful icons throughout the UI (transactions, cards, calendar, charts) Typography should be mobile-friendly, readable, and well-spaced Icons and titles should be aligned horizontally to save vertical space UI should feel friendly and delightful (optionally include a small mascot area, e.g., a Pikachu illustration/message space at the top) 🧾 Screen 1: Add Transaction Page Purpose Quickly log Expense, Investment, or Income with minimal friction. Layout & Components Top App Bar Page icon placed to the left of the page title Leave vertical space above for app logo or mascot message Transaction Form Date Default: current date On tap → open a compact calendar date picker Category (Dropdown) Order: Expense → Investment → Income Subcategory Dependent dropdown based on selected category Amount Numeric input with currency symbol Description Free-form text input Paid By Use radio buttons or checkboxes (not dropdown) Options: Shubham Yashika (Dropdown version should be commented out in code, not deleted) Buttons & Space Optimization Avoid single full-width buttons where unnecessary Place two buttons in a single row wherever possible Use the freed space to show: Helpful micro-tips Contextual hints Or quick stats (e.g., today’s total spend) Bottom Section Show last 5 transactions in a compact, scrollable list Each transaction should include: Icon (category-based) Amount Category + Subcategory Paid By indicator 📊 Screen 2: Summary Page Purpose Provide a clear visual overview of expenses, investments, and income. Top App Bar Page icon placed to the left of the title Clean and minimal Summary Cards (Primary Interaction) Display three rectangular cards: Expense Investment Income Each card should: Use a consistent theme color Include a distinct, meaningful icon Have a subtle 3D / elevation effect Show: Running month total Cumulative total till date Display both clearly (e.g., stacked text, divider, or visual hierarchy) Interaction Tapping a card: Selects the category Highlights the card using theme color Updates the calendar and charts below This interaction replaces separate category toggle buttons Calendar View Calendar should be directly visible Header should display Month + Year (center aligned) User can change month/year Calendar color theme must match selected category Interaction Tap on a date → open a list of transactions for that day Show expenses / investments / income based on selected card Charts & Insights Show line chart or bar chart below the calendar Chart scale must be dynamic based on data Chart title should update dynamically: “Expense Breakdown” “Investment Breakdown” “Income Breakdown” Keep charts minimal, readable, and animated subtly 🚫 Explicit Exclusions Do NOT show: Net Balance “Paid By” breakdown charts on summary page ⚙️ Technical & Platform Notes Target platform: Mobile only Framework: Flutter Use Flutter-native UI components and animations Follow Material 3 design where appropriate Ensure smooth transitions and responsive layouts for different screen sizes 🎯 Goal The app should feel: Effortless to log transactions Visually delightful Modern and premium Something users want to open every day