Showcase highlight not correctly highlighting child widget on smartphone

[keitheyre]

Describe the bug

To Reproduce
Steps to reproduce the behavior:

1. Wrap FAB in Showcase widget
2. Open on smartphone (Android A7 smartphone)
3. See error (View attached image above)

Expected behavior
Highlight FloatingActionbutton

Screenshots

Smartphone (please complete the following information):

• Device: Samsung A7
• OS: Android 8.1
• Browser N/A

Additional context
Seems to work perfectly with no overlayPadding required, but for smartphone, it is WAY off.

[cool2apps]

I have the same problem. This problem exits on non FAB widgets too. Any solution?

[keitheyre]

I have the same problem. This problem exits on non FAB widgets too. Any solution?

I haven’t found a solution yet. Waiting for tan to see this issue. Hopefully sooner rather than later

[cool2apps]

Sometimes this workaround solves the problem, but not every time.

use this

      await Future.delayed(const Duration(milliseconds: 500));
      ShowCaseWidget.of(context).startShowCase(Shared.globalKeys);

instead of this

      WidgetsBinding.instance.addPostFrameCallback((_) => ShowCaseWidget.of(context).startShowCase(Shared.globalKeys));

[vatsaltanna]

Hello Guys, This issue has been solved and it will be available with next release.

[cool2apps]

When next release will be published?

[naitbrahim]

Hello Guys, This issue has been solved and it will be available with next release.

Can you please an estimate date for the next release ? thank you very much.

[vatsaltanna]

Please expect a new release withing 24 to 48 hours.

[vatsaltanna]

Please note that if you are wrapping showcase view to an animated widget then you need to add some delay before it starts. for example in the first case of the issue it's FAB which has it's own animation. so start a showcase with some delay until it gets to it's actual position.

[cool2apps]

Please note that if you are wrapping showcase view to an animated widget then you need to add some delay before it starts. for example in the first case of the issue it's FAB which has it's own animation. so start a showcase with some delay until it gets to it's actual position.

How should we implement this delay? Is this code ok for a delay?

await Future.delayed(const Duration(milliseconds: 500));
ShowCaseWidget.of(context).startShowCase(globalKeys);

or should we use like this:

await Future.delayed(const Duration(milliseconds: 500));
WidgetsBinding.instance.addPostFrameCallback((_) => ShowCaseWidget.of(context).startShowCase(globalKeys));

[vatsaltanna]

Hi @cool2apps , if you are using FAB and it's the first one to get highlighted then I think below code should work.

    WidgetsBinding.instance.addPostFrameCallback((_) async {
      await Future.delayed(const Duration(milliseconds: 500));
      ShowCaseWidget.of(context).startShowCase(globalKeys);
    });

[vatsaltanna]

Hello Guys, New version of showcaseview: ^2.0.0+1 is available, It should fix the positioning issue for non animated widgets.

Closing this issue for now. Feel free to reopen this if the issue still persist on the latest version.

[cool2apps]

Hi @cool2apps , if you are using FAB and it's the first one to get highlighted then I think below code should work.

    WidgetsBinding.instance.addPostFrameCallback((_) async {
      await Future.delayed(const Duration(milliseconds: 500));
      ShowCaseWidget.of(context).startShowCase(globalKeys);
    });

lint gave me Do not use BuildContexts across async gaps. warning but it looks like working. I don't know if this warning will cause a problem or not.

[naitbrahim]

Thank you @vatsaltanna it's working like a charm now ;)
it's a time saving, thanks again