Flutter Widget Library | Moroku Odyssey
Flutter Widget Library

Build Gamified Banking Experiences

A comprehensive Flutter widget library for the Moroku Odyssey platform. 40+ production-ready components for missions, goals, badges, rewards, and financial wellness tracking.

Available Balance
$12,450.00
πŸ–οΈ
Holiday Fund
$3,250
πŸ†
Budget Master
30 days under budget
Your Points
2,450 PTS
⭐
+
+50 pts
βœ“ Mission Complete
🎯 Level Up!
40+
Production Widgets
8,300+
Lines of Code
7
Mission Categories
100%
Odyssey API Coverage
Widget Categories

Everything You Need to Build

Six comprehensive widget categories covering every aspect of gamified digital banking, from account displays to reward celebrations.

πŸ’³

Banking Widgets

Core financial displays including balance cards, account details, transaction lists, and quick action buttons.

  • BalanceDisplay with animations
  • NetPositionCard
  • AccountCard (full & compact)
  • TransactionList with grouping
  • QuickActionsRow
πŸ†

Gamification Widgets

Points, badges, levels, rewards, and player profiles with celebratory animations and visual feedback.

  • PointsDisplay with shimmer
  • BadgeWidget (5 rarities)
  • LevelIndicator
  • PlayerProfileCard
  • PointsEarnedPopup
πŸš€

Mission Widgets

Challenge tracking across all seven money system categories with progress indicators and completion states.

  • MissionCard (expandable)
  • MissionCategoryFilter
  • ChallengeListItem
  • ChallengeDetailCard
  • MissionProgressOverview
🎯

Goal Widgets

Savings goal management with progress tracking, roundups, auto-payments, and spending breakdown visualization.

  • GoalCard with features
  • GoalCarousel
  • RoundupSettings
  • AutoPaymentSettings
  • SpendingBreakdownWidget
🧩

Common Widgets

Reusable UI components for loading states, error handling, empty states, and consistent user feedback.

  • MorokuLoadingIndicator
  • MorokuErrorState
  • MorokuEmptyState
  • MorokuSuccessAnimation
  • MorokuSnackBar
🎨

Theme System

Distinctive design language with custom typography, mission colors, badge rarities, and dark/light mode support.

  • Custom typography scale
  • Mission-specific gradients
  • Badge rarity colors
  • Spacing & radius tokens
  • Complete ThemeData
Complete Library

40+ Production-Ready Widgets

Every widget you need to build complete gamified banking experiences.

BalanceDisplay
Animated balance with counting effect and customizable styling
NetPositionCard
Assets vs liabilities with trending indicators and glow effects
AccountCard
Full and compact modes with gradient backgrounds per account type
TransactionList
Grouped by date with category icons and merchant display
QuickActionsRow
Transfer, Pay, PayID actions with mission-colored icons
PointsDisplay
Animated points with shimmer effect and gold gradient
BadgeWidget
5 rarity levels with glow effects and locked states
LevelIndicator
Circular progress with level colors and points to next
PlayerProfileCard
Avatar, league badge, points, and stats row
PointsEarnedPopup
Confetti celebration with elastic scale animation
MissionCard
Expandable with challenges, progress bar, and status
MissionCategoryFilter
Horizontal scroll chips for 7 money system categories
ChallengeDetailCard
Full challenge view with content preview and completion
GoalCard
Progress, features, on-track status, and category icons
RoundupSettings
Factor selector with example calculation and locked states
SpendingBreakdownWidget
60/30/10 rule visualization with target vs actual
Developer Experience

Simple Integration

Drop-in widgets with sensible defaults and full customization. Complete domain models matching the Odyssey API specification.

  • Complete Odyssey domain models
  • Callbacks for all interactions
  • Dark and light theme support
  • Consistent animation patterns
  • Responsive layouts built-in
goal_screen.dart
import 'package:moroku_banking_widgets/moroku_banking_widgets.dart';

class GoalScreen extends StatelessWidget {
  final Goal goal;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        GoalCard(
          goal: goal,
          onTap: () => showGoalDetails(goal),
        ),
        RoundupSettings(
          roundups: goal.roundups,
          onFactorChanged: (factor) {
            // Update roundup factor
          },
        ),
        SpendingBreakdownWidget(
          breakdown: userSpending,
        ),
      ],
    );
  }
}
7 Money Systems

Mission-Colored Components

Every widget automatically adapts to the mission category with coordinated colors, icons, and gradients.

πŸ’°
Earning
Income & revenue
πŸ’³
Spending
Budgets & expenses
🏦
Saving
Goals & deposits
πŸ“Š
Lending
Loans & credit
πŸ“ˆ
Investing
Growth & wealth
πŸ›‘οΈ
Protecting
Insurance & security
❀️
Helping
Giving & support

Ready to Build Engaging Banking Experiences?

Get the complete Flutter widget library and start building gamified digital banking apps with Moroku Odyssey.

Run The Demo

See the widgets in action