search

hm21 / pro_image_editor

The pro_image_editor is a Flutter widget designed for image editing within your application. It provides a flexible and convenient way to integrate image editing capabilities into your Flutter project.
https://hm21.github.io/pro_image_editor/
BSD 3-Clause "New" or "Revised" License
94 stars 59 forks source link

[Bug]: The layer position will change when you customize the bottombar. #195

Closed Ethan-Z closed 3 weeks ago

Ethan-Z commented 3 weeks ago

Package Version

5.1.0

Flutter Version

3.24

Platforms

iOS

How to reproduce?

When I customize mainEditor bottomBar, in Crop mode and filter mode, sticker emoji and path will move.

IMG_0311 IMG_0310

Logs (optional)

No response

Example code (optional)

Widget _buildEditor() {
    return ProImageEditor.asset(
      'assets/images/testImage.png',
      key: editorKey,
      callbacks: const ProImageEditorCallbacks(),
      configs: ProImageEditorConfigs(
        designMode: platformDesignMode,
        customWidgets: ImageEditorCustomWidgets(
          mainEditor: CustomWidgetsMainEditor(
            bottomBar: (editor, rebuildStream, key) {
              return ReactiveCustomWidget(
                stream: rebuildStream,
                builder: (context) {
                  return Container(
                    width: double.infinity,
                    height: 150.0,
                    color: Colors.blueGrey,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        IconButton(
                          icon: const Icon(Icons.crop),
                          onPressed: () {
                            editor.openCropRotateEditor();
                          },
                        ),
                        IconButton(
                          icon: const Icon(Icons.emoji_emotions),
                          onPressed: () {
                            editor.openEmojiEditor();
                          },
                        ),
                      ],
                    ),
                  );
                },
              );
            },
          ),
        ),
      ),
    );
  }

Device Model (optional)

No response

hm21 commented 3 weeks ago

The issue is that the key is not added to your widget, which is necessary for the editor to recognize the size of the bottom widget. Below is an example of how to implement it.

bottomBar: (editor, rebuildStream, key) {
  return ReactiveCustomWidget(
    stream: rebuildStream,
    builder: (context) {
      return Container(
        key: key, /// TODO: Add the key here
        width: double.infinity,
        height: 150.0,
        color: Colors.blueGrey,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            IconButton(
              icon: const Icon(Icons.crop),
              onPressed: () {
                editor.openCropRotateEditor();
              },
            ),
            IconButton(
              icon: const Icon(Icons.emoji_emotions),
              onPressed: () {
                editor.openEmojiEditor();
              },
            ),
          ],
        ),
      );
    },
  );
},