Gentle
Remember me
- roughness
- 1.25
- wobble
- 0.0
A hand-drawn design system for Flutter
Ship apps that look drawn by hand.
Every border, fill, icon, and letter, drawn by a seeded pen.
flutter pub add skribble
9:41
Weekly streak
Tap it. Then drag the pen.
- WiredButton
- WiredSwitch
- WiredSlider
- WiredCalendar
- WiredTabBar
- WiredDataTable
- WiredStepper
- WiredColorPicker
- WiredNavigationRail
- WiredTooltip
- WiredSearchBar
- WiredExpansionTile
- WiredSkeleton
- WiredDoodle
- WiredTimePicker
- WiredBottomSheet
The rough engine
Every line is hand-drawn
Same seed, same sketch. New seed, new hand.
RoughFillStyle.hachure
seed 7seed 23seed 58
RoughFillStyle.crossHatch
seed 8seed 24seed 59
RoughFillStyle.zigzag
seed 9seed 25seed 60
RoughFillStyle.dashed
seed 10seed 26seed 61
RoughFillStyle.dots
seed 11seed 27seed 62
RoughFillStyle.solid
seed 12seed 28seed 63
Themes
Three pens, one design system
One setting redraws the whole app.
Playful
Remember me
- roughness
- 1.5
- wobble
- 0.65
Expressive
Remember me
- roughness
- 1.8
- wobble
- 1.0
Widgets
Touch the ink
Real inputs. Go on, poke them.
Lettering
Fonts with handwriting built in
Free under the SIL Open Font License. Type something.
The quick brown fox sketches over the lazy dog.
Aa Bb Cc Dd Ee Ff Gg 0123456789 & ? ! @ ( )
Icons and emoji
A whole sketchbook of artwork
3,963 emoji. 1,909 icons. All hand-drawn.
- pencil
- brush
- palette
- heart
- star
- sparkles
- cat
- coffee
- rocket
- cloud-sun
- music
- camera
- bell
- map-pin
- flower
- gift
Start in minutes
A whole app in a handful of lines
import 'package:flutter/widgets.dart';
import 'package:skribble/skribble.dart';
void main() {
runApp(
SkribbleApp(
title: 'My sketchy app',
home: WiredScaffold(
appBar: WiredAppBar(title: Text('Hello')),
body: Center(child: WiredButton(
onPressed: () {},
child: Text('Press me'),
)),
),
),
);
}
Beyond Flutter