Buttons#

Skribble provides a full set of button widgets that replace their Material and Cupertino counterparts with sketchy, hand-drawn borders, hachure fills, and wobbly outlines. Every button reads its palette from WiredTheme.of(context) and extends HookWidget.

WiredButton#

A basic button with a hand-drawn rectangle border. The simplest entry point for actions.

WiredButton(
  onPressed: () => print('tapped'),
  child: Text('Click me'),
)

Constructor parameters#

Notes#

• The button uses kWiredButtonHeight for consistent sizing across all rectangular buttons.
• The border is drawn with a RoughBoxDecoration using the theme's borderColor.
• Text color inherits from theme.textColor.

WiredElevatedButton#

An elevated variant with a slight offset shadow layer rendered behind the main button face. Both the shadow and the face use hachure fills for a tactile, layered look.

WiredElevatedButton(
  onPressed: () {},
  child: Text('Elevated'),
)

Constructor parameters#

Notes#

• The shadow offset is 2 logical pixels down and right.
• Both shadow and face use HachureFiller with different gap values for depth.

WiredFilledButton#

A solid button with a dense hachure fill, analogous to Material's FilledButton. Good for primary call-to-action placement.

WiredFilledButton(
  onPressed: () {},
  child: Text('Submit'),
)

Constructor parameters#

Notes#

• The hachure gap is tighter (2px) than the elevated button for a denser fill.
• When fillColor is not provided the button uses theme.borderColor for a high-contrast filled look.

WiredFloatingActionButton#

A circular floating action button with a hand-drawn circle border and hachure fill. Designed for primary screen actions.

WiredFloatingActionButton(
  icon: Icons.add,
  onPressed: () {},
)

Constructor parameters#

Notes#

• Uses WiredCircleBase with a 0.9 diameter ratio for the outer circle.
• The icon is rendered with WiredIcon at 43% of the FAB size, using solid fill style.
• Typically placed in WiredScaffold.floatingActionButton.

WiredIconButton#

An icon button enclosed in a hand-drawn circle border with no fill. Ideal for toolbar actions and compact controls.

WiredIconButton(
  icon: Icons.favorite,
  onPressed: () {},
)

Constructor parameters#

Notes#

• The inner icon renders at 50% of the button size.
• The circle uses RoughFilter.noFiller so only the hand-drawn border is visible.

WiredOutlinedButton#

A button with a thick hand-drawn border (2px stroke width) and no fill. The heavier outline provides strong visual emphasis without a background.

WiredOutlinedButton(
  onPressed: () {},
  child: Text('Outlined'),
)

Constructor parameters#

Notes#

• Doubles the border stroke width compared to WiredButton for extra emphasis.

WiredTextButton#

A text-only button with a sketchy underline drawn beneath the label. No border or fill surrounds the text.

WiredTextButton(
  onPressed: () {},
  child: Text('Learn more'),
)

Constructor parameters#

Notes#

• The underline is drawn with WiredLineBase spanning the intrinsic width of the child.
• Good for inline-style links within paragraphs of text.

WiredToggleButtons#

A multi-toggle button group where each button gets a sketchy rectangle border. Selected buttons receive a hachure fill; unselected buttons remain transparent.

WiredToggleButtons(
  isSelected: [true, false, false],
  onPressed: (index) {
    setState(() {
      isSelected[index] = !isSelected[index];
    });
  },
  children: [
    Icon(Icons.format_bold),
    Icon(Icons.format_italic),
    Icon(Icons.format_underline),
  ],
)

Constructor parameters#

Notes#

• Asserts that children.length == isSelected.length at construction time.
• Selected buttons render white text/icons over the hachure fill.

WiredSegmentedButton#

A segmented control with connected rounded rectangles, analogous to Material 3's SegmentedButton. Each segment can display a label and optional icon.

WiredSegmentedButton<String>(
  segments: [
    WiredButtonSegment(value: 'day', label: Text('Day')),
    WiredButtonSegment(value: 'week', label: Text('Week')),
    WiredButtonSegment(value: 'month', label: Text('Month'), icon: Icons.calendar_today),
  ],
  selected: {'week'},
  onSelectionChanged: (newSelection) {
    setState(() => selected = newSelection);
  },
)

WiredButtonSegment parameters#

WiredSegmentedButton parameters#

Notes#

• The outer container uses WiredRoundedRectangleBase with 8px border radius.
• Vertical divider lines between segments are drawn with WiredLineBase.
• Selected segments receive a hachure fill via RoughBoxDecoration.

WiredCupertinoButton#

A Cupertino-style press-opacity button with a hand-drawn rounded rectangle border. Mirrors the CupertinoButton API including a .filled factory constructor.

// Default (outlined)
WiredCupertinoButton(
  onPressed: () {},
  child: Text('Cupertino'),
)

// Filled variant
WiredCupertinoButton.filled(
  onPressed: () {},
  child: Text('Filled Cupertino'),
)

Constructor parameters#

Notes#

• Uses a useState hook for tracking press state and AnimatedOpacity for the press feedback.
• The filled variant sets color to CupertinoColors.activeBlue and uses hachure fill.
• Disabled buttons render at 40% opacity.