Allow custom color of image editor icon

[thanglq1]

Platforms

Android, iOS

Description

Currently, ImageEditorIcons only support custom image editor icons. It would be even better if we could customize the color of the image editor icons as well

[hm21]

Thanks for your future request. May I ask, do you need to change the color of every icon differently, or you just want to change a set of color? For example, if you want to change the icon color of all icons inside the appBar or bottomBar, you can change the color inside ImageEditorTheme.

As example:

imageEditorTheme: const ImageEditorTheme(
      appBarBackgroundColor: Color(0xFF000000),
      appBarForegroundColor: Color(0xFFFFFFFF),
       paintingEditor: PaintingEditorTheme(
        appBarBackgroundColor: Color.fromARGB(255, 20, 99, 189),
        appBarForegroundColor: Color(0xFFE1E1E1),
        bottomBarColor: Color.fromARGB(255, 136, 0, 84),
        bottomBarActiveItemColor: Color.fromARGB(255, 46, 0, 58),
        bottomBarInactiveItemColor: Color.fromARGB(255, 223, 255, 210),
      ),
      textEditor: TextEditorTheme(
        appBarBackgroundColor: Color.fromARGB(255, 0, 17, 255),
        appBarForegroundColor: Color(0xFFE1E1E1),
      ),
)

[thanglq1]

Thanks for your future request. May I ask, do you need to change the color of every icon differently, or you just want to change a set of color? For example, if you want to change the icon color of all icons inside the appBar or bottomBar, you can change the color inside ImageEditorTheme.

As example:

imageEditorTheme: const ImageEditorTheme(
      appBarBackgroundColor: Color(0xFF000000),
      appBarForegroundColor: Color(0xFFFFFFFF),
       paintingEditor: PaintingEditorTheme(
        appBarBackgroundColor: Color.fromARGB(255, 20, 99, 189),
        appBarForegroundColor: Color(0xFFE1E1E1),
        bottomBarColor: Color.fromARGB(255, 136, 0, 84),
        bottomBarActiveItemColor: Color.fromARGB(255, 46, 0, 58),
        bottomBarInactiveItemColor: Color.fromARGB(255, 223, 255, 210),
      ),
      textEditor: TextEditorTheme(
        appBarBackgroundColor: Color.fromARGB(255, 0, 17, 255),
        appBarForegroundColor: Color(0xFFE1E1E1),
      ),
)

Hi @hm21. Some icon dont have such as EmojiEditorTheme or StickerEditorTheme so now i'm using custom widget icon.

[hm21]

Hi @thanglq1

Exactly, the StickerEditorTheme doesn't have an option to style anything currently because we build the sticker editor outside the ProImageEditor widget and just push the layer inside, as you can see in this example. This allows you to completely design it by yourself.

The EmojiEditorTheme actually supports it to change the whole theme, but to be honest, I made a mistake and put the theme configurations inside EmojiEditorConfigs and not inside EmojiEditorTheme which is inside ImageEditorTheme. Anyway, I updated it to version 2.7.4 which should allow you to change all colors like in the other editors.

Is this enough, or do you need to have the possibility to change the color of each icon separately? Actually, I can add an option for each icon to set a separate color, but I'm a bit afraid that it will be too many theme configurations which will make it hard for users to understand the theme configurations. For a lot of customization, I currently give the users the option to replace the full appbar and bottombar with their solution, like in this example.

[thanglq1]

Thank you. I will close this issue.

[thanglq1]

Hi @hm21. Sorry, I think I need reopen this issue. In ImageEditorTheme dont have any option to change color of close editor, undo, redo, done button.

[hm21]

Do you need to change a different color for each icon, or just the same color for all? If you want to change the same color for all, you can change the appBarForegroundColor like below:

imageEditorTheme: const ImageEditorTheme(
           appBarForegroundColor: Colors.black,
)

[thanglq1]

Do you need to change a different color for each icon, or just the same color for all? If you want to change the same color for all, you can change the appBarForegroundColor like below:

imageEditorTheme: const ImageEditorTheme(
           appBarForegroundColor: Colors.black,
)

How to custom a different color of each icon? And when I use custom widget Icon, dont have option to change color of PaintModeBottomBarItem

[hm21]

