[Question] How to customize the UI color picker for text, paint editor, and crop ratio

[thanglq1]

Placeholder

Hi @hm21 . Thanks for the great package. I have some questions.

1. How to customize the UI color picker for text, Paint editor?
2. How to customize the UI ratio bottom sheet of the Crop editor?
3. How to customize the UI slider of Filter, Blur

[hm21]

Actually it was not possible to customize this widgets that they have a unique style. However i released version 3.0.5 where you can customize all this widgets. Below is an example how to do it.

return ProImageEditor.asset(
      ExampleConstants.of(context)!.demoAssetPath,
      key: editorKey,
      callbacks: ProImageEditorCallbacks(
        onImageEditingStarted: onImageEditingStarted,
        onImageEditingComplete: onImageEditingComplete,
        onCloseEditor: onCloseEditor,
      ),
      configs: ProImageEditorConfigs(
        customWidgets: ImageEditorCustomWidgets(
          colorPickerTextEditor: (setColor) {
            return BarColorPicker(
              configs: const ProImageEditorConfigs(),
              length: 200,
              horizontal: false,
              thumbColor: Colors.brown,
              cornerRadius: 10,
              pickMode: PickMode.color,
              initialColor: const Color.fromARGB(255, 0, 255, 8),
              colorListener: (int value) {
                setColor(Color(value));
              },
            );
          },
          colorPickerPaintEditor: (setColor) {
            return BarColorPicker(
              configs: const ProImageEditorConfigs(),
              length: 200,
              horizontal: false,
              thumbColor: const Color.fromARGB(255, 255, 183, 0),
              cornerRadius: 10,
              pickMode: PickMode.color,
              initialColor: const Color.fromARGB(255, 34, 0, 255),
              colorListener: (int value) {
                setColor(Color(value));
              },
            );
          },
          sliderBlurEditor: (value, onChanged, onChangeEnd) {
            return Slider(
              min: 0,
              max: 1,
              divisions: 100,
              value: value,
              onChanged: onChanged,
              onChangeEnd: onChangeEnd,
              inactiveColor: Colors.red,
            );
          },
          sliderFilterEditor: (value, onChanged, onChangeEnd) {
            return Slider(
              min: 0,
              max: 1,
              divisions: 100,
              value: value,
              onChanged: onChanged,
              onChangeEnd: onChangeEnd,
              thumbColor: Colors.yellow,
            );
          },
          cropEditorAspectRatioOptions: (aspectRatio, originalAspectRatio) {
            return Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                ListTile(
                  title:
                      const Text('3*4', style: TextStyle(color: Colors.white)),
                  onTap: () {
                    Navigator.pop(context, 3 / 4);
                  },
                ),
                ListTile(
                  title:
                      const Text('16*9', style: TextStyle(color: Colors.white)),
                  onTap: () {
                    Navigator.pop(context, 16 / 9);
                  },
                ),
              ],
            );
          },
        ),
      ),
    );

Btw, I added this tab discuss which is better to ask questions, so I would love if you create your future questions there too :)

[adamkoch]

This is great, I was going to ask about customizing these as well :-)

One additional request - would it be possible to pass the current color into colorPickerTextEditor and colorPickerPaintEditor? So the custom widget can have the existing color shown or highlighted.

I tried to use the text style color via the editor key but the state does not seem to be updated in time.

[thanglq1]

Thanks @hm21