mervey_ui_kit 0.1.0

Adaptive Material/Cupertino design system: theming tokens, semantic color palette and reusable widgets that pick the right backend per platform.

mervey_ui_kit

Adaptive Material/Cupertino design system for Flutter apps. Bundles a semantic color palette, typography tokens, spacing/radius scales, and a set of cross-platform components that pick the right backend per platform.

The package is brand-agnostic. Host apps wire their colors and typography in through AppTheme.light / AppTheme.dark overrides.

Requirements

• Dart SDK >= 3.6.0
• Flutter >= 3.27.0

The Flutter floor is dictated by Color.withValues(alpha:), which replaced the deprecated withOpacity in Flutter 3.27.

Installation

dependencies:
  mervey_ui_kit: ^0.1.0

Theme setup

import 'package:flutter/material.dart';
import 'package:mervey_ui_kit/mervey_ui_kit.dart';

void main() {
  runApp(
    MaterialApp(
      theme: AppTheme.light(),       // neutral Material defaults
      darkTheme: AppTheme.dark(),
      builder: AppTheme.wrapWithCupertino, // optional, for iOS Cupertino
      home: const _Demo(),
    ),
  );
}

Branding

Pass a custom palette:

final palette = AppColorPalette.light(
  brandPrimary: const Color(0xFFF3E123),
  onBrand: const Color(0xFF111111),
  textPrimary: const Color(0xFF111111),
);

MaterialApp(
  theme: AppTheme.light(palette: palette),
  darkTheme: AppTheme.dark(palette: AppColorPalette.dark(brandPrimary: ...)),
);

All factory arguments are named and optional — overrides are surgical, the rest stays Material-flavoured. The palette also expands to a Material 3 ColorScheme with the surface-container ramp, outline / outlineVariant and surfaceTint filled in, so M3 widgets stay aligned with the brand.

Typography

The kit ships with system-font defaults on every platform — no third-party fonts are bundled, and there are no licensing strings attached. For a branded look, bundle your fonts in your app's pubspec.yaml and pass them through:

AppTheme.light(
  typography: const AppTypographyTokens(
    scale: AppTextScale.md,
    accentFont: 'Inter',         // null → system font
    secondaryFont: 'Inter',
    monospaceFont: 'JetBrains Mono',
  ),
);

Use AppTextScale.sm / .md / .lg for a compact / default / roomy text rhythm without touching individual styles.

Components

Every component is a StatelessWidget/StatefulWidget that reads tokens from the active theme.

Category	Widgets
Buttons	AppButton, AppGlassButton, IconActionButton
Inputs	AppTextField, AppSearchField, showInputDialog
Cards	AppCard, AppTappableCard
Sheets / dialogs	AppBottomSheet, showAppBottomSheet, AppDialog, showAppDialog
Navigation	AppScaffold, AppNavbar, AppPillTabs
Indicators	AppPill, BadgedIcon, AvatarInitials, AppSwitch, AppSnackBar
State	LoadingState, ErrorState, EmptyState

Platform adaptivity

Some components swap to a Cupertino backend on iOS for native feel; the rest are Material-only and render the same on every platform (Material widgets look natural on iOS too).

Adaptive (Material on Android, Cupertino on iOS)	Material-only
AppButton, AppTextField, AppDialog, AppSwitch, AppNavbar, AppScaffold	AppCard, AppTappableCard, AppBottomSheet, AppPill, AppPillTabs, AppGlassButton, AppSearchField, IconActionButton, BadgedIcon, AvatarInitials, AppSnackBar, LoadingState / ErrorState / EmptyState

AppSearchField is intentionally Material-only — for iOS-pure search flows prefer Flutter's CupertinoSearchTextField.

Context extensions

Pull tokens from any BuildContext:

final colors = context.colors;         // AppColorPalette
final typography = context.typography; // AppTypographyTokens
final icons = context.icons;           // AppIconTokens

Example app

See example/ for a runnable showcase with a light/dark switch and a tour of every component.

License

MIT — see LICENSE.