highlighter/transparent colors

[amirharati]

Hi, I am trying to implement a highlight tool (for example to use to highlight a text). It seems painting line should just do it but i need to be able to control the opacity. From examples, I have not figure out how to do so. Is there a way to configure opacity and other features? appreciate it if point me to an example (or perhaps if there is a special feature for highlighting).

[amirharati]

here is a solution I come up with (also prob. not best solution for this):
https://gist.github.com/amirharati/2cf44d20faba6ba5edfaed4101b7c888

[hm21]

Hi, I just take a look at your solution and in the image editor version <= 4.2.9 it is the best thing you can do to solve it. However, I released version 4.3.0 with a new option which makes it easier for users to set the opacity and also solve the opacity in the freestyle drawing which look not really smooth.

Below is an example of how to do it, but feel free to use customWidgets as well. If you use your own solution, I recommend using the new setOpacity method in the paint editor and not to set the opacity directly on the color.

FYI: I noticed that you set the customPixelRatio to 1. I'm not sure if you really want this, but I recommend not setting a value there because the image editor will calculate the optimal factor depending on your device. If you set this value to 1, there is a very high possibility that it will reduce the quality of your image.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Drawing App'),
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text('Start Drawing'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => PaintingEditor.network(
                  'https://picsum.photos/id/230/2000',
                  initConfigs: PaintEditorInitConfigs(
                    theme: ThemeData.dark(),
                    convertToUint8List: true,
                    configs: const ProImageEditorConfigs(
                      imageEditorTheme: ImageEditorTheme(
                        background: Colors.white,
                        paintingEditor: PaintingEditorTheme(
                          initialColor: Colors.red,
                          initialOpacity: 0.5,
                          // opacityBottomSheetColor: ,
                          // opacityBottomSheetTitle: ,
                        ),
                      ),
                      paintEditorConfigs: PaintEditorConfigs(
                        editorIsZoomable: true,
                        canChangeOpacity: true,
                      ),

                      /// Optional:
                      ///
                      /// icons: ImageEditorIcons(
                      ///   paintingEditor: IconsPaintingEditor(
                      ///     changeOpacity: Icons.opacity_outlined,
                      ///   )
                      /// ),
                      /// i18n: I18n(
                      ///   paintEditor: I18nPaintingEditor(
                      ///     changeOpacity: 'Change opacity',
                      ///   ),
                      /// ),
                      /// customWidgets: ImageEditorCustomWidgets(
                      ///   paintEditor: CustomWidgetsPaintEditor(
                      ///     sliderChangeOpacity: ,
                      ///     changeOpacityCloseButton: ,
                      ///   )
                      /// )
                    ),
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }

[amirharati]

thanks for the update and also adding this feature so quickly.