In the paint editor in the bottom bar you can set bottomBarInactiveItemColor and bottomBarActiveItemColor which allow you to set a different color for the selected mode. If you want to customize each icon separately, you can simply replace the appbar with a complete custom solution of your own. This allows you to change any configuration as you like. You can check out this example how to change the appBar or bottomBar.

[thanglq1]

Yes, I saw your example and I tried to change the color of paint editor. I added the below code but it does not work (when we custom widget, custom bottomBar)

imageEditorTheme: const ImageEditorTheme(
            paintingEditor: PaintingEditorTheme(
              bottomBarActiveItemColor: Colors.red,
              bottomBarInactiveItemColor: Colors.yellow,
            ),
          ),

[hm21]

Did I understand you correctly that in custom widgets you set your own appbar and bottombar for the image editor, right? If yes, then you need to set the color in the custom widget because you are overriding the existing stuff with your widget. If you use the code from the example, you can change it here:

Builder(
          builder: (_) {
            var item = paintModes[index];
            var color = editorKey.currentState?.paintingEditor
                        .currentState?.paintMode ==
                    item.mode
                ? imageEditorPrimaryColor // TODO: set here your selected color
                : const Color(0xFFEEEEEE);

            return FlatIconTextButton(
              label: Text(
                item.label,
                style: TextStyle(fontSize: 10.0, color: color),
              ),
              icon: Icon(item.icon, color: color),
              onPressed: () {
                editorKey
                    .currentState?.paintingEditor.currentState
                    ?.setMode(item.mode);
                setState(() {});
              },
            );
          },
        ),

[thanglq1]

I'm following your example. I can not change color of paint editor.PaintModeBottomBarItem dont have any option to change color. I also tried this but does not work

imageEditorTheme: const ImageEditorTheme(
            paintingEditor: PaintingEditorTheme(
              bottomBarActiveItemColor: Colors.red,
              bottomBarInactiveItemColor: Colors.yellow,
            ),
          ),

following your example code here

  final List<PaintModeBottomBarItem> paintModes = [
    const PaintModeBottomBarItem(
      mode: PaintModeE.freeStyle,
      icon: Icons.edit,
      label: 'Freestyle',
    ),
    const PaintModeBottomBarItem(
      mode: PaintModeE.arrow,
      icon: Icons.arrow_right_alt_outlined,
      label: 'Arrow',
    ),
    const PaintModeBottomBarItem(
      mode: PaintModeE.line,
      icon: Icons.horizontal_rule,
      label: 'Line',
    ),
    const PaintModeBottomBarItem(
      mode: PaintModeE.rect,
      icon: Icons.crop_free,
      label: 'Rectangle',
    ),
    const PaintModeBottomBarItem(
      mode: PaintModeE.circle,
      icon: Icons.lens_outlined,
      label: 'Circle',
    ),
    const PaintModeBottomBarItem(
      mode: PaintModeE.dashLine,
      icon: Icons.power_input,
      label: 'Dash line',
    ),
  ];

