ep-u-nw/painter

A simple flutter widget to paint with your fingers

painter

A simple flutter widget to paint with your fingers.

Features

The widget supports:

• Changing fore- and background color
• Changing the thickness of lines you draw
• Exporting your painting as png
• Undo drawing a line
• Clearing the whole drawing
• Check if anything was drawn at all (using `PainterController.isEmpty')
• Erase Mode

Some Notes

• After calling 'finish()' on a PainterController you can't draw on this painting any more
• To create a new painting after finishing the old one simply create a new PainterController
• Calling 'finish()' for the first time will render the drawing. Successive calls will then return a cached version of the rendered picture

Example

For a full example take a look at the example project. Here is a short recording showing it. Note that the color picker is an external dependency which is only required for the example.

painter's Issues

exportAsPNGBytes reduce image quality

Why after call exportAsPNGBytes method, it reduces image quality? Is there a way to prevent it?
Thanks.

Erase image with painter

Hello,
I was wondering is it possible to remove image with painter?

How to use painter as a separte page ?

Pinch to zoom capabilities

I am working on an App, where we want to draw with one finger and pinch to zoom with two fingers without pressing a button in between. Our problem is, that the drawing do not work properly, if we zoom in and try to draw because the image moves when drawing.
Are there any solutions for this problem?

Don't get the full image (PNG) on mobile

When i run the app on Web (Chrome) works like a charm (i make a signature, goes to the next step and at the end i made a base64 String with the data of the PNG (.toPNG()), but when i change to mobile the image don't render correctly (only do like 24 pixels of height) it does all the width (like 323 pixels).

Container with a button to generate the PNG and storage in a variable.

Button to print the base64 string

And this is the only result when i run the app in a mobile device (It's missing a lot of lines)

How it looks (the image have the correct dimensions but the content is missing):

[URGENT] making changes

Is is possible to make changes to the drawing stroke (eg: add new stroke, erase some stroke) after i am done with the drawing. For instance, i am done with the current drawing (in drawing screen), i navigate back to the home screen and i select the same drawing again to bring me back to the drawing screen, am i able to erase previously drawn stroke?

A value of type 'Future<Image>' can't be assigned to a variable of type 'Image'.

I have this error when download the project
A value of type 'Future' can't be assigned to a variable of type 'Image'. in the method of class painter.

In the line 166 to 168:

Image toImage(){
return picture.toImage(width, height); // here!
}

Eraser functionality

how to erase like an physical eraser on the canvas

share PainterController between to users in realtime

it is possible to share the PainterController data between two user in realtime(like with fireabase database)?
like one user draw something then other user should see that drawing.

Disable Multi-Touch | While moving two fingers on canvas painting gets destroyed.

I'm facing the issue while accidentally second finger touch the canvas then drawing gets distracted.

@EPNW It's recommended feature to add supports of Disable Multi-Touch while drawing.

Can anyone have an idea about it?

Thanks in advance :)

@fluttercommunity

PainterController set background by picture from gallery

Hi. Thanks for your library. It's really good.
Can you add more property like background by picture from gallery? It will perfect.
Thanks.

Multi touch bug

When I click with two fingers, I have a line draw.
It's possible to disable a multi touch functionality?

Erasing crashes app on mobile web

I noticed a crash when attempting to erase in my Flutter web application only on mobile web browsers. I then tested it with the example code from pub.dev and experienced the same behavior.

It appears that paint.blendMode = BlendMode.clear; is the culprit.

One quick workaround I found is to just simulate an erase stroke by painting using the backgroundColor.

if (_eraseMode) {
  paint.blendMode = BlendMode.srcOver;
  paint.color = backgroundColor;
}

However, in my app, my PainterController has backgroundColor = Colors.transparent.

I am not that familiar with different blend modes and if there is another way to achieve my desired result.

Suggestion : make getter method about _pathHistory in PaintController class.

I've tried to use this package in my app, and I think getter method about _pathHistory could be useful.
I used the package as sign pad, and I need a state of _path in the pathHistory class to get an information about sign pad's state whether sign pad is null or not.
So I added a few code in the PainterController class and _PathHistory class, like this :
in _PathHistory,
List<MapEntry<Path,Paint>> get paths => _paths;

in PainterController.
_PathHistory get pathHistory => _pathHistory;

This short codes enables me to make stop when there's no signature on the sign pad.
But it's uncomfortable to add this codes whenever I made new projects, so I suggest you to add this codes to original.

Flutter Painter class starts marking from wrong position when wrapping painter with InteractiveViewer

Im using painter package: https://pub.dev/packages/painter - painter: ^0.4.0 and default InteractiveViewer Widget

Painter class standalone is working fine but, when wrapping it with InteractiveViewer
InteractiveViewer(child: Painter(_controller))

on marking, it starts marking with delay, like approx. 10px from global position

I've tested my code by removing all other widgets, but the problem is still there.

Permission to make a PR

Hello,
I wanted to work on a feature and make PR, but I didn't have access to push to a new branch. Is there something else that I have to do?

access to image data while it is not finished

before I set the painter as finished I would like to:

• know if anything has been painted at all (true/false)
• get a snapshot image of the drawing but still let the user draw more
  is that possible?

Bug last update SDK dark - Error: A value of type 'Future<Image>' can't be assigned to a variable of type 'Image'

Hi, i have this problem.

Feature: thickness size based on speed

It would be cool have an option to enable the thickness of the pencil based on the speed of the cursor. I tried to draw something in native iOS and it seems to behave like that! What do you think?

Can I record the drawing?

Hello, I want to record and replay my drawings. I want to learn this.

Cant find where the picture is exported?

Cant find the feature export to png on a device

operation failed - throws when toImage() is called

Hi
When we try to convert the painter to image/png it throws error saying "operation failed"
works in most of devices but facing issue in some iOS and some android devices[ tested in samsung s10 and honor devices]

any workaround or solution to get it fixed.

my logic is simple, pasting here....

try{
  var imgToSendBack =await _controller.finish().toPNG();
}catch(e){
print('save image catch error ${e.toString()}');
}

[BUG] Eraser and brush bug.

Once i use eraser, I can't go back to using brush. You can pick color, but the blendmode is still set to clear, and thus keeps erasing.

Null safety

Hey,
Do you guys plan to upgrade to support Dart Null Safety?

 dart pub outdated --mode=null-safety

Resolving...
Showing dependencies that are currently not opted in to null-safety.
[✗] indicates versions without null safety support.
[✓] indicates versions opting in to null safety.   

Computing null safety support...
Package Name                          Current        Upgradable      Resolvable  Latest

direct dependencies:
...
painter                               ✗0.4.0         ✗0.4.0          -           ✗0.4.0
...

Change Pencil Color

How to change the default drawer pen colour (Black) into another colour.

How can I redo?

How can I redo?
Thank you.

Method of further modifying a picture after it has been finished

When finish() is called on the PaintController for the first time, a Picture is rendered from the paths. Any later calls to finish() will return that same Picture, which was cached by the first call to finish(). So, any changes made (such as new paths added) after the first call to finish() will be left out of the output Picture.

It would be very useful to be able to make changes, output the Picture (for example to save to disk as a bitmap), then be able to make further changes and output the picture again, with these new changes.

As far as I can tell there's currently no way to do this? If that's the case, it would be a very welcome addition. Thank you!

Change size to drawable section

Hi @EPNW,

I need to draw on an image. So the drawable section should be the size of that image. Is it possible to indicate the size of the Painter that you want to use?

Please provide the support for starting and ending point while user is drawing on the screen

Right now, we don't have any callback to check from where the user is started drawing on the screen. We are not getting any coordinates on the screen. Need help with this!

Bug: Color does not refresh on ColorPickerArea

I've tested on Emulator Nexus 5x API 27.

I found that ColorPickerArea does not change if I select color on ColorPickerSlider.

But it works well on iOS simulator.

Please add support to pass our own text

Can you please add support to add our text to controller
e.g i have text store in a variable i want to pass it to controller how can i achieve this?

Not able to re-assign PainterController

I want to re-assign PainterController object but it throws me A PainterController was used after being disposed.

My Scenario

I want to make a painter screen similar to the one of Social Media apps like instagram or fb messenger. So, the user can draw something on the image, but he/she can also update it in a second moment.

I have two screen ImageScreen and BrushScreen. in the ImageScreen there is option to go for Brush and draw anything on image. then user can tap "Done" button and get back to ImageScreen. But when user again go to the BrushScreen i need to keep PainterController. So user can update with existing one.

It works when assigned PainterController first time. but at second time it throws error as i mentioned above.

Any help on this would be much appreciated!

Code Snippet

BrushScreen

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:painter/painter.dart';

class BrushScreen extends StatefulWidget {
  final File imageFile;

  const BrushScreen({Key? key, required this.imageFile}) : super(key: key);

  @override
  _BrushScreenState createState() => _BrushScreenState();
}

class _BrushScreenState extends State<BrushScreen> {
  late final PainterController _controller;

  @override
  void initState() {
    super.initState();
    _controller = PainterController()
      ..backgroundColor = Colors.transparent
      ..drawColor = Colors.white;

    _controller.addListener(() {
      setState(() {});
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: SafeArea(
        child: Column(
          children: [
            Expanded(
              child: Stack(
                children: [
                  Positioned.fill(
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(16),
                      child: Image.file(
                        widget.imageFile,
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                  Painter(_controller),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

ImageScreen Brush button

onTap: () async {
  final result = await Navigator.of(context).push(MaterialPageRoute(builder: (_) => 
  BrushScreen(imageFile: imageFile)));
  if (result is PainterController)
                      setState(() {
                        _paintController = result;
                      });
                  },

Support - Adding New custom shape using Custom paint on canvas.

Guys, is there any way we can add our custom drawing shape to cavas ??

Or any way we can get instance of canvas which can help to get painted over it ? Just like any circle on canvas as shown in image.

is it possible add full-fill or brush ?

Click a dot not working

Erase Mode Error Flutter Web

I got a error when I try to Erase lines please fix it.

Add a cap option

Could you create an option to set the cap of the lines to circular etc..?

How can I store the location of a path as a list of offsets?

I would like to save the drawing as a list of lists. More specifically, a list of paths that each has a list of offset points in (x and y). Is this possible using the PainterController in this package?