hand_drawn_toolkit library
A lightweight Flutter package for rendering hand-drawn, sketchy UI elements: containers, dividers, tables, charts, and more.
Chart model
The package supports three chart types with intentional restrictions:
- Bar charts are categorical on X and numeric on Y. Stacked bar
segments may have positive or negative values; positive segments
stack upward from the data baseline of
0.0, negative segments stack downward, and a single bar may mix the two. TheminY/maxYparameters control the visible Y-range, not the stacking origin. - Line charts position points by numeric X/Y values and can render either numeric X ticks or caller-provided categorical X labels. Points should be sorted by X for coherent rendering.
- Scatter plots are numeric on both axes.
Quick start
import 'package:hand_drawn_toolkit/hand_drawn_toolkit.dart';
// Sketchy container
HandDrawnContainer(
child: Text('Hello!'),
)
// Sketchy divider
HandDrawnDivider()
// Custom painter usage
CustomPaint(
painter: HandDrawnLinePainter(
color: Colors.black,
buildPath: (size, h) => h.rectBorder(size),
),
)
See the README for full documentation and examples.
Classes
- AxisDisplay
- Per-axis display configuration for numeric charts.
- BarCategory
- A single x-axis category that may contain one or more side-by-side bars (grouped bars). Each inner BarGroup can still contain stacked BarSegments — grouping and stacking compose cleanly.
- BarChartData
- Complete data for rendering a bar chart (stacked, grouped, or both).
- BarChartLayout
- Immutable layout snapshot for a bar chart at a specific size.
- BarGroup
- One bar in a bar chart (may contain multiple stacked segments).
- BarHitTestResult
- Hit-test result for a bar chart.
- BarSegment
- One segment within a stacked bar.
- BarSegmentLayout
- Layout geometry for a single bar segment.
- ChartLabelConfig
- Visual configuration for axis tick labels (currently the X-axis tick label band).
- ChartLegendConfig
- Visual configuration for a chart's legend.
- ChartLegendEntries
- Helpers for deriving legend entries from chart data classes.
- FunctionSeriesData
- A function-backed line series.
- GridConfig
- Visual configuration for a chart's background grid.
- HandDrawnBarChart
- Widget wrapper for the hand-drawn bar chart.
- HandDrawnBarChartPainter
- Painter for hand-drawn stacked bar charts.
- HandDrawnContainer
- A container widget with a hand-drawn rectangular border.
- HandDrawnDefaults
- Default configuration values for hand-drawn rendering.
- HandDrawnDivider
- A horizontal or vertical divider rendered with a hand-drawn, sketchy stroke.
- HandDrawnHelpers
- Generates jittered Path objects that simulate hand-drawn strokes.
- HandDrawnLegend
- A standalone hand-drawn legend widget.
- HandDrawnLineChart
- Widget wrapper for the hand-drawn line chart.
- HandDrawnLineChartPainter
- Painter for hand-drawn line charts.
- HandDrawnLinePainter
- A CustomPainter that renders a hand-drawn stroke path.
- HandDrawnNotebook
- Notebook paper: a colored page that publishes a NotebookStyle to the notebook content placed on it.
- HandDrawnScatterPlot
- Widget wrapper for the hand-drawn scatter plot.
- HandDrawnScatterPlotPainter
- Painter for hand-drawn scatter plots.
- HandDrawnStatusSquare
- A hand-drawn square that can be empty, filled, and overlaid with a status indicator (checkmark or dash).
- HandDrawnTable
- A generic hand-drawn table widget.
- HandDrawnTableColumn
- Definition of a single table column.
- HandDrawnTableRow
- A single row of cell data.
- HandDrawnTextField
- A text field with a hand-drawn divider underline.
- LegendEntry
- A single entry in a chart legend.
- LineChartData
- Complete data for rendering a line chart (single or multi-series).
- LineChartLayout
- Immutable layout snapshot for a line chart at a specific size.
- LineHitTestResult
- Sealed base type for line chart hit-test results.
- LinePoint
- A single point on a line chart.
- LinePointHit
- A hit-test result indicating a data point was hit.
- LinePointLayout
- Layout geometry for a single line chart data point.
- LineSegmentHit
- A hit-test result indicating a line segment was hit (between two points).
- LineSegmentLayout
- Layout geometry for a logical line segment between two consecutive points.
- LineSeriesData
- One line series within a line chart.
- NotebookEntry
- A single self-contained card on ruled notebook paper.
- NotebookScope
- Publishes a NotebookStyle to descendant widgets.
- NotebookSpan
- A run of text with an optional style, for use inside NotebookEntry.children.
- NotebookStyle
- An immutable description of notebook ruling: how the hand-drawn rules look and how far apart they sit.
- ScatterHitTestResult
- Hit-test result for a scatter plot.
- ScatterPlotData
- Complete data for rendering a scatter plot.
- ScatterPlotLayout
- Immutable layout snapshot for a scatter plot at a specific size.
- ScatterPoint
- A single point on a scatter plot.
- ScatterPointLayout
- Layout geometry for a single scatter point.
- TableDividerStyle
- Configuration for hand-drawn dividers between table rows or columns.
Enums
- AxisDisplayMode
- How an axis line should be drawn.
- ChartLegendPosition
- Where a chart's legend is positioned relative to the plot area.
- NotebookFit
- How a NotebookEntry fits a piece of content that is taller than one row.
- StatusIndicator
- The indicator drawn on top of a HandDrawnStatusSquare.
Functions
-
layoutText(
String text, TextStyle style, {double maxWidth = double.infinity, int? maxLines, String? ellipsis}) → TextPainter -
Lays out
textinstylewith default LTR direction and returns the resulting TextPainter, ready for measurement or paint.
Typedefs
- AxisValueFormatter = String Function(double value)
- Optional callback for formatting axis tick values.
-
ChartColorPalette
= Map<
String, Color> - Generic color mapping keyed by category name (e.g., "completed", "skipped", "primary").
- ChartFunction = double Function(double x)
- A mathematical function used with FunctionSeriesData to plot a curve.