skribble #

Hand-drawn UI components for Flutter — every widget looks like it was sketched by hand, with drop-in familiar Material and Cupertino APIs.

Getting Started #

import 'package:skribble/skribble.dart';

Use WiredMaterialApp to customize colors across all Skribble widgets while keeping Material theming aligned:

final wiredTheme = WiredThemeData(
  borderColor: Color(0xFF2D1B69),  // Sketchy border color
  textColor: Colors.black87,
  fillColor: Color(0xFFFFF8E1),    // Warm paper background
  strokeWidth: 2,
  roughness: 1,
);

WiredMaterialApp(
  wiredTheme: wiredTheme,
  home: const WiredScaffold(/* ... */),
);

Router-based apps are supported too:

WiredMaterialApp.router(
  wiredTheme: wiredTheme,
  routerConfig: appRouter,
);

Both constructors also expose high-value MaterialApp bootstrapping options like locale resolution callbacks, restoration, scroll behavior, shortcuts / actions, generated titles, theme animation controls, high-contrast theme variants, and common debug / diagnostics flags.

All wired widget implementations read from the nearest WiredTheme ancestor and fall back to defaults when no theme is provided. WiredThemeData also exposes toColorScheme() and toThemeData() helpers so your app shell, text, and Material fallbacks stay aligned with the Skribble palette, while WiredMaterialApp and WiredMaterialApp.router keep MaterialApp and WiredTheme synchronized.

Widget Catalog #

Buttons #

Inputs #

Navigation #

Selection #

Feedback #

Layout #

Theming #

API Patterns #

All Skribble widgets follow familiar Flutter conventions:

• Wired* prefix mirrors the Flutter widget it replaces
• Same constructor params: child, onPressed, onChanged, value, selectedIndex
• HookWidget only — no StatefulWidget or StatelessWidget
• WiredTheme.of(context) for runtime color customization
• RepaintBoundary wraps every widget for render isolation

Quality #

• dart analyze --fatal-infos . passes with zero issues.
• Widget, rough-engine, tool, and storybook suites are validated in CI.
• Screenshot artifacts are tracked in docs/ui-snapshots/screenshot-manifest.txt.

Rough Icon Generation Pipeline #

Generate/refresh rough Material icons:

# Optional: pre-fetch Deno deps for faster first run
cd packages/skribble
deno cache tool/deno/svg2roughjs_cli.ts

dart run tool/generate_rough_icons.dart \
  --kit flutter-material \
  --rough-output-dir tool/icon_exports/rough-svg \
  --font-output-dir tool/icon_exports/font \
  --font-dart-output lib/src/generated/material_rough_icon_font.g.dart

Workspace shortcuts:

melos run rough-icons
melos run rough-icons-font
melos run rough-icons-baseline
melos run rough-icons-ci-check

rough-icons and rough-icons-font both apply the committed supplemental manifest (tool/examples/material_rough_icons.supplemental.manifest.json) and enforce unresolved regression gating via --unresolved-baseline tool/examples/material_rough_icons.unresolved-baseline.json plus --max-new-unresolved 0 (strict-mode equivalent). Use rough-icons-baseline to refresh that committed codePoints[] baseline file after intentional changes.

rough-icons-ci-check runs the same rough icon regression/sync checks enforced by CI via ./scripts/check_rough_icons_ci.sh all.

For targeted local debugging, run an individual CI-equivalent check:

• ./scripts/check_rough_icons_ci.sh regression
• ./scripts/check_rough_icons_ci.sh baseline-sync
• ./scripts/check_rough_icons_ci.sh generated-sync

On sync-check failures, the script prints git diff output and writes:

• rough-icons-baseline-sync.diff
• rough-icons-generated-sync.diff

regression cleans up packages/skribble/unresolved-report.json after a successful local run. Set ROUGH_ICONS_KEEP_UNRESOLVED_REPORT=1 to keep it. Set ROUGH_ICONS_MAX_UNRESOLVED=<int> to enable total unresolved gating via --max-unresolved (default: disabled). By default, regression/generated-sync checks use --max-new-unresolved 0 (strict-mode equivalent). Set ROUGH_ICONS_MAX_NEW_UNRESOLVED=<int> to relax or tighten that threshold.

Pull-request CI explicitly sets ROUGH_ICONS_MAX_NEW_UNRESOLVED=0 for those checks to keep workflow configuration aligned with local defaults.

Pull-request CI also runs the unresolved gate in --rough-only mode, uploads a rough-icons-unresolved-report artifact for diagnostics, verifies the committed baseline file is up to date, checks that generated rough icon catalog files are committed/synced, and uploads diff artifacts (rough-icons-baseline-sync-diff, rough-icons-generated-sync-diff) when those sync checks fail.

