[Bug]: Paint editor shifting when bottom bar hidden

[adamkoch]

Package Version

4.0.2

Flutter Version

3.22.2

Platforms

iOS

How to reproduce?

In the latest 4.x version, there seems to be some placement/sizing issue with the Paint Editor screen. The others seem fine.

I am hiding the bottomBar on the main editor, text editor and paint editor, like this:

bottomBar: (editor, rebuildStream) =>
    ReactiveCustomWidget(
  stream: rebuildStream,
  builder: (context) => const SizedBox(height: 0),
),

This seems to work fine. However, I noticed that only on paint editor, there is no SafeArea so the editor expands down to the edge of the screen (where the other editors do not). To fix this, I added my own SafeArea just to the bottomBar on paint editor:

paintEditor: CustomWidgetsPaintEditor(
  bottomBar: (editor, rebuildStream) =>
      ReactiveCustomWidget(
    stream: rebuildStream,
    builder: (context) => const SafeArea(
      child: SizedBox(height: 0),
      bottom: true,
    ),
  ),
),

That fixes the paint editor from being a different dimension to the other editors, however, when starting the paint editor, all of the layers seem to offset themselves upward a bit now:

https://github.com/hm21/pro_image_editor/assets/869261/eb1ef9bd-7f91-46d8-a850-5cb1d4fa22c7

Logs (optional)

No response

Example code (optional)

No response

Device Model (optional)

No response

[hm21]

Thanks for reporting this issue.

I didn't make any tests now but what I saw is that in the code which you posted you did not add the key to the bottombar widget. This is required that the editor can know which size the bottombar have. Can you try it like below and give me feedback if it works? If not, will I search the issue in detail.

mainEditor: CustomWidgetsMainEditor(
  bottomBar: (editor, rebuildStream, key) => ReactiveCustomWidget(
    stream: rebuildStream,
    builder: (context) => SizedBox(key: key, height: 0),
  ),

[adamkoch]

Main editor and text editor seem fine actually. But I did try adding the key to CustomWidgetsMainEditor bottomBar but that didn't seem to do anything. There is no key passed into CustomWidgetsPaintEditor bottomBar builder, only editor and stream.

I'm guessing the slight shift is due to there not being any SafeArea on the paint editor, whereas the main editor and text editor seem to have a SafeArea so the sizing is slightly different.

[adamkoch]

Actually adding the key to main editor seems to make it worse. When moving text around it also resizes incorrectly. But when leaving key out it works fine for text.

[hm21]

Can you post for me the full code how you now use the editor like ProImageEditor.network(...) that will help a lot to reproduce the issue.

[adamkoch]

Here's the quickest repro: https://github.com/adamkoch/pro_image_editor/commit/339e4c0c28d3865caf01e6fdcdd3c10eb5507556 (using the "Custom AppBar and BottomBar" from the sample)

Just load it up, then click the "bug" on top (or actually can just click "paint" at bottom) and you can see the image will shift up/downward.

https://github.com/hm21/pro_image_editor/assets/869261/877d4454-7dbc-4838-815f-822658c4ef9d

[hm21]

Ah, I see, the image will move because it will always be centered in the body. This is helpful, for example, when you open the Filter Editor, where the bottom bar size is larger than in the main editor so that it takes the full possible space before it scales down. However, if you don't want the image to move, you can create a “fake” bottombar like the one below:

paintEditor: CustomWidgetsPaintEditor(
  bottomBar: (paintEditor, rebuildStream) => ReactiveCustomWidget(
    stream: rebuildStream,
    builder: (_) =>
        const SizedBox(height: kBottomNavigationBarHeight),
  ),
),

Keep in mind, depending on how you use the editor and set the SystemUiOverlayStyle you maybe also need to wrap it inside a SafeArea.
Anyway, this does not resolve the problem you show in the first video because there is the problem that the layers get the wrong y-position. I have released version 4.0.3 which should resolve this issue. Please let me know if you still have the issue after you updating

[adamkoch]

4.0.3 fixed it up! Thank you once again 🙇