Thanks for this library, and starting to migrate it to null safety.

I am using image_painter: ^1.0.0-nullsafety.0.

My project is set with:

environment:
  sdk: ">=2.12.0 <3.0.0"

As I was implementing image_painter in my project, I was having issues with exportImage.

It kept complaining about ByteData, and then buffer. Eventually I hit upon this combination:

  ///Generates [Uint8List] of the [ui.Image] generated by the [renderImage()] method.
  ///Can be converted to image file by writing as bytes.
  Future<Uint8List?> exportImage() async {
    ui.Image _image;
    if (widget.isSignature) {
      final _boundary = _repaintKey.currentContext!.findRenderObject()
          as RenderRepaintBoundary;
      _image = await _boundary.toImage(pixelRatio: 3);
    } else if (widget.byteArray != null && _paintHistory.isEmpty) {
      return widget.byteArray;
    } else {
      _image = await _renderImage();
    }
    final byteData = await (_image.toByteData(format: ui.ImageByteFormat.png) as FutureOr<ByteData?>);
    return byteData?.buffer.asUint8List();

Note the last 2 lines, specifically.

I don't know if it's correct or not, but thought I'd pass it along in case it helps.

I'm still learning, very slowly, so it's certainly possible this could be done better.

So first of all i'm sorry if i'm doing something wrong, it's my first time on contributing to a repo but i'm willing to help or do anything to make this easier.

About the changes, i added the field "controlsBackgroundColor" to all of the constructors, a simple thing but if this goes well i'm planning on keep contributing to this repo, i would really appreciate any advice.

Also i made another example, it just loads an image for editing using image_picker package, there were a lot of problems about migration but i think is fixed now. The example is just a full screen button that shows a ImagePicker, then a ImagePainter allows editing. The black background color was achieved by simple using a Stack, where the bottom buttons are also placed.

Can't undo changes when drawing, and after interacting with "view/zoom" option from menu. This could be a state problem, i can't find how to solve it.

In "_paint_over_image.dart" consider updating this:

IconButton(
            tooltip: **textDelegate.undo**,
            icon: widget.clearAllIcon ??
                const Icon(CommunityMaterialIcons.eraser),
            onPressed: () => setState(_paintHistory.clear),
          ),

To this:

IconButton(
            tooltip: **textDelegate.clearAllProgress**,
            icon: widget.clearAllIcon ??
                const Icon(CommunityMaterialIcons.eraser),
            onPressed: () => setState(_paintHistory.clear),
          ),

I forked this project and i love it, thumbs up to the creator!!

Image Painter network constructor does not setup value for attribute isScalable. This causes issues with ImagePainterTransformer because isScalable has a null assertion.

How to painting and then reverse the painting area . It just like put a full layer top the image, then using finger smearing the area user want to keep, after that, user will only to keep the area they want [the smeared area]

For the example, user really want to keep the area what the smeared by red color,

Hi,

I have an issue in scrolling while using this widget in my project. It all worked fine but when I start dragging it using mouse, it scrolls the whole screen. Please check the attached git. I am also using the other package for signatures and there is no issue in that one and it worked all fine but this one is not working fine.

https://user-images.githubusercontent.com/72092249/139265428-fde52bea-0764-45e9-bc0f-dbbb1807eb7f.mov

Problem

The dropdown of PaintMode includes text. If text is selected nothing happens. This mode is redundant because the text mode already exists in the action bar next to the stroke size selection.

Following this it would be nice to activate or deactivate features of the action bar and to restrict selection of the aviable paint modes.

We would like to set the initial paint mode. Currently line is the default when opening the widget with an Image File. We would like to set the PaintMode to freeStyle.

Our current implementation and call of the ImagePainter looks like this:

ImagePainter.file(
          File(widget.imagePath),
          key: _imageKey,
          scalable: true,
        )

Is there a way to manipulate the controller in any way? Or should we fork this projekt to customize it further?

Thank you!

Problem

If the mode scalable is set to true the ImagePainter does not prevent painting while scaling. Also this mode should be called zoom instead of scaling because the scaling of the image is not saved.

Solution

Implement a Listener wrapped around the canvas that handles the current FingerCount:

[...] Listener(
      onPointerDown: (_) => increaseFingerCount(),
      onPointerUp: (_) => decreaseFingerCount(),
      child: [...]

Then cancel painting when the fingerCount is == 2

if (_fingerCount == 2) {
   return;
}

Hi thanks for the cool lib.

I was wondering if it is possible to return just the paint layer seperate from the image.. I have tried: original_img - painted_img however this doesn't seem to work (perhaps some postprocessing that changes resolution / pixels values subtely?)

Thanks

When a horizontal image is loaded to the painter the image is really tinny, and when zoomed it doesn't changes it size, the zoom remains inside the area of the image.

Is there a way to change this behavior so the image scales using all the available space, maybe adding a new paint mode to allow crop?

thank you.

It would be nice to see some sort of control to rotate a painted figure, from other apps rotating can be quite frustrating but maybe a special icon placen on the edge of a selected figure could simplify that process