Widget _bottomBarPaintingEditor(BoxConstraints constraints) {
    return StreamBuilder(
      stream: _updateUIStream.stream,
      builder: (_, __) {
        return Scrollbar(
          controller: _bottomBarScrollCtrl,
          scrollbarOrientation: ScrollbarOrientation.top,
          thickness: isDesktop ? null : 0,
          child: BottomAppBar(
            height: kBottomNavigationBarHeight,
            // color: Colors.black,
            color: Colors.green,
            padding: EdgeInsets.zero,
            child: Center(
              child: SingleChildScrollView(
                controller: _bottomBarScrollCtrl,
                scrollDirection: Axis.horizontal,
                child: ConstrainedBox(
                  constraints: BoxConstraints(
                    minWidth: min(constraints.maxWidth, 500),
                    maxWidth: 500,
                  ),
                  child: Wrap(
                    direction: Axis.horizontal,
                    alignment: WrapAlignment.spaceAround,
                    children: <Widget>[
                      FlatIconTextButton(
                        label: Text('My Button',
                            style:
                                _bottomTextStyle.copyWith(color: Colors.amber)),
                        icon: const Icon(
                          Icons.new_releases_outlined,
                          size: 22.0,
                          color: Colors.amber,
                        ),
                        onPressed: () {},
                      ),
                      ...List.generate(
                        paintModes.length,
                        (index) => Builder(
                          builder: (_) {
                            var item = paintModes[index];
                            var color = editorKey.currentState?.paintingEditor
                                        .currentState?.paintMode ==
                                    item.mode
                                ? imageEditorPrimaryColor
                                : const Color(0xFFEEEEEE);

                            return FlatIconTextButton(
                              label: Text(
                                item.label,
                                style: TextStyle(fontSize: 10.0, color: color),
                              ),
                              icon: Icon(item.icon, color: color),
                              onPressed: () {
                                editorKey
                                    .currentState?.paintingEditor.currentState
                                    ?.setMode(item.mode);
                                setState(() {});
                              },
                            );
                          },
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),
        );
      },
    );
  }

[hm21]

As I said in my post before, you need to change the color inside the custom widget because you are overriding the existing one. It's useless to do anything in the theme if you create your own widget. Below is the updated version of your code that you use from the example that set the color to red and yellow:

  final List<PaintModeBottomBarItem> paintModes = [
    const PaintModeBottomBarItem(
      mode: PaintModeE.freeStyle,
      icon: Icons.edit,
      label: 'Freestyle',
    ),
    const PaintModeBottomBarItem(
      mode: PaintModeE.arrow,
      icon: Icons.arrow_right_alt_outlined,
      label: 'Arrow',
    ),
    const PaintModeBottomBarItem(
      mode: PaintModeE.line,
      icon: Icons.horizontal_rule,
      label: 'Line',
    ),
    const PaintModeBottomBarItem(
      mode: PaintModeE.rect,
      icon: Icons.crop_free,
      label: 'Rectangle',
    ),
    const PaintModeBottomBarItem(
      mode: PaintModeE.circle,
      icon: Icons.lens_outlined,
      label: 'Circle',
    ),
    const PaintModeBottomBarItem(
      mode: PaintModeE.dashLine,
      icon: Icons.power_input,
      label: 'Dash line',
    ),
  ];

Widget _bottomBarPaintingEditor(BoxConstraints constraints) {
    return StreamBuilder(
      stream: _updateUIStream.stream,
      builder: (_, __) {
        return Scrollbar(
          controller: _bottomBarScrollCtrl,
          scrollbarOrientation: ScrollbarOrientation.top,
          thickness: isDesktop ? null : 0,
          child: BottomAppBar(
            height: kBottomNavigationBarHeight,
            // color: Colors.black,
            color: Colors.green,
            padding: EdgeInsets.zero,
            child: Center(
              child: SingleChildScrollView(
                controller: _bottomBarScrollCtrl,
                scrollDirection: Axis.horizontal,
                child: ConstrainedBox(
                  constraints: BoxConstraints(
                    minWidth: min(constraints.maxWidth, 500),
                    maxWidth: 500,
                  ),
                  child: Wrap(
                    direction: Axis.horizontal,
                    alignment: WrapAlignment.spaceAround,
                    children: <Widget>[
                      FlatIconTextButton(
                        label: Text('My Button',
                            style:
                                _bottomTextStyle.copyWith(color: Colors.amber)),
                        icon: const Icon(
                          Icons.new_releases_outlined,
                          size: 22.0,
                          color: Colors.amber,
                        ),
                        onPressed: () {},
                      ),
                      ...List.generate(
                        paintModes.length,
                        (index) => Builder(
                          builder: (_) {
                            var item = paintModes[index];
                            /// TODO: set your colors below
                             var color = editorKey.currentState?.paintingEditor
                                        .currentState?.paintMode ==
                                    item.mode
                                ? Colors.red
                                : Colors.yellow;

                            return FlatIconTextButton(
                              label: Text(
                                item.label,
                                style: TextStyle(fontSize: 10.0, color: color),
                              ),
                              icon: Icon(item.icon, color: color),
                              onPressed: () {
                                editorKey
                                    .currentState?.paintingEditor.currentState
                                    ?.setMode(item.mode);
                                setState(() {});
                              },
                            );
                          },
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),
        );
      },
    );
  }

[thanglq1]

Yes, my bad. I forgot change this. So will close this issue.

var color = editorKey.currentState?.paintingEditor
                                        .currentState?.paintMode ==
                                    item.mode
                                ? imageEditorPrimaryColor
                                : const Color(0xFFEEEEEE);