While using ShowCase widget, not scrolling to respective widget when its not visible.

[sivaram16]

     Showcase(
            key: beatGlobalKey,
            description: StringResource.beatShowCaseDescp,
            showcaseBackgroundColor: ColorResource.BLUE15447a,
            titleTextStyle: TextStyle(
                color: ColorResource.WHITE16dfff,
                fontFamily: Font.ProximaNovaBold.value),
            descTextStyle: TextStyle(
                color: ColorResource.WHITE16dfff,
                fontFamily: Font.ProximaNovaRegular.value),
            shapeBorder: CircleBorder(),
            showArrow: true,
            spotlightPadding: EdgeInsets.all(10),
            child: PostActionButton(
              !this.widget.post.isLike
                  ? ImageResource.unlikedIcon
                  : ImageResource.likedIcon,
              'Beat',
              tapFunction: _onTapLikePost,
              titleColor: !this.widget.post.isLike
                  ? ColorResource.BLACK2f2f2f
                  : ColorResource.BLUE16dfff,
            ),
          ),

when i used the above code, showcase is not navigating to respective screen even in botttom, and overlay also not coming could anyone help with this? Thanks in adavance !

[BirjuVachhani]

@ThalapathySiva It would be better if you could add some screenshots of the issue you're facing.

[leslie-tilton-bs]

I'm also having this issue. I'm not sure why this issue is labeled as needing more information as it's very clear what the issue is. I do not have an example to provide at this moment but can create one if needed since the original poster is unresponsive.

I have a widget that is rendered in a scroll-able area and appears off screen below the bottom of the screen. While in portrait mode, it looks fine, if I turn the phone to landscape the showcase is no longer working as expected. A tool tip still pops up but there is no grey overlay.

Another possibly related issue is the showcase hovering over items that are partially covered by other widgets. In my case, the bottom navigation bar.

I can see responsibility for proper highlighting should go to this library. If that is not possible, at least adding a way to run code in preparation for the next showcase should be exposed. There is an on complete function for the current index but no before starting step function which is extremely useful in preparing the UI for the next showcase.

[misuvija]

Hi everyone!
Just as @ThalapathySiva and @leslie-tilton-bs I'm experiencing the same issue.

Please see my video with a quick example. Showcases 1, 2 and 3 are fine, but showcase 4's bubble doesn't gets complete displayed and showcase 5 for some reason makes the cool gray background disappear.

Hope you guys can take a look and fix!

BTW, cool widget, I love it :)
RPReplay_Final1606170875.MP4.zip

[fransiskapw]

I also experienced the issue. The workaround for me was to scroll to the component then show the showcase

Future.delayed(const Duration(milliseconds: 200), () async { // wait 2 second until component is loaded, then scroll 
  await Scrollable.ensureVisible(_one.currentContext,duration: new Duration(milliseconds:500));
  ShowCaseWidget.of(context).startShowCase([_one]);
});

[nwparker]

I also experienced the issue. The workaround for me was to scroll to the component then show the showcase

Future.delayed(const Duration(milliseconds: 200), () async { // wait 2 second until component is loaded, then scroll 
  await Scrollable.ensureVisible(_one.currentContext,duration: new Duration(milliseconds:500));
  ShowCaseWidget.of(context).startShowCase([_one]);
});

Good idea, but don't use a timer.

Use WidgetsBinding.instance.addPostFrameCallback((_) async {})

[RobertHeim]

I am not sure if the lib should handle scrolling. But it should make it possible to integrate scrolling.

The workaround of first scrolling to a position and then start the showcase does not wirk if you need to scroll between the steps.

To scroll between steps try this:

ShowCaseWidget(
  onComplete: (index, key) {
    // scroll after completing step 1
    if (index == 1) {
      await Scrollable.ensureVisible(
        key.currentContext!,
        alignment: -1,
      );
    }
  },
  builder: Builder(builder: (_) => const MyPage()),
)

Note that you cannot use a duration of ensureVisible because the showcase lib does not await the onComplete before drawing the tooltip. As a result if you would use a duration the tooltip would be drawn at a position that then is out of view after scrolling. This should be fixed in the lib. But I guess for most people it is fine without a duration for the moment.

BTW: The same is true for navigating in between steps. I think this is currently not possible and should be made available by awaiting the onComplete and providing guidance on how the build context should be managed during this. However, when looking at the code, I do not think it is designed in a way that makes this easy which makes me thinking that this will not happen. The workaround is an own state management solution and multiple ShowCaseWidgets that are triggered by the own step-state management and seeing the lib as only supporting "single-screen".

[RobertHeim]

After my last comment I decided to solve it and created the PR above. The active Showcase will be brought into (the center of the) view automatically. No setup / changes required.

If you want to use it before the merge/release you can change your pubspec.yml dependency:

  showcaseview: # ^1.1.4
    git:
      ref: '8892124'
      url: https://github.com/RobertHeim/flutter_showcaseview

[misuvija]

This is awesome @RobertHeim, thanks a lot for adding support to the scrolling.

[mhilalsh]

This is great @RobertHeim thanks so much! it's my first time to use a dependency like that before the merge.. is it safe to publish my app with it or should I wait till it's merged?

[RobertHeim]

@mhilalsh

it's my first time to use a dependency like that before the merge.. is it safe to publish my app with it or should I wait till it's merged?

Well, if you trust the un-published code then it is safe. The merge makes it more trustful, because merged code is considered to being reviewed by the package author.

But keep in mind: You cannot update the lib until it will be merged. If the PR will not be merged then maintainability will be blocked. There will not be any merges of new features or fixes from main to this specific branch. However, you could do so on your own because everything relevant to this is open source.

[mahdinazmi]

After my last comment I decided to solve it and created the PR above. The active Showcase will be brought into (the center of the) view automatically. No setup / changes required.

If you want to use it before the merge/release you can change your pubspec.yml dependency:

  showcaseview: # ^1.1.4
    git:
      ref: '8892124'
      url: https://github.com/RobertHeim/flutter_showcaseview

How can i remove circular progress indiactor ?

[Zeinab-Kouhkan]

Wait for the page to load

void startShowCaseAsSoonAsBuildUI(BuildContext context) {

    WidgetsBinding.instance.addPostFrameCallback((_) {
      Future.delayed(const Duration(milliseconds: 500), () async {
        ShowCaseWidget.of(context).startShowCase([one, two, three]);
      });
    });
  }