Useful flags:

• --list-kits to print available icon-kit providers.
• --kit svg-manifest --manifest <path> to rough non-Material icon sets from JSON manifests (unique identifier/codePoint required; codePoint supports int, decimal string, 0x hex, bare hex, and U+ hex forms).
• --rough-only to skip Dart map generation and emit rough SVGs only.
• --rough-normalize-viewbox 128 to upscale SVG geometry before roughing.
• --brand-icons-source <path> to provide a local simple-icons package as fallback for brand identifiers missing in Material SVG packages.
• --supplemental-manifest <path> to provide custom SVGs for unresolved flutter-material identifiers/codepoints (workspace defaults use tool/examples/material_rough_icons.supplemental.manifest.json).
• --unresolved-output <path> to emit unresolved icon codepoints/identifiers as JSON for follow-up manifest authoring (includes unresolved[] plus unresolvedCodePoints[], baseline-diff summary arrays when enabled, gate mode metadata, threshold metadata fields when unresolved gating thresholds are configured, a wouldFail summary boolean, per-gate failure booleans, an activeGates[] configured-gates summary list, and a failedGates[] summary list).
• --unresolved-baseline-output <path> to emit a normalized unresolved baseline for regression gating (defaults to unresolved[]).
• --unresolved-baseline-output-format <unresolved|codepoints> to choose unresolved baseline output shape (unresolved[] or codePoints[]; workspace defaults use codepoints).
• --supplemental-manifest-output <path> to emit a starter supplemental manifest template for unresolved icons.
• --unresolved-baseline <path> to compare unresolved output against a baseline report (unresolved[]), manifest (icons[]), or minimal baseline (unresolvedCodePoints[]/unresolvedCodePoint[]/unresolvedCodepoint[]/unresolvedCodepoints[]/unresolved_code_points[]/unresolved_codepoint[]/unresolved_codepoints[]/unresolved-code-points[]/unresolved-codepoints[]/codePoints[], also accepts codePoint[]/codepoints[]/codepoint[]/code_points[]/code-points[]), including newUnresolved and resolvedSinceBaseline report fields. For object entries in unresolved[]/icons[], the code point field may be codePoint, codepoint, code_point, or code-point. String code points accept decimal, 0x hex, bare hex, and U+ hex forms.
• --max-unresolved <int> to allow a bounded unresolved count before failing.
• --fail-on-unresolved to make the command exit non-zero if unresolved icons remain (cannot be combined with --max-unresolved).
• --max-new-unresolved <int> to allow a bounded number of newly unresolved entries versus baseline before failing (requires --unresolved-baseline).
• --fail-on-new-unresolved to fail only when unresolved entries regress versus baseline (cannot be combined with --max-new-unresolved).
• --font-name skribble_rough_icons to customize generated font family name.
• --font-dart-output <path> to emit Dart lookup helpers for generated font codepoints.
• CHROME_PATH=/path/to/chrome if Chromium/Chrome is not in a standard location.

Runtime helpers exposed by wired_icon.dart:

• lookupMaterialRoughIconByIdentifier('search') → WiredSvgIconData?
• lookupMaterialRoughFontIcon('search') → IconData? for generated font usage
• materialRoughIconIdentifiers / materialRoughFontCodePoints (includes legacy alias identifiers that share codepoints)
• materialRoughFontFamily

Contributing #

See CONTRIBUTING.md for development setup, widget conventions, testing requirements, and quality gates.

Docs #

• Parity Matrix — coverage vs Flutter defaults
• Screenshot Manifest — all visual snapshots
• Rough Icon Pipeline — icon generation and font tooling
• CHANGELOG — release history

License #

MIT — see LICENSE for details.

Choose the amount of hand-drawn ink #

Set WiredThemeData(roughnessLevel: WiredRoughness.gentle) on your WiredMaterialApp. The gentle, playful, and expressive presets coordinate borders, rough icons, and all four bundled font styles. Playful is the default. Nested WiredTheme scopes can select another level while retaining the parent palette through copyWith; explicit fonts and drawing configurations remain overrides. See the theming guide for custom font generation and inheritance details.

Typeface choices and brand icons #

Set font: WiredFont.casual, WiredFont.linear, or WiredFont.mono on WiredThemeData. Each choice follows the inherited roughness. Mono retains equal character spacing for code. These are static fonts with four genuine faces (400/700, upright/italic); they do not contain a variable-weight axis. Compare all three families.

Use WiredSvgIcon(data: WiredBrandIcon.github.data) for a curated Simple Icons brand mark. GitHub, Dart, Flutter, and Figma support solid and hatched ink through the same vector renderer as Material icons. See the examples and generation command.