mega_ui_kit 0.0.2

A Flutter UI Kit package — design tokens, theme and base widgets for Mega design system.

MegaUIKit

A Flutter UI Kit package for the Mega design system. Provides design tokens, theme configuration, and base widgets — all derived from the Mega Figma UIKit.

Preview

[MegaUIKit colors preview] [MegaUIKit typography preview] [MegaButton preview] [Mega dividers and progress preview]

Features

• Design Tokens — colors, typography, spacing, border radii, shadows
• Theme — MegaTheme.light() and MegaTheme.dark() ready-to-use ThemeData
• Widgets — base UI components (added iteratively)

Getting started

Add mega_ui_kit to your pubspec.yaml:

dependencies:
  mega_ui_kit: ^0.0.2

Run:

flutter pub get

Usage

Apply the theme

import 'package:mega_ui_kit/mega_ui_kit.dart';

MaterialApp(
  theme: MegaTheme.light(),
  darkTheme: MegaTheme.dark(),
  themeMode: ThemeMode.system,
  home: const MyHomePage(),
);

Use design tokens directly

import 'package:mega_ui_kit/mega_ui_kit.dart';

Container(
  color: MegaColors.primary,
  padding: EdgeInsets.all(MegaSpacing.md),
  decoration: BoxDecoration(
    borderRadius: MegaRadii.md,
    boxShadow: MegaShadows.card,
  ),
  child: Text(
    'Hello Mega',
    style: MegaTypography.bodyMd,
  ),
);

MegaButton

MegaButton is the base action component for the Mega design system.

MegaButton(
  label: 'Continue',
  variant: MegaButtonVariant.primary,
  size: MegaButtonSize.md,
  onPressed: () {},
);

Use onPressed: null for the disabled state. Use isLoading: true to show a spinner and disable interaction while an action is in progress.

MegaButton(
  label: 'Saving',
  isLoading: true,
  onPressed: null,
);

Available sizes:

Size	Token
Small	MegaButtonSize.sm
Medium	MegaButtonSize.md
Large	MegaButtonSize.lg
Extra large	MegaButtonSize.xl
2 extra large	MegaButtonSize.xxl

Available color variants:

Variant	Usage
MegaButtonVariant.primary	CTA (Call to Action): conversion or final funnel actions such as sign in, pay, or "Learn more" inside promos and banners
MegaButtonVariant.primaryStroke	Transparent primary action with border
MegaButtonVariant.primaryContainer	Soft primary accent when primary is too visually strong, but the action still needs brand emphasis
MegaButtonVariant.secondaryBlack	STA (Single Task Action): main action on a working screen, tied to the user's current task
MegaButtonVariant.secondaryStroke	Transparent secondary action with border
MegaButtonVariant.secondaryContainer	Soft secondary accent when secondaryBlack is too visually strong, but the action still needs emphasis
MegaButtonVariant.error	Destructive action
MegaButtonVariant.errorStroke	Transparent destructive action with border
MegaButtonVariant.errorContainer	Soft destructive action

Use primary inside application main screens, marketing screens, and promo sections when the goal is conversion or the final step in a flow. Use secondaryBlack inside product screens when the user is completing one concrete task on the current step. Use primaryContainer and secondaryContainer for lighter emphasis when the filled variant would be too loud.

Content layouts are selected from the provided parameters:

// Text only
MegaButton(label: 'Text', onPressed: () {});

// Prefix / suffix icon
MegaButton(
  label: 'Add',
  leadingIcon: const Icon(Icons.add),
  trailingIcon: const Icon(Icons.arrow_forward),
  onPressed: () {},
);

// Icon above text
MegaButton(
  label: 'Upload',
  topIcon: const Icon(Icons.upload),
  onPressed: () {},
);

// Icon only
MegaButton(
  icon: const Icon(Icons.favorite_border),
  semanticsLabel: 'Favorite',
  width: 56,
  onPressed: () {},
);

// Custom child
MegaButton(
  child: const Text('Custom content'),
  onPressed: () {},
);

By default, buttons wrap their content. Pass width for a fixed width, or use isFullWidth: true to expand to double.infinity. Use minWidth when the button should grow with content but never become smaller than a minimum. Pressed and hovered states use the design system Hovered colors; focused colors are not used by the component.

For form flows, set unfocusOnPressed: true to remove text-field focus before calling onPressed. For icon-only buttons, provide semanticsLabel so screen readers can describe the action.

Design tokens reference

Colors

Token	Description
MegaColors.primary	Primary brand color
MegaColors.secondary	Secondary brand color
MegaColors.surface	Surface / card background
MegaColors.background	Page background
MegaColors.error	Error / danger color
MegaColors.onPrimary	Text on primary
MegaColors.onSurface	Text on surface

Spacing

Token	Value
MegaSpacing.xs	4.0
MegaSpacing.sm	8.0
MegaSpacing.md	16.0
MegaSpacing.lg	24.0
MegaSpacing.xl	32.0
MegaSpacing.xxl	48.0

Contributing

1. Fork the repo
2. Create a feature branch: git checkout -b feat/my-widget
3. Commit changes: git commit -m 'feat: add MegaButton'
4. Push and open a PR

License

Apache-2.0