How to customize the Theme of the Sliders?

[saif-ellafi]

Hello,

I can't seem to be able to change the colors of the slider inside the text editor (i.e. font scale, or line width sliders).

Tried setting this up without any success:

theme: ThemeData(
    sliderTheme: SliderThemeData(
      activeTrackColor: Colors.pink,
      inactiveTrackColor: Colors.grey,
    )
  ),

Any ideas welcome!

[hm21]

The design customization options within the SliderThemeData are somewhat limited, as there are a lot of configurations available for customizing a slider. Therefore, I decided it would make more sense to allow users to create their own sliders with customWidgets. Below is an example how you can replace the existing slider with your own implementation:

configs: ProImageEditorConfigs(
  customWidgets: ImageEditorCustomWidgets(
    textEditor: CustomWidgetsTextEditor(
      sliderFontSize:
          (editorState, rebuildStream, value, onChanged, onChangeEnd) {
        return ReactiveCustomWidget(
          stream: rebuildStream,
          builder: (_) => Slider(
            onChanged: onChanged,
            onChangeEnd: onChangeEnd,
            value: value,
            activeColor: Colors.blue.shade200,
          ),
        );
      },
    ),
  ),
),

[saif-ellafi]

Ohh truly wonderful, thank you, I also think I was misplacing the configs, because this is was part of a custom widget opening the text editor page manually, so the bigger scope image editor config was not applying the theme in this custom TextEditor page. In case it helps anyone:

    editorKey.currentState?.openPage(
      TextEditor(
        key: key,
        layer: newLayer,
        theme: ThemeData(),
        configs: ProImageEditorConfigs(
          customWidgets: ImageEditorCustomWidgets(
            textEditor: CustomWidgetsTextEditor(
              sliderFontSize:
                  (editorState, rebuildStream, value, onChanged, onChangeEnd) {
                return ReactiveCustomWidget(
                  stream: rebuildStream,
                  builder: (_) => Slider(
                    onChanged: onChanged,
                    onChangeEnd: onChangeEnd,
                    value: value,
                    activeColor: Colors.red,
                  ),
                );
              },
            ),
          ),
        ),
        callbacks: ProImageEditorCallbacks(
          textEditorCallbacks: TextEditorCallbacks(
            onDone: () {
              newLayer.text = key.currentState!.textCtrl.text;
            },
          )
        ),
      )
    );

[saif-ellafi]

Btw I do not know if closing discussions is the right thing to do, feel free to reopen.

Best regards

[hm21]

Normally, I leave Q&A discussions open because, by default, GitHub filters discussions as “open” when users visit the discussions tab. Users who are not very familiar with GitHub may not know how to change the filter and, as a result, might miss the closed discussions. I will reopen this Q&A cuz I believe it might be helpful for other users to see it directly.

Best regards