Mintyn Mobile

A Flutter fintech dashboard built from a Figma design spec. Covers the Dashboard and Cards screens with mocked data, smooth animations, and a clean folder structure.

---

Demo

---

Screens

Home - balance card, quick action shortcuts, transaction history with Weekly / Monthly / Today filters

Profile Drawer - slides in from the left with profile settings, notification toggle, and navigation to the Cards screen

Cards - swipeable card carousel with Physical / Virtual tabs, card settings toggles, freeze and reveal actions

Card Transaction - compact card preview, interactive spending chart, transaction list with period picker

---

Setup

You need Flutter 3.11 or later.

git clone <repo-url>
cd mintyn_mobile
flutter pub get
flutter run

To run tests:

flutter test

---

Project Structure

Feature-first layout. Each feature owns its data models, state, and UI.

lib/
├── core/
│   ├── assets/       # AppAssets - central asset path references
│   ├── theme/        # Colors, typography (Arimo), spacing, radius, theme
│   ├── utils/        # CurrencyFormatter
│   └── widgets/      # AppButton, TransactionItem, StyledCard
└── features/
    ├── home/
    │   ├── data/models/        # UserModel, TransactionModel
    │   └── presentation/
    │       ├── pages/          # HomePage
    │       ├── providers/      # HomeNotifier
    │       └── widgets/        # BalanceCard, QuickActionsRow,
    │                           # TransactionHistorySection, ProfileDrawer
    └── cards/
        ├── data/models/        # CardModel, SpendingPoint
        └── presentation/
            ├── pages/          # CardsPage, CardTransactionPage
            ├── providers/      # CardsNotifier
            └── widgets/        # CreditCardWidget, CardSettingsList,
                                # SpendingChart

---

State Management

Riverpod StateNotifier throughout.

• HomeNotifier - user data, transactions, balance visibility, active filter
• CardsNotifier - card list, selected card, active tab, CVV reveal, freeze/unfreeze, settings toggles
• filteredTransactionsProvider - derived provider that applies the Weekly / Monthly / Today filter
• spendingDataProvider - mock chart data

---

Navigation

No bottom nav, kept faithful to the Figma design.

Home ──(hamburger)──► Profile Drawer
                            │
                       Credit Card
                            │
                            ▼
                       Cards Screen ──(Card Transactions)──► Card Transaction Screen

---

Packages Used

Package	Why
flutter_riverpod	State management
flutter_screenutil	Responsive sizing (393x852 base)
flutter_svg	SVG icons
google_fonts	Arimo font
fl_chart	Spending area chart
gap	Spacing
intl	Date and number formatting

---

Notes

All data is mocked, no network calls. Swapping in a real API only touches the provider and service layers.

The asset/ folder at the root has the original icon downloads before renaming, safe to delete.

Commits are structured to show a clear build-up: init, scaffold, design system, home screen, drawer, cards, card transactions, then docs.