Monodash

Monodash is a Flutter UI kit with dashed borders and a strict monochrome vibe (black/white). The goal: simple, consistent components that are easy to extend.

Features

• Dashed borders on all surfaces
• Light/Dark themes out of the box
• Ready widgets: card, button, chip, radio, textfield, dialog
• Small API with easy customization

Preview

Getting Started

Why: so the example app can use the local package; how: add a path dependency in pubspec.yaml.

dependencies:
  monodash:
    path: ../

✅

Then run flutter pub get inside example/.

Usage

Why: all components need the theme for consistent styling; how: wrap the app with MonodashTheme.

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

void main() {
  runApp(
    MonodashTheme(
      data: MonodashThemeData.dark(),
      child: const MaterialApp(home: DemoPage()),
    ),
  );
}

✅

Why: MonodashSurface is the base for custom widgets; how: use it directly.

const MonodashSurface(
  child: Text('Dashed surface'),
)

✅

Why: buttons have variants; how: use variant or inverted.

MonodashButton(label: 'Primary', onPressed: () {}),
MonodashButton(label: 'Inverted', inverted: true, onPressed: () {}),
MonodashButton(
  label: 'Tertiary',
  variant: MonodashButtonVariant.tertiary,
  onPressed: () {},
),

✅

Why: chips are commonly used for selection; how: use selected + onSelected.

MonodashChip(
  label: 'Selectable',
  selected: isSelected,
  onSelected: (value) => setState(() => isSelected = value),
),

✅

Why: radios are for single choice; how: wire groupValue.

MonodashRadio<String>(
  value: 'A',
  groupValue: selected,
  label: 'Option A',
  onChanged: (value) => setState(() => selected = value),
),

✅

Why: textfield should keep the same visual language; how: use MonodashTextField.

MonodashTextField(hintText: 'Type here'),

✅

Why: dialogs should stay consistent too; how: use showMonodashDialog.

showMonodashDialog<void>(
  context: context,
  title: const Text('Confirm'),
  content: const Text('Continue?'),
);

✅

Customization

Why: every app has different needs; how: override MonodashThemeData.

final custom = MonodashThemeData.dark().copyWith(
  dashLength: 8,
  gapLength: 6,
  strokeWidth: 2,
  borderRadius: BorderRadius.circular(16),
);

✅

Example App

See the full demo in example/ for all components and the light/dark toggle.

Notes

• warning and error button variants use accent colors. If you want strict monochrome, swap them to a style-only variation (e.g., tighter dash).
• The example app sets SystemUiOverlayStyle so the status bar icons stay visible when switching light/dark themes.