✏️ flare_draw

A high-performance Flutter drawing and signature canvas with smooth Catmull-Rom bezier curves, velocity-based pressure sensitivity, undo/redo, and PNG export.

Preview

Features

• ✏️ Catmull-Rom bezier smoothing — eliminates jagged lines
• 💪 Pressure sensitivity — stroke width varies with drawing speed
• 🎨 Pen, Marker, Eraser brush types
• 🌈 9 colors + adjustable brush size slider
• ↩️ Undo / Redo with configurable stack size
• 📸 PNG export at any pixel ratio
• 🎛 FlareDrawController — full programmatic control
• 🚫 Zero dependencies

Installation

dependencies:
  flare_draw: ^1.0.0

Quick Start

import 'package:flare_draw/flare_draw.dart';

class DrawingScreen extends StatefulWidget {
  const DrawingScreen({super.key});
  @override
  State<DrawingScreen> createState() => _DrawingScreenState();
}

class _DrawingScreenState extends State<DrawingScreen> {
  final _controller = FlareDrawController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FlareDrawCanvas(controller: _controller),
    );
  }
}

Export to PNG

final bytes = await FlareDrawExporter.toPng(
  _controller,
  pixelRatio: 3.0, // high resolution
);
// Save or share bytes

Programmatic Control

final controller = FlareDrawController(
  config: FlareDrawConfig(
    backgroundColor: Colors.white,
    enablePressureSensitivity: true,
    maxUndoSteps: 50,
  ),
);

// Change color
controller.setColor(Colors.blue);

// Change brush
controller.setBrushType(BrushType.marker);
controller.setBrushSize(8.0);

// Undo / Redo
controller.undo();
controller.redo();

// Clear canvas
controller.clear();

// Check state
print(controller.canUndo);
print(controller.isEmpty);

Custom Toolbar

FlareDrawCanvas(
  controller: controller,
  config: FlareDrawConfig(
    showToolbar: false, // hide built-in toolbar
  ),
)

// Build your own
FlareDrawToolbar(controller: controller)

FlareDrawConfig

How It Works

Catmull-Rom Spline interpolates touch points into smooth curves using the 4 surrounding control points, eliminating the jagged edges of raw input.

Pressure Sensitivity measures velocity between points — slower = wider stroke, faster = thinner stroke — mimicking real pen behavior.

License

MIT