WalletKit - Flutter Banking and E-Wallet UI Kit

WalletKit is a complete digital banking and e-wallet app for iOS and Android, built in Flutter. It runs on mock data out of the box, so you can open it, try every flow, and then connect your own backend by replacing one set of classes. The demo bank is called Petrel; every name and number in it is fictional.

It covers the whole customer journey: onboarding, sign-in with a one-time code and PIN, and account opening with ID and selfie capture screens; a Home built around time, with a balance runway to payday and the payments coming up; activity with search and filters; sending money with a name check, review, PIN, and receipt; scheduled payments, requests, and saved recipients; QR payments and My QR; bills, auto-pay, mobile top-up, and adding money; cards with freeze, limits, card PIN, details behind a PIN, ordering, and lost or stolen; savings pockets; spending insights; exchange with held sample rates; rewards, invites, and statements; and profile, security, and settings. The main screens have loading, empty, error, and offline states.

Screens read from repository interfaces through Riverpod providers. Mock implementations with consistent, clearly fictional data are bound in one file: a transfer or a pocket move updates balances, history, and Home together. Replace them with your own API classes and no screen needs to change; the documentation walks through the swap step by step. Money is stored in integer minor units throughout.

The design system has light and dark themes, four brand presets, and a palette file for your own colors. English and Arabic are included with a full right-to-left layout, and you can add languages with .arb files. Currency, symbol position, number style, date format, 12/24-hour time, and first weekday are settings. Charts, card designs, and illustrations are drawn in code, so there are no stock images to license. The documentation includes release steps for Google Play and the App Store and a checklist of what a real banking app needs before going live.

Not included: a backend, real payments or card issuing, identity verification, biometrics, push notifications, or an admin panel. PIN, code, and identity screens are user interface only, and the kit gives no financial advice.

Features

- 107 screens and 15 loading, empty, error, offline, and confirmation states - Sign-in with a one-time code and PIN, unlock, forgot PIN, and a new-device check - Account opening in five steps with ID capture, photo check, selfie, and review screens - Home with account tabs, a balance runway to payday, upcoming payments, pockets, and spending - Send money with a name check, review, PIN, and receipt; send abroad, move between accounts, scheduled payments, requests, and saved recipients - QR payments and My QR, bills and auto-pay, mobile top-up, add money, and a cash-in code - Cards: freeze, limits, card PIN, details behind a PIN, order a card, lost or stolen - Savings pockets, spending insights with a category donut and monthly trend, exchange with held sample rates, rewards, invites, and statements - Profile, security, trusted devices, login activity, limits, language, formats, appearance, help, and chat - Light and dark themes, four brand presets, and a palette file for your own colors - English and Arabic with full right-to-left layout; add languages with .arb files - Money in integer minor units; currency, symbol position, number style, date format, 12/24-hour time, and first weekday are settings - 18 repository interfaces with mock implementations, bound in one file (Riverpod) - Charts, card designs, and illustrations drawn in code: no stock images to license - Component gallery and a formats reference screen - 288 unit, widget, and route tests; HTML documentation with release steps for Google Play and the App Store

Requirements

Flutter 3.44 or later (Dart 3.12). Xcode 16 or later for iOS (deployment target iOS 13). Android Studio with an Android SDK for Android. Packages: flutter_riverpod, go_router, flutter_svg, qr_flutter, intl. No API keys or accounts are needed to run the demo.

Instructions

1. Unzip the download and open a terminal in WalletKitUI/wallet_kit. 2. Run "flutter pub get", then "flutter run" with an iOS simulator or Android emulator selected. 3. The app opens on the splash and onboarding. Tap "I already have an account", then Continue, enter any six digits as the code, and create a PIN (any PIN except 000000, which shows the wrong-PIN state). 4. To connect your backend, implement the interfaces in lib/data/repositories/repositories.dart and bind your classes in lib/data/providers.dart. No screen changes are needed, and you can move one repository at a time. 5. To rebrand, change the brand ramp in lib/core/design_system/palette.dart, the mark in lib/core/art/logo.dart, the appName string in the .arb files, and the app name in the iOS Info.plist and the Android manifest. 6. To release under your own name, follow Documentation/index.html#release: Android upload keystore, android/key.properties, signed APK and App Bundle builds, iOS signing, archive, and export, and the splash-screen files on both platforms. 7. Documentation/index.html also covers the before-going-live checklist, architecture, the mock-to-API guide, money and formats, localization, deep links, accessibility, testing, and licenses.