ColorFilter.matrix in Editor

[jj-gh]

Content

Is there a way to add a matrix color filter to the image in the editor? I'm trying to create color filter presets and I would like them to be previewed in the editor.

[zmtzawqlp]

take a look at. https://github.com/fluttercandies/flutter_image_editor#color-martix

[jj-gh]

take a look at. https://github.com/fluttercandies/flutter_image_editor#color-martix

Sorry if my question wasn't clear, what I meant is when ExtendedImage is in editor mode.

ExtendedImage.file(
    ...
    mode: ExtendedImageMode.editor,
    initEditorConfigHandler: (state) => EditorConfig(
        ...
        colorFilter: colorFilter,  // <-- It would be nice if this existed
        ....
    ),
    ...
)

I'm trying to do this:

https://github.com/fluttercandies/extended_image/assets/29596233/d05f125c-261d-4f27-a87d-defe5f508993

[jj-gh]

Sorry, I accidentally closed the issue '>.<

[zmtzawqlp]

I think you can add ColorFilter outside of ExtendedImage https://stackoverflow.com/questions/72139570/flutter-user-colorfiltered-to-dark-image-with-matrix

[jj-gh]

I think you can add ColorFilter outside of ExtendedImage https://stackoverflow.com/questions/72139570/flutter-user-colorfiltered-to-dark-image-with-matrix

A few issues with this:

1. It applies the filter to the whole widget which includes the background, instead of just the image.
2. The crop, rotation, and flip state will reset when the filter is toggled on/off.
3. Zooming or cropping a high resolution image will make the UI very slow when the filter is on.

https://github.com/fluttercandies/extended_image/assets/29596233/de257041-1f0e-4892-8d80-c6d39bf5ab87

I came up with a solution for problem 1 and 2 by adding a ColorFilter parameter to EditorConfig class (editor_utils.dart), and then applying it in the build method of the ExtendedImageEditor widget (editor.dart)

@override
Widget build(BuildContext context) {
  ...
  Widget image = ExtendedRawImage(
    ...
  );

//======== THIS BLOCK ==========
  if (_editorConfig!.colorFilter != null)
    image = ColorFiltered(
      colorFilter: _editorConfig!.colorFilter!,
      child: image,
    );
//==============================
  ...
}

Here's the result, but problem 3 still remains.

https://github.com/fluttercandies/extended_image/assets/29596233/b36ec4fe-67ab-43c1-b854-0def9f09d868

[karnadii]

you can do something like this, the filter will only affect the completed image, I don't know if it will work on editor though. it works with gesture mode.

 case LoadState.completed:
              return ImageFiltered(
                imageFilter: const ColorFilter.matrix(<double>[
                  ...[0.393, 0.769, 0.189, 0, 0],
                  ...[0.349, 0.686, 0.168, 0, 0],
                  ...[0.272, 0.534, 0.131, 0, 0],
                  ...[0, 0, 0, 1, 0]
                ]),
                child: state.completedWidget, 
              );
          }

[zhponng]

you can do something like this, the filter will only affect the completed image, I don't know if it will work on editor though. it works with gesture mode.

 case LoadState.completed:
              return ImageFiltered(
                imageFilter: const ColorFilter.matrix(<double>[
                  ...[0.393, 0.769, 0.189, 0, 0],
                  ...[0.349, 0.686, 0.168, 0, 0],
                  ...[0.272, 0.534, 0.131, 0, 0],
                  ...[0, 0, 0, 1, 0]
                ]),
                child: state.completedWidget, 
              );
          }

it only works on debug model, when i switch to release, the preview widget is blank.

But, when i changed ImageFiltered to container and set color to red, it works.

please somebody tell me why