✍️ Rough Notation Flutter

Live Demo

Status: Open Source

🎨 Overview

Rough Notation Flutter is a lightweight Flutter package that brings animated, hand-drawn-style annotations to Flutter apps — inspired by the popular Rough Notation JavaScript library.

This project reimagines expressive, sketch-style annotations natively in Flutter.

🛠️ Features

• 🧱 Built from Scratch in Dart: Reimplemented the core rendering logic from JavaScript to Dart, translating canvas operations into Flutter’s CustomPaint.
• 🖌️ Hand-Drawn Visual Style: Achieved rough, animated annotation effects (e.g., underline, box, highlight) using precise control of stroke randomness and animation timing.
• 🎛️ Interactive Annotation Controls: Enabled group-based sequencing, trigger-based reveals, and reusable annotation sets — useful for guided tutorials and onboarding.
• 🎨 Custom Painter Expertise: Utilized advanced CustomPainter techniques for smooth, performant drawing effects across platforms.

💡 Use Cases

• Highlighting UI components during onboarding.
• Drawing user attention to key areas with hand-drawn effects.
• Educational or playful UI designs in apps.

🚀 Get Started

You can try the package live at:

• 👉 roughnotation.0xharkirat.com
• 👉 pub.dev/packages/rough_notation
• 👉 github.com/0xharkirat/rough_notation

The package is open-source and designed for developers who want expressive, whimsical UI annotations in Flutter without third-party JS dependencies.