Skribble#

Skribble is a Flutter design system that replaces polished, pixel-perfect surfaces with a hand-drawn, sketchy aesthetic. Every widget renders with wobbly borders, hachure fills, and imperfect lines -- giving your app the feel of a whiteboard prototype that actually works.

The library ships 80+ production-ready widgets, each built on HookWidget and prefixed with Wired. Drop them into any Flutter project and get a cohesive hand-drawn look without writing custom painting code.

What makes Skribble different#

• Hand-drawn rendering -- borders wobble, corners overshoot, fills use hachure strokes. The rough-drawing engine is deterministic (seeded RNG), so output is consistent across rebuilds while still looking hand-sketched.
• 80+ widgets -- buttons, inputs, cards, dialogs, navigation bars, sliders, steppers, date pickers, data tables, and more. Material and Cupertino variants are both covered.
• HookWidget-based architecture -- every widget uses HookWidget (or HookConsumerWidget for Riverpod). No StatefulWidget boilerplate anywhere.
• Material and Cupertino bridges -- WiredMaterialApp and the Cupertino widget set let you adopt Skribble incrementally. Material ThemeData stays in sync with the Wired theme automatically.
• Centralized theming -- one WiredThemeData object controls border color, fill color, stroke width, roughness, and text colors across every widget via WiredTheme.of(context).

Quick install#

Add Skribble to your Flutter project:

dart pub add skribble

Then import and use any Wired widget:

import 'package:skribble/skribble.dart';

Start here#

Work through these pages in order to go from zero to a fully themed Skribble app:

1. Installation -- add the package or set up the workspace for contributing
2. Quick Start -- build a minimal app with WiredMaterialApp
3. Your First Widget -- add buttons, inputs, and cards step by step
4. Theming -- customize colors, stroke width, roughness, and dark mode

Common workflows#

Add widgets to an existing app#

Wrap your app in WiredMaterialApp (or place a WiredTheme ancestor manually), then swap Material widgets for their Wired counterparts. Each Wired widget reads theme values from WiredTheme.of(context), so they integrate with the tree automatically.

Customize the theme#

Create a WiredThemeData with your brand colors and pass it to WiredMaterialApp. All Wired widgets pick up the new palette instantly. See Theming for the full parameter reference.

Create a custom Wired widget#

Use WiredPainterBase for the rough shape, WiredCanvas to compose painters with fillers, and WiredBaseWidget for repaint isolation. The Custom Widgets guide walks through each layer.

Use hand-drawn icons#

Skribble includes a generated rough icon font based on Material Icons. Use WiredIcon with MaterialRoughIcons for icon data. See Icons for details.

Widget catalog#

Skribble organizes its 80+ widgets into categories:

Browse the full widget reference for API details and live examples.

Contributor resources#

• GitHub repository -- source code, issues, pull requests
• pub.dev listing -- published package and API docs
• Contributing guide -- how to set up the workspace and submit changes
• Storybook app -- live demo of every widget