Skyost / BubbleShowcase

BubbleShowcase is a small but power flutter package that allows you to highlight specific parts of your app to explain them to the user or to showcase your app new features.

Home Page:https://pub.dev/packages/bubble_showcase

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

BubbleShowcase doesn't work well with FittedBox

ma-ruz opened this issue · comments

Describe the bug
When I use BubbleShowcase with a RelaitveBubbleSlide with a key that identifies a widget inside a FittedBox, the shape is not displayed in correct size. It looks like the FittedBox's resizing is not taken into consideration.

To Reproduce
Steps to reproduce the behavior:

  1. Use something like this in your app:
  BubbleShowcase(...,
      bubbleSlides: [RelativeBubbleSlide(
              widgetKey: _resizedWidgetKey,
              shape: Oval(),
              child: MyRelativeBubbleSlideChild(...)
          )],
      child: ...(FittedBox(child: ...(Text('Hello', key: _resizedWidgetKey))))

  1. Run the app and let the slides show.
  2. See that the oval shape displays wrongly sized (and the slide child is wrongly positioned).

Expected behavior
The FittedBox should affect the size of the slide shape.

For myself, I have fixed this by creating a subclass of RelativeBubbleSlide that converts not only the top left corner from local to global coordinates, but the bottom right as well. The code looks like this:

  Position getHighlightPosition(BuildContext context, BubbleShowcase bubbleShowcase, int currentSlideIndex) {
    RenderBox renderBox = widgetKey.currentContext.findRenderObject() as RenderBox;
    Offset offset = renderBox.localToGlobal(Offset.zero);
    Offset bottomRight = renderBox.localToGlobal(renderBox.size.bottomRight(Offset.zero)); // convert the bottom right corner from local to global coordinates

    return Position(
      top: offset.dy,
      right: bottomRight.dx, // instead of adding the local size to the global offset use the global coordinates of bottom right corner
      bottom: bottomRight.dy, // instead of adding the local size to the global offset use the global coordinates of bottom right corner
      left: offset.dx,
    );
  }