Skip to main content

UI Kit

warning

Currently DartWay UI Kit (dartway_ui_kit) is in development.
Strict guidelines for creating a full UI Kit in a project will be added soon.
Use the following rules as a temporary standard until the package is released.

UI Kit is the only allowed entry point for design system elements in DartWay apps.
It ensures all features use the same styles and components consistently.

Core principles​

  1. One import only

    • Import components only via the root ui_kit.dart.
    • Never import specific buttons, colors, or styles directly.

  2. All parts are declared in ui_kit.dart

    • Each component file must start with part of 'ui_kit.dart';.
    • Root file ui_kit.dart collects and exports all components.
    • Features import only ui_kit.dart, never individual files.

  3. No raw styling in features
    Inside feature code (/lib/feature_name):

    • Do not use Color, TextStyle, BorderRadius, or context.textTheme / context.colorTheme.
    • Always use ready-made components from UI Kit.

  4. Isolated visual layer

    • UI Kit must not depend on business logic or state.
    • Components = pure visuals + minimal props.

  5. Reusable, not feature-specific

    • UI Kit includes common building blocks only (buttons, inputs, cards, lists, modals).
    • If something belongs to a specific feature → keep it inside the feature.

Extended colors and themes​

DartWay uses Extended Material Colors with ColorFamily:

  • Supports multiple themes (light, dark, high contrast, etc.).
  • All colors are centralized and accessed via static properties.

Example:

final primary = MaterialTheme.colorScheme.primary;
final danger = ExtendedColor.danger.primary;

👉 Features must never access context themes directly. Always use the static getters from the centralized theme.

File structure

lib/ui_kit/
  ui_kit.dart          // root, contains `part` directives
  buttons/
    primary_button.dart
    secondary_button.dart
  inputs/
    text_field.dart
  surfaces/
    card.dart
  theme/
    material_theme.dart
    extended_color.dart

Example ui_kit.dart:


part 'buttons/primary_button.dart';
part 'buttons/secondary_button.dart';
part 'inputs/text_field.dart';
part 'surfaces/card.dart';
part 'theme/material_theme.dart';
part 'theme/extended_color.dart';

Best practices

  • Keep props minimal and semantically meaningful (isPrimary, isDanger).
  • Avoid duplicating variants — use composition and extensions.
  • Always prefer consistency over visual hacks.

Why it matters

  • Consistency → all features look the same.
  • Maintainability → easy theme updates.
  • AI-friendly → assistants won’t spread random colors or styles in features.
  • Scalable → supports multiple themes without breaking features.