A Flutter implementation of the rough.js library

Overview

Pub GitHub Release Date GitHub

Rough

Rough is a library that allows you draw in a sketchy, hand-drawn-like style. It's a direct port of Rough.js.

Installation

In the dependencies: section of your pubspec.yaml, add the following line:

dependencies:
  rough: <latest_version>

Basic usage

Right now only drawing via canvas is supported. This is a basic documentation in case you want to play around with Rough. I can't ensure non-breaking changes of the library interface.

To draw a figure you have to:

  1. Create a DrawConfig object to determine how your drawing will look.
  2. Create a Filler to be used when drawing objects (you have to provide a configuration for the filling and a DrawConfig for the filling path).
  3. Create a Generator object using the created DrawConfig and Filler. This will define a drawing/filling style.
  4. Invoke the drawing method from the Generator to create a Drawable.
  5. Paint the Drawable in the canvas using the drawRough method extension for Canvas.

Here an example on how to draw a circle:

//Create a `DrawConfig` object.
DrawConfig myDrawConfig = DrawConfig.build(
  roughness: 3,
  curveStepCount: 14,
  maxRandomnessOffset: 3,
);

//Create a `Filler` with a configuration (we reuse the drawConfig in this case).
FillerConfig myFillerConfig = FillerConfig(
    hachureGap: 8,
    hachureAngle: -20,
    drawConfig: myDrawConfig,
);
Filler myFiller = ZigZagFiller(myFillerConfig);

//Create a `Generator` with the created `DrawConfig` and `Filler`
Generator generator = Generator(
  myDrawConfig,
  myFiller,
);

//4. Build a circle `Drawable`.
Drawable figure = generator.circle(200, 200, 320);

//5. Paint the `Drawable` in the canvas.
Canvas.drawRough(figure, pathPaint, fillPaint);

And this is the result:

Result

Both DrawConfig and FillerConfig will use default values for anything not specified.

Samples

Some screenshots of the example app:

Example 1 Example 2 Example 3 Example 4

You might also like...

Flutter slidable custom - A Flutter implementation of slidable list item with directional slide actions that can be dismissed

Flutter slidable custom - A Flutter implementation of slidable list item with directional slide actions that can be dismissed

Slidable is a Flutter Favorite package! flutter_slidable A Flutter implementatio

Feb 7, 2022

[Flutter SDK V.2] - Youtube Video is a Flutter application built to demonstrate the use of Modern development tools with best practices implementation like Clean Architecture, Modularization, Dependency Injection, BLoC, etc.

[Flutter SDK V.2] - Youtube Video is a Flutter application built to demonstrate the use of Modern development tools with best practices implementation like Clean Architecture, Modularization, Dependency Injection, BLoC, etc.

[Flutter SDK V.2] - Youtube Video is a Flutter application built to demonstrate the use of Modern development tools with best practices implementation like Clean Architecture, Modularization, Dependency Injection, BLoC, etc.

Jan 2, 2023

DropdownButton, ToggleButton & CheckboxListTile implementation in Flutter as a Mobile App Development exercise.

DropdownButton, ToggleButton & CheckboxListTile implementation in Flutter as a Mobile App Development exercise.

Sort & Filter UI A new Flutter project. Getting Started This project is a starting point for a Flutter application. ⏮ Preview A few resources to get y

Sep 29, 2021

Interview questions and answers for preparation, built in pure flutter also have CI implementation for learning.

Interview questions and answers for preparation, built in pure flutter also have CI implementation for learning.

toughest An app for interview preparation. Unique animations. More than 100 questions and answer. Good UI. Featured in many websites. For Vietnam user

Dec 27, 2022

Backdrop implementation in flutter.

Backdrop implementation in flutter.

backdrop Backdrop implementation in flutter. This widget is in active development. Any contribution, idea, criticism or feedback is welcomed. NOTE: If

Dec 16, 2022

Firebase dart common interface and implementation for Browser, VM, node and flutter

firebase.dart Firebase dart common interface and implementation for Browser, VM, node and flutter Firebase Initialization Usage in browser import 'pac

Nov 28, 2021

Two-dimensional recursive spatial subdivision: Flutter implementation of d3-quadtree

Two-dimensional recursive spatial subdivision: Flutter implementation of d3-quadtree

d3-quadtree A quadtree recursively partitions two-dimensional space into squares, dividing each square into four equally-sized squares. Each distinct

Nov 26, 2022

Flutter plugin that provides a quick&dirty workaround for incompatibility between VMWare Airwatch MDM solution and Dart Sockets implementation

airwatch_socket_workaround This plugin has been created to enable flutter apps to reach endpoints that are only reachable using a VMWare airwatch per

Nov 11, 2022

An implementation for flutter secure file storage

Flutter secure file storage An implementation for flutter secure file storage. F

Oct 29, 2022
Comments
  • Chore: Updating sdk for null-safety.

    Chore: Updating sdk for null-safety.

    HI @sergiandreplace , Just updated sdk version to provide null-safety errors. https://dart.dev/null-safety/unsound-null-safety Please review and merge.

    opened by ark-sandbox 0
  • Button with Rough

    Button with Rough

    Hello,

    How to create a button with a Rough border.

    class ProfileInfo extends StatelessWidget {
      final String firstText;
      final Function onTap;
    
      const ProfileInfoBigCard(
          {Key key,
          @required this.firstText,
          this.onTap,
          })
          : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        var deco = RoughBoxDecoration(    // <- ROUGH
          drawConfig: DrawConfig.build(
            roughness: 1,
            curveStepCount: 10,
            maxRandomnessOffset: 5,
            seed: 1,
          ),
          shape: RoughBoxShape.rectangle,
          borderStyle: RoughDrawingStyle(
            width: 3,
            color: Colors.blue,
          ),
        );
        return Card(
          margin: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
          elevation: 0,
          shape: RoundedRectangleBorder(.   // <- ROUGH
            borderRadius: BorderRadius.circular(10),
          ),
          child: Container(
            decoration: deco,
            child: InkWell(
              onTap: onTap,
              child: Padding(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(firstText, style: titleStyle),
                  ],
                ),
              ),
            ),
          ),
        );
      }
    }
    

    It works ... BUT.... When I push on the button, the ROUGH border is redraw all the time...

    I would like to keep the original rough border

    opened by vptcnt 0
  • Improving the readme example

    Improving the readme example

    Hi,

    Thanks for this, I started using flutter today after not getting the performance I needed out of react-native. I was super pleased to see that there was a dart port of roughjs!

    When I was trying to follow the examples I was just using:

    Paint paint = Paint();
    paint.color = Color(0xff6ab04c);
    

    I wasn't getting the look that I'd hoped for, it looked a lot different than the roughjs equivalent. Eventually I found in your example project you specify style = PaintingStyle.stroke. I wondered if it'd be worth adding that to the readme?

    I'm sure if I wasn't a complete flutter noob I would have know about this Paint param, but might be nice having a fully working example in the readme anyway?

    opened by dbramwell 0
Releases(v.0.1.1)
Owner
Sergi Martínez
Sergi Martínez
🦀🦀 High performance Crypto library of Rust implementation for Flutter

r_crypto Rust backend support crypto flutter library, much faster than Dart-implementation library, light-weight library. Some crypto support hardware

Tino 28 Dec 17, 2022
A simple dart zeromq implementation/wrapper around the libzmq C++ library

dartzmq A simple dart zeromq implementation/wrapper around the libzmq C++ library Features Currently supported: Creating sockets (pair, pub, sub, req,

Moritz Wirger 18 Dec 29, 2022
Flutter-Animated-Library-of-Books - Flutter App - Animated Book Library

bookshelf A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if thi

Ulfhrafn 1 Dec 4, 2022
Flutter book library - Book Library Application with Flutter and Google Book API

Book Library Application Flutter iOS, Android and Web with Google Book API Demo

Nur Ahmad H 0 Jan 25, 2022
Flutter Control is complex library to maintain App and State management. Library merges multiple functionality under one hood. This approach helps to tidily bound separated logic into complex solution.

Flutter Control is complex library to maintain App and State management. Library merges multiple functionality under one hood. This approach helps to

Roman Hornak 23 Feb 23, 2022
[Flutter Library] Flamingo is a firebase firestore model framework library. 🐤

Flamingo Flamingo is a firebase firestore model framework library. https://pub.dev/packages/flamingo 日本語ドキュメント Example code See the example directory

shohei 117 Sep 22, 2022
This library provides the easiest and powerful Dart/Flutter library for Mastodon API 🎯

The Easiest and Powerful Dart/Flutter Library for Mastodon API ?? 1. Guide ?? 1.1. Features ?? 1.2. Getting Started ⚡ 1.2.1. Install Library 1.2.2. Im

Mastodon.dart 55 Jul 27, 2023
A middleware library for Dart's http library.

http_middleware A middleware library for Dart http library. Getting Started http_middleware is a module that lets you build middleware for Dart's http

TED Consulting 38 Oct 23, 2021
🎯 This library automatically generates object classes from JSON files that can be parsed by the freezed library.

The Most Powerful Way to Automatically Generate Model Objects from JSON Files ⚡ 1. Guide ?? 1.1. Features ?? 1.1.1. From 1.1.2. To 1.2. Getting Starte

KATO, Shinya / 加藤 真也 14 Nov 9, 2022
Flutter firebase auth - Simple implementation of Firebase Authentication using Flutter

FlutterFire Authentication Sample A simple implementation of Firebase Authentica

Souvik Biswas 4 Apr 2, 2022