XPay: Flutter Digital Wallet UI Kit | 44 Screens for Fintech & Mobile Banking

Noor Mohammad RahmaniMarch 28, 2026

Production-ready fintech Flutter UI kit with 44 handcrafted screens across 14 feature modules. Complete digital wallet experience with send/request money, QR payments, currency exchange, bill splitting, budget tracking, card management, invoicing, and rewards system. Built with GoRouter, fl_chart analytics, and Light/Dark theme support.

Premium Digital Wallet Platform

XPay is a comprehensive Flutter UI kit purpose-built for fintech, digital wallet, mobile banking, and personal finance applications. With 44 handcrafted screens across 14 feature modules, XPay provides everything you need to launch a polished finance app in record time. Built with Flutter 3.7+, GoRouter, and fl_chart, XPay delivers a complete financial experience — from animated onboarding through payments, budgets, invoices, card management, currency exchange, and rewards. Every screen has been meticulously designed with modern design principles: clean typography, consistent spacing, and a sleek monochrome-first color system with vibrant accents.

44Handcrafted Screens

14Feature Modules

35+Named Routes

Purchase Now

🎯 What Makes XPay Different

1. Complete Payment Ecosystem

Six dedicated payment screens: Send Money, Request Money, QR Code payments (display & scan), Payment Requests with status badges, Currency Exchange with 6 currencies, and Bill Splitting with equal/custom splits. Everything a digital wallet needs.

2. 14 Feature Modules

Unlike basic UI kits, XPay covers authentication, dashboard, accounts, contacts, transactions, payments, cards, budgets, invoices, notifications, settings, rewards, and user profile — a complete fintech app foundation.

3. Budget & Invoice Management

Full budget tracking with 6 categories and progress bars, plus professional invoice management with status filters (Paid, Pending, Overdue, Draft), line-item breakdown, and invoice creation forms.

4. Chart Analytics with fl_chart

Account detail screens feature bar chart analytics for spending visualization. Beautiful, interactive charts that bring financial data to life.

5. 35+ GoRouter Routes

Declarative navigation with deep linking support. Named routes for every screen make navigation predictable and maintainable. Platform-adaptive components (iOS/Android date pickers) included.

6. Zero Backend Dependency

Pure UI kit with mock data — ready to connect to any API. Clean separation means you can integrate Firebase, REST APIs, or any backend without refactoring UI code.

📱 Complete Feature Breakdown (44 Screens)

🔐 Authentication & Onboarding (7 screens)

✓ Splash Screen - Animated app launch with pulse animation and fade-in tagline
✓ Start Screen - 3-page onboarding carousel with gradient backgrounds
✓ Login Screen - Phone + password with branded gradient header
✓ Register Screen - Step 1/3: Phone number with terms checkbox
✓ OTP Verification - Step 2/3: 6-digit code entry with countdown timer
✓ Complete Register - Step 3/3: Name, email, password form
✓ Forgot Password - Password recovery with gradient icon

🏠 Home & Dashboard (5 screens)

✓ Home Screen - Main container with PageView navigation (4 tabs)
✓ Home Tab - Dashboard: balance card, recent transactions, wallet switch
✓ Accounts Tab - Total balance summary with account list cards
✓ History Tab - Searchable transaction history with date filter chips
✓ Profile Tab - User avatar, profile edit link, settings shortcuts

💳 Account Management (3 screens)

✓ Account List - Portfolio total, multiple accounts, add button
✓ Account Detail - Account info with bar chart analytics & transaction list
✓ Account Form - Create/edit account with currency selector (USD, EUR, AFN)

👥 Contact Management (3 screens)

✓ Contact List - Searchable list with favorites section
✓ Contact Detail - Contact info, phone, call/message, transaction history
✓ Add Contact - Name, phone, email, notes, avatar input

💸 Transactions (3 screens)

✓ Transaction Detail - Full transaction detail with status & options
✓ Transaction Form - Manual entry: deposit/withdraw, amount, category
✓ Pay/Receive - Peer transfer with contact avatar & categories

💰 Payments (6 screens)

✓ Send Money - Contact search, amount entry, notes, validation
✓ Request Money - Multi-select contacts, amount, submit
✓ QR Code - Dual-tab: "My QR" display + "Scan" camera view
✓ Payment Requests - Incoming (3) & Outgoing (4) tabs with status badges
✓ Currency Exchange - 6-currency converter (USD, EUR, GBP, AFN, AED, TRY) with swap
✓ Split Bill - Total amount, participant picker, equal/custom splits

💳 Card Management (2 screens)

✓ Card List - Multiple cards (Visa/Mastercard) with total balance display
✓ Add Card - Card number, holder name, expiry, CVV inputs

📊 Budget Tracking (3 screens)

✓ Budget Overview - 6 categories with spent/limit progress bars
✓ Add Budget - Category selector (8 options), amount, period selection
✓ Edit Budget - Pre-populated budget editing form

📄 Invoice Management (3 screens)

✓ Invoice List - 5 invoices with filter chips (All, Paid, Pending, Overdue, Draft)
✓ Add Invoice - Client details, description, line items, due date picker
✓ Invoice Detail - Client info, items breakdown, status badge

🔔 Notifications (1 screen)

✓ Notifications - Grouped (Today/Earlier) with 5 notification types and icons

⚙️ Settings (5 screens)

✓ Settings Hub - Toggles: notifications, dark mode, biometric
✓ Security Dashboard - Score card, 2FA toggle, fingerprint, login alerts
✓ Help & Support - FAQ, contact support, social media links
✓ Language - 5 languages (English, Farsi, Pashto, Arabic, Turkish)
✓ Privacy Policy - 6-section static policy text viewer

🏆 Rewards (1 screen)

✓ Rewards Dashboard - Points display, 6 achievement cards with status badges

👤 User Profile (1 screen)

✓ Update Profile - Name, phone (readonly), email, avatar upload with camera option

✅ Shared Utility (1 screen)

✓ Success Screen - Generic confirmation with animated checkmark & action buttons

All screens feature consistent styling, empty state handling, platform-adaptive components (iOS Cupertino / Android Material date pickers), and reusable widget patterns. The Success Screen is reused across send, request, exchange, split, and transaction flows.

👥 Perfect For

🏦 Digital Wallets
Build mobile payment apps with send/receive money, QR payments, payment requests, and transaction history. 💰 Personal Finance Apps
Create budget tracking, expense management, and financial planning tools with analytics and insights. 🏧 Mobile Banking
Develop neobanking platforms with multi-account management, card services, and currency exchange. 📄 Invoicing & Business Apps
Launch invoicing solutions with client management, line-item billing, and payment tracking.

⚙️ Technical Stack & Architecture

Framework & Language

Flutter 3.7+ | Dart 3.7+
Feature-first modular architecture
GoRouter with 35+ named routes
Light & Dark theme support

Navigation & Routing

go_router (v14.2.7) - Declarative routing with deep linking
35+ named routes
Centralized route configuration
Platform-adaptive navigation

Charts & Data Visualization

fl_chart (v0.70.2) - Beautiful bar charts for account analytics
Spending visualization
Budget progress tracking

UI & Components

hugeicons (v0.0.4) - Premium icon pack
cupertino_icons (v1.0.8) - iOS-style icons
cached_network_image (v3.4.1) - Efficient image loading & caching
Platform-adaptive date pickers (Cupertino/Material)

Design System

Color Scheme:
- Primary: #000000 (Black) — Buttons, icons, active states
- Primary Variant: #1A1A1A — Subtle highlights
- Secondary: #43A047 (Green) — Success states, deposits
- Error: #D32F2F (Red) — Error states, withdrawals
- Surface: #FFFFFF — Card backgrounds
- 9-shade grayscale palette (gray50 → gray900)
Typography: Material Design type scale with 600 semi-bold buttons
Components: Pill-shaped buttons (borderRadius: 50), 24px card radius, grey borders

Shared Widget Library

SuccessScreen — Reusable confirmation with animated checkmark
NameAvatar — Initial-based avatar with auto-generated colors
FullWidthButton — Primary/secondary button with loading state
BasicInput — Styled text input with validation and password toggle
AdaptiveDatePicker — iOS (Cupertino) / Android (Material) date picker

Platform Support

Android API 21+
iOS 12.0+
Web (Chrome, Firefox, Safari, Edge)
100% responsive design

Code Quality: Feature-first architecture with 14 modules, consistent presentation/screens/ and presentation/widgets/ structure per feature, centralized theme configuration, GoRouter with 35+ routes, and zero backend dependency. Runs out of the box with mock data.

🖼️ Screenshots

XPay Flutter digital wallet UI kit showing dashboard, payments, budget tracking, card management, and invoice interfaces

Frequently Asked Questions

Is this a complete fintech app?

XPay includes 44 production-ready UI screens across 14 feature modules with GoRouter navigation and complete user flows. This is a comprehensive UI/UX foundation. You'll need to integrate your backend API, payment processing, authentication service, and financial data providers.

Does it include dark mode?

Yes! A dark theme scaffold is included and wired up in app_theme.dart. Light theme is active by default. Switch by changing themeMode: ThemeMode.dark in main.dart for complete dark mode support.

Does the currency exchange work with real rates?

The currency exchange UI supports 6 currencies (USD, EUR, GBP, AFN, AED, TRY) with swap functionality. Connect your preferred exchange rate API for real-time conversion rates.

Can I use a different state management?

Absolutely! XPay is currently stateless with mock data, giving you freedom to integrate Bloc, Riverpod, Provider, GetX, or any state management solution without migration overhead.

Does QR code scanning work?

The QR code screen includes dual-tab UI for displaying your QR and scanning others. Integrate camera_qr or mobile_scanner package to enable actual QR code functionality.

Is budget tracking functional?

Yes! Budget screens include complete UI with 8 category options, period selection (weekly, monthly, yearly), and progress bar visualization. Connect your data layer for persistent budget tracking.

Does it support multiple accounts?

Yes! Account management supports multiple accounts with portfolio total, individual account details with fl_chart analytics, and create/edit forms with currency selection.

Can I add more languages?

Yes! The language screen showcases 5 languages (English, Farsi, Pashto, Arabic, Turkish). Extend with Flutter's localization system for full internationalization.

Is biometric authentication included?

The security settings UI includes biometric toggle switch. Integrate local_auth package for actual fingerprint and Face ID authentication.

Do I get future updates?

Yes! All future updates, new screens, features, bug fixes, and Flutter version upgrades are included with your one-time purchase. No subscription fees.

📦 Package Includes

✅ Complete Source Code
44 handcrafted screens across 14 feature modules including authentication, dashboard, accounts, contacts, transactions, payments, cards, budgets, invoices, notifications, settings, rewards, and profile. ✅ Full Payment Ecosystem
Send money, request money, QR code payments, payment requests with status tracking, currency exchange with 6 currencies, and bill splitting with equal/custom options. ✅ Budget & Invoice Management
Complete budget tracking with 8 categories and progress bars. Professional invoicing with status filters, line-item breakdown, and client management. ✅ Card Management
Payment card showcase (Visa/Mastercard), total balance display, and add card form with validation. ✅ Chart Analytics
fl_chart integration for account analytics with bar chart visualization of spending patterns. ✅ 35+ Named Routes
GoRouter configuration with declarative routing, deep linking support, and centralized navigation. ✅ Light & Dark Theme
Complete theme system with monochrome-first design, green/red accents, and dark mode scaffold ready for customization. ✅ Shared Widget Library
Reusable components: SuccessScreen, NameAvatar, FullWidthButton, BasicInput, AdaptiveDatePicker, and platform-adaptive UI elements. ✅ Lifetime Updates
All future screens, features, bug fixes, and Flutter version upgrades included forever. ✅ Email Support
Setup assistance, integration guidance, and technical support via Email ([email protected]).

🚀 Get Started Today

Purchase Now

Launch your fintech platform in days, not months. XPay provides 44 handcrafted screens, complete payment ecosystem, budget & invoice management, card services, chart analytics, and Light/Dark theme support across 14 feature modules. Focus on your backend integration and compliance — the UI is ready. Start